Question

I need to position a top bar that stays fixed, an ad bar below it, and then the content. For better user experience (and I’m told better SEO), I want the content to load first and not wait for the ad. So the content is higher up in the HTML. This works on all modern browsers but IE 7 is a problem.

Here is the page

When it’s first loading, it seems to load with the correct padding but after the other two divs load on top, the content “moves up” and hides behind the top two divs.

Other problems with IE7 are:
– the position of the guillemot (>>) in the Top 10 list on the right.
– When you scroll down the page towards the bottom, a box appears in the bottom right. The position of the close (x) button in this box is incorrect in IE7.

I’m thinking the best solution would be a separate IE7Fixes.css file that I can stop using when IE7 market share drops. But I’d appreciate any suggestions on what exactly to put in that file 🙂

Answer 1

Sounds like the bug described here: http://www.quirksmode.org/bugreports/archives/2007/03/ie7_positionfixed_and_margin_top_bug.html

imagine you want a fixed layer at the top of your page and all which
follows to scroll UNDER that layer.

Apparently explorer 7 is unable to
calculate a top margin for a ‘position:relative’ div which follows a
‘position:fixed’ one with higher z-index. The second layer will just
stick to the top of the page no matter which marin-top (sic) you define for
it.

What worked for me was to remove the margin-top: 200px from dfncontainer and add it instead as padding-top to body. However, while that fixes the layout (as far as I can tell) in IE7, it adds too much padding in IE8 and IE9 (haven’t tested other browsers), so it looks like an IE7-only stylesheet is necessary.

---

For the guillemots, I found this Stack Overflow question/answer that seems to be a viable fix:

.list-box OL LI {
    position: relative;
}

.list-box .guillemot {
    /* <<delete these rules>>
      float: right;
      margin-right: 7px;
    */
    position: absolute;
    right: 7px;
}

The good news is that fix appears to work in IE8 and IE9 as well, so you probably don’t need the conditional stylesheet.

The position of the X button in the “See Also” box can also be positioned using a combination of position: absolute and top and right instead of floating to get a consistent behavior.