IE6′s hasLayout and its margin issue
IE6 has bugs…let’s kill them
Everyone know how to fix the the double margin IE6 puts on an element that has a left/right margin on it, without using a hack? If not, it’s an easy one…set display to inline. That’s all it takes. Have you ever run into the 3px margin gap though? This took some hunting for me to find out how to fix it. If you have any idea of what I’m talking about, you will know how infuriating it is. A co-worker and I ran into this problem months ago, figured out how to fix it, and forgot about it. The problem came back, and we drew a blank. Basically, we are using a component that says “Hey, if a flash banner is present, use it, otherwise, use this image over here instead.” Well, when it puts the image in, it doesn’t give it a height or a width. Why would that be a problem? Because it doesn’t have ‘Layout’ according to IE.
What does ‘hasLayout’ mean?
I’ll give you the definition that I got from here: “Layout” is an IE/Win proprietary concept that determines how elements draw and bound their content…”.
I would like to be able to explain why this happens, but the link above does a better job of it than I ever could. I just want you aware of what happens. To better illustrate this, take a look at the link below in IE6.
Click here for demo (again, look at it in IE6 – you won’t see it in any other browser).
I’ve read now a bunch of very bad ways to fix this, like using a negative top margin to move the bottom div up. Pure dumb, because there is an easy way to fix this. I’ve used zoom set to 1 before, but that doesn’t validate, so if you are one of the purest, this isn’t an option. Plus, this won’t work on this anyway. Real easy way to fix it. Give the image itself a display of block. Pure easy right? Now, I know most of you are not going to run into this problem, or maybe you just don’t care. I’m just demonstrating this so you are aware of it, and know how to fix it. It took me a while to figure out it had to be put on the image itself, and not the containing div. When using Spoon for Firefox, IE Developer kept showing text nodes underneath the image, so I was looking for a way to get rid of that. After about an hour of fiddling and trying everything I finally got it. And so do you now!
Let me know if you have come across any wierd IE bugs! I am always looking for stuff like that and how to fix them.
This will return all elements in the document, which I can’t think of a reason to do such a thing. But I can think of a reason to use this for something good. Below it change all the children of the element with an id of ‘container’, and give them the css property of color, set to black.
$('#container > *').css('color', '#000000');