Navigation
This is archived content. Visit our new forum.
  • Author
    Posts
  • #669325

    Cindy H
    Participant

    Hello –
    The home and projects pages of my site, http://bonavic.com, seem to have an alignment problem in IE (11) and Firefox that does not exist in Chrome or Safari.

    1. When the home page is first entered, the text box should align with the right margin (CSS uses float: right;). However, in IE and FF, it is sort of in the middle of the screen on my laptop. This happens if IE or FF have been closed, then I open them and go directly to bonavic.com. If I scroll the page down at all, the box jumps over to the far right of the screen (where it should be) and subsequent refreshes of the page cannot put it back in the middle. Only closing the browser and reopening can cause the problem to occur again.

    From what I can glean from the horrible IE inspection tool, it seems like IE thinks the rightmost edge of the column is roughly in the middle of the page, so it is respecting the float: right;, it’s just that it doesn’t have the proper dimensions for the page/viewport. Then it’s almost like that dimension gets recalculated as soon as I scroll the page.

    2. On the Projects page, the issue is with the top margin. I have set it to negative so that the Rev Slider shows underneath the semi-transparent header. In IE and FF, when the page is first entered, the Rev slider is below the header with a small white margin above it. However, when the page is scrolled down slightly, the whole slider jumps up to its correct position at the very top of the page.

    Have you heard of this before? Any insight you can provide would be appreciated. I’m using WP 4.3.1 and X 4.1.1.
    Thanks,
    Cindy

    #669503

    Friech
    Moderator

    Hi Cindy,

    Thanks for writing in! 1) Instead of using the float: right; try to use the position and right property.

    .x-container .text-block-right {
    	position: absolute;
    	right: 0px;
    }

    2) Apply the negative margin top on the entry-info instead of the entry-wrap.

    .x-portfolio .entry-info {margin-top: -10%;}

    Hope it helps, Cheers!

    #671010

    Cindy H
    Participant

    That did the trick! Thanks so much for your help.
    Cindy

    #671026

    Friech
    Moderator

    You’re more than welcome, glad we could help.

    Cheers!