Got Layout?

Jeremy Anderson — Mon, 26 Nov 2007 12:00:16 +0000

* html body {display: none;} … I haven’t figured out why some think this hack is discriminatingGeorg

position: relativity

Ever wonder why applying a position: relative to an element in Internet Explorer can fix bizarre rendering problems? The standing theory, which is also a highly technical one, is that sometimes you just need to remind IE that things need to flow in their natural order. As logical as that may sound, the problem really has to do with a little thing called hasLayout.

display: none inline-block

This is not a new cat, nor a new bag, for that matter. Web designers have long been plagued with the rendering inconsistencies offered up by Internet Explorer, such as the peek-a-boo bug. Each of us, individually and as a community, have mapped these inconsistencies out and made record of them in our own bag of CSS tricks. None-the-less, IE still proves to be the most loathsome part of the job for many.

Though IE7 has made some pleasing improvements over it’s predecessors, it’s still a pitch or seven away from being adequate. So, I was very excited when I found On Having Layout, an on going project focussed on understanding IE’s proprietary “Layout” property and how it is messing up our world.

hasLayout = true

Ingo Chao, one of the editors on this project has a background as a clinical physician as well as an editor. The clinical side definitely comes out in this article. It’s a comprehensive, well articulated study into “what the hell is going on with IE”. If you know what CSS is, you should read On Having Layout.

hasLayout = false

The concept of “Layout” as a property, is something only to be expected from Microsoft. And, as you see by following the link, if you are using Firefox at least, the Microsoft Development Center official resources for this strange little property are anything but laid out well.

Controlling Presentation with Measurement and Location Properties in Quirks Mode . . . umm?

A Definition of hasLayout

Just as some people have character and others, not so much, according to Internet Explorer, so too do some elements in html have Layout and others, not so much. Because IE applies a seemingly arbitrary discrimination over it’s elements, we are tasked with stamping out a multitude of rendering bugs, when we write code.

So what is Layout and how can I get me some?

“Layout” is an IE/Win proprietary concept that determines how elements draw and bound their content, interact with and relate to other elements, and react on and transmit application/user events.www.satzansatz.de

Layout is irreversibly triggered by CSS. hasLayout for elements can either be set to true or false. Some elements, such as , ,

and appear to have Layout by default. While others can be given Layout by applying select CSS properties, such as position: absolute, float: left|right and display: inline-block.

Unlike other proprietary CSS for browsers, there is no layout property to declare and we are forced to interact with it in this very indirect way.

Spilled Milk

The hasLayout stumbling block has affected all designers and coders in their attempts to cross-broswer their work, and will continue to do so, to be sure. Its’ unusual nature can upset the rendering of boxes, as well as their children. As indicated in On Having Layout, consequences of an element having, or not having layout can include:

Many common IE float bugs.
Boxes themselves treating basic properties differently.
Margin collapsing between a container and its
descendants.
Various problems with the construction of lists.
Differences in the positioning of background images.
Differences between browsers when using scripting.

These Bugs We Know

Anyone who has laid code for the web is well aware of IE rendering bugs. The work Holly Bergevin, Ingo Chao, Bruno Fassino, John Gallant, Georg SÃ¸rtun and Philippe Wittenbergh have put into creating this reference text is something every developer can benefit from and it could end up saving you considerable, hair-pulling time.

Repeat Penguin » hasLayout