Thursday, June 25, 2009

Solution for negative margins/indents bug in IE 6

Over two and a half years ago, I wrote about this bug for which I didn’t know a fix. This week, I’ve had the problem resurrect, and after more Googling, found the solution from another blogger. Here it is:

Give the child that is getting cut off, haslayout like so:


<!--[if lte IE 7]>
<style type="text/css">
#child {
zoom: 1;
position: relative;
}
</style>
<![endif]-->

In my situation, I’ve used just position: relative; to fix both IE 6 & 7 because using zoom: 1; wrecked the auto width of the child element. [Don’t know if this fixes IE 5.x, and don’t care.]

I’ve read from others that the reverse sometimes cures, too, so I suggest trying both, then trying one or the other to see which gets the result you need. Buffet-style IE hacks!

Woohoo! I can finally cross this one off.

Labels: , , ,

2 Comments:

Anonymous Anonymous said...

Nice post. But i used to follow this article for negative margin bugNegative Margin Bug fix in ie6...

Tue Jul 07, 12:51:00 AM 2009  
Blogger µ said...

Yeah. Well, that’s exactly the same thing I’ve posted. Except that this solution adds a zoom: 1 option if for some reason you can’t use position: relative.

Fri Jul 10, 10:49:00 AM 2009  

Post a Comment

Links to this post:

Create a Link

<< Home