IE6 css postioning bug

January 21, 2008 1:20 PM

I am trying to get pure-css sidenotes to work, and have run up smack against a IE6 (but not 7) css-bug.

On this page the 'sidenotes' work fine in FF, Opera and IE7 & Safari (all on Windows), but move outside of the containing DIV in IE6.

The relevant CSS is:

p.nota {
width: 140px;
position: absolute;
margin: 0px;
padding: 0px;
left: 440px;
}

The full CSS file is here.
I am not above using an IE5-specific CSS hack.

posted by signal to computers & internet (15 comments total)

Just double-checking that IE6 support is truly necessary? I'm only a hobbyist, but it seems that a lot of designers no longer feel the need to support such a terrible (and now out-of-date) browser.
posted by Squid Voltaire at 1:56 PM on January 21, 2008

About 30% of the users use IE6.
posted by signal at 2:01 PM on January 21, 2008

as nice as it would be to ignore ie6 estimates indicate that 40% or more of web surfers use it. wikipedia has done a nice job of organizing all the numbers in one place.
posted by phil at 2:07 PM on January 21, 2008

It's likely a box-model issue. Is the parent div padded out at all? It's probably a simple miscalculation on the part of the browser.

If you're not above a hack, I'd use the underscore hack:

p.nota {
width: 140px;
position: absolute;
margin: 0px;
padding: 0px;
left: 440px;
_left: [IE5-specific position]
}
posted by crickets at 2:49 PM on January 21, 2008

The underscore hack fixes the problem in IE 6.028, but not in 6.029. Don't you love IE?

The parent div's css:


#mainContent {
margin-right: 155px;
margin-bottom: 0;
margin-left: 160px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
position: relative;
}

posted by signal at 3:07 PM on January 21, 2008

you can try the star hack:

* html p.nota {
left: 390
}
posted by sxtxixtxcxh at 3:26 PM on January 21, 2008

oops. add that after your first p.nota block
posted by sxtxixtxcxh at 3:27 PM on January 21, 2008

sxtxixtxcxh: nope, it still fails in IE 6.028.
Ah, the joys of web design.
posted by signal at 5:06 PM on January 21, 2008

The following conditional CSS works on my box (had to run IE 6.029 through VPC though) as an alternative to the underscore hack. If it weren't so dang hard to debug IE6 in Vista I'd try a few other things that might work better.

<!--[if lte IE 6]>
<style type="text/css">
p.nota {
left: 260px;
}
</style>
<![endif]-->
posted by Hildago at 5:20 PM on January 21, 2008

Hildago: tried it, no dice (on IE 6.028), thanks anyway.
posted by signal at 7:25 PM on January 21, 2008

So, is it the case that the underscore hack works in 6.0.28 but not 6.0.29, and the conditional comments work in 6.0.29 but not 6.0.28? If so, feed the browser 3 different CSS left values for that paragraph: one for each version of IE, and one for everybody else.

Or maybe I'm missing something?
posted by Hildago at 7:42 PM on January 21, 2008

I tested both the suggestions from Hidalgo and sxtxixtxcxh, and neither work on my virtual machine with the old ie. However, combining the two like this:

}

* html p.nota {

left: 260px;

}

With the html hack and 260px instead of 390, works like a charm for me. It even looks better than it does in Firefox.
posted by tjvis at 11:43 AM on January 22, 2008

tjvis: did you miss some code?
posted by signal at 6:13 PM on January 22, 2008

no but there seems to be an extra closed bracket at the beginning there. went a little wild with the cut and paste. should just be

* html p.nota {
left: 260px;
}
posted by tjvis at 1:26 PM on January 24, 2008

For future reference: the final, non-hackish solution was to add a width and remove the margin-right from the containing div.
posted by signal at 5:35 PM on January 31, 2008