[Paul O'B]

Paul, any new updates since 2004 that you'd like to share?
Great thread, thanks.

Here's a couple more things for IE.

FAQ:What is "haslayout"

This is probably the most important thing that you need to know (apart from the broken box model) when dealing with IE.

When you layout elements on your page a certain number of properties will cause the element to go into what msdn calls "layout" mode and therefore the element "haslayout". When an element "haslayout" it will start behaving properly and many bugs from the peek-a-boo bug to disappearing text/floats/images etc will all magically disappear.

There are a list of properties you can use to force layout noted in the links below but the easiest to use and most sensible is simply to give the element a dimension. Dimensions force layout mode (on block level elements only of course as inline elements do not take note of dimensions) and the easiest dimension is to apply a 100% width when you have elements that have no padding or borders. If the element has padding or borders then you cannot apply 100% width because the box model will make the element too big.

In these cases you can apply a height:1% hack. Why 1% ?

IE treats height as a minimum and if you give an element a specific height then the element will start at that height but should the content be greater than the specified height then the element will automatically expand. (Other browsers will just overflow as they will respect the height.)

Therefore the height:1% hack should be hidden from all other browsers and just be given to ie. (This is why it is better to use the 100% width where possible as no hacks are needed.)

/* mac hide \*/
* html #elementname {height:1%}
/* end hide*/

The mac hiding comments hide the style from ie mac as it does not suffer from this bug and also will not expand the 1% height. The star selector hack (* html) gives the style to IE only. (Read the box model hacks above for more info on the star selector hack). Therefore the above snippet of code will pass styles to ie only.

The height is set to 1% which ie promptly ignores as the content will always be greater than 1% (theoretically) and therefore there is no detrimental effect to the layout except that the element is forced into layout mode and starts working correctly.

You may find many bugs listed on the internet (all with their own peculiar names) however 90% of them will stem from the fact that an element (or its child or parent) isn't generating "layout".

With a little bit of experience you will soon spot which elemenents need layout and are causing problems but the easiest one to note is an element that has its size defined by margins alone. If you have an element that is sized like this for example :

#test {margin:50px 20px 70px 40px}

Most browers will handle this correctly but IE will have problems especially when you start adding inner elements/images/floats of a set size. It seems that IE can't work out the dimensions of the parent correctly and all sorts of weird things can happen depending on the situation. This can simply be fixed by using the height:1% hack as documented above

Why is this "layout bug" not well known ?

Well msdn does document "haslayout" in the links below but it does take some finding!

http://msdn.microsoft.com/library/de...ie20050831.asp
http://msdn.microsoft.com/workshop/a...tion.asp#intro
http://msdn.microsoft.com/workshop/a.../haslayout.asp


The above applies mainly to IE6 and we will have to wait and see what ie7 has to offer and whether these bugs wil be fixed or not although I have a feeling that the layout problem may be fixed as the msdn blog mentions that they are looking at bugs like the peek-a-boo bug etc which are related to this.

There is also an excellent article on haslayout here that goes in depth and brings everything under one roof. Worth reading and digesting

Edit:


Some IE7 information added here from a recent post I made:

min-height:0 is the perfect candidate for forcing "haslayout" in IE7 because it causes no visual difference to the display and is harmless to all browsers. It of course only applies haslayout to IE7 as ie6 doesn't understand the min and max width properties.

Overflow (other than visible) will trigger haslayout in IE7 but it will also of course apply the overflow behaviour to that element and you may not want to have scrollbars appearing, or risk the chance that scrollbars will appear.

It doesn't matter what you use to force "haslayout" as the effect is the same whatever you use but the code you apply will of course affect the element in the usual way. That's why min-height:0 is so useful because it causes nothing to happen to the element at all and is 100% safe for other browsers.

There are a number of "triggers" for haslayout and they are documented at the MSDN site. These refer to IE6 but still have meaning for IE7 although IE7 has some extra properties and some new layout triggers such as min/max - width/height, overflow (other than visible)).

Of course you do need some experience in spotting haslayout disturbances rather than coding errors but usually when part of an element disappears or appears in a position it shouldn't be then you can hazard a guess that "haslayout" is an issue and you just have to find the element causing the problem. The problem may in fact be a distant parent that is actually causing the problem and can take a bit of trial and error to find the right one.