Posts Tagged ‘ie6’

IE6′s hasLayout and its margin issue

Wednesday, August 11th, 2010
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).


IE6 Min-height problem

Tuesday, August 25th, 2009

Here is one for the newbies to web design. Min-height does not work in IE6, but here is a to get it to work.

selector {
min-height: 500px;
height: auto !important;
height: 500px;
_overflow: visible;

IE6 doesn’t understand the min-height or the !important, but it does see the height: 500px, and the overflow: visible extends the container so that everything displays. Simple as that.