dean.edwards.name/weblog/2005/06/layout/

On Having “Layout”

Someone has at last documented that most annoying of Internet Explorer quirks – “layout”.

I recommend that every CSS designer and DOM scripter read this. Understanding “layout” gives a huge insight into lots of other IE bugs and idiosyncrasies. Read it now!

Comments (35)

Leave a comment

Thank you. You are quick. This is today’s draft version, not edited yet. I think we will have to do a lot of work on this article. Many aspects are still missing. Suggestions are welcome.

  • Comment by: Ingo Chao
  • Posted:

Hi Ingo, I think your article is excellent and is something I probably should have written myself some time ago. “layout” is the root of all evil in IE. I’m glad that someone has finally put all the evidence together.

PS. Sorry for linking to your page before it was finished. :-)

  • Comment by: -dean
  • Posted:

Quite good article, definitely commendable.

To give an element layout in IE, you can use a custom ‘layout’ property in CSS, such as

span {
layout: true;
}

And then use this javascript (or something like it):

var el = document.getElementsByTagName('span')[0];
if (el.currentStyle.layout == 'true') el.runtimeStyle.hasLayout = true;

Or, use a behaviour:

span{behavior:expression(function(element){
 runtimeStyle.hasLayout = true;
 // trash this expression
 runtimeStyle.behavior = "none";
}(this))}

I won’t tell you where I learned how to do that last piece code…

  • Comment by: Dante
  • Posted:

Dante, your comment is slightly misleading and inaccurate. You can’t set the hasLayout property, it is internal.

You are thinking too much like a hacker. ;-)

  • Comment by: -dean
  • Posted:

[...] on having Layout ist eine schöne Erklärung einer IE-Eigenart, die viele vermeintlich unerklärliche Fehler nach sich zieht. [via Dean Edwards] [...]

Superb article, thank you all for your work on it..

I too am glad someone has put it all together :)

  • Comment by: Claire
  • Posted:

A great article, concise and clear. Fills in the holes and gaps of John and Holly’s (positioniseverything.net) research of this obscure property.

The programmer(s) who came up with hasLayout should be tarred and feathered. ;)

Good article that sums haslayout up nicely :)

  • Comment by: Paul
  • Posted:

Your suggestion for .gainlayout class nested in IE conditional comments seems to miss a trick. Since the style rule is within IE conditional comments you can use zoom:1 and still have the page validate. That will then give you a ubiquitous mechanism for giving an element hasLayout, one with no (known) side effects.

  • Comment by: Christopher Smith
  • Posted:

Turns of liquid maze I have planned originally to publish links to interesting articles and websites on daily basis….

In response to comment 10

1. There is a side effect: zoom is not supported by IE 5. Some folks still need to deal with that old one. 2. Otherwise, both options are clearly mentioned in the article. In the latest revision of the ‘hasLayout’ article, we have added some clarifications about the use of ‘zoom’ vs ‘height’. This is especially important in the light of future development of IE Win, where that browser might understand ‘height’ correctly. In short, both options are adequate mechanisms to give an element ‘hasLayout’. If you use a general stylesheet for IE via conditional comments, all versions, zoom might be more appropiate. If you do some versioning in your conditional comments (a stylesheet for IE 6 and lower), then ‘height’ is just as good, and helps with old IE5.

  • Comment by: Philippe
  • Posted:

I just want to make good designs. This is possible with the CSS tricks. But what about DAG (Designer Accessibility Guide). I can make a good design sketch on paper in a few minutes. To translate it in a design for the web is another thing. table layouts work fine, but a can’t stand the ugly sourcecode. CSS layouts are great but the tricks kill my creativity. Can someone tell me, what did I miss? web 2.0? (Some are even at web 3.0 ;-) ) I think we are still working on the alpha 1.0 version.

  • Comment by: Ronald de Gunst
  • Posted:

Hi all,

Great article!

I noticed a side-effect of the Holly Hack which is not described in the article. I have applied the holly hack to some of my h4-elements in a simple static html page. The h4-elements have an id-attribute, which are linked to through some (internal) links in a nested list at the beginning of the page. Before I apply the Holly Hack to the h4-elements, the links work fine. After I apply the Holly Hack (with conditional comments), the links stop working in IE. That is, the address changes in the address bar from “page.html” to “page.html#some_id”, but the browser doesn’t scroll down to the h4-element that is being linked to. Again, the problem only occurs in IE and only when I apply the Holly Hack. I need haslyout=true to display some background images in front of the H4-elements.

Any ideas about what the problem may be? I can be reached via e-mail: martijn [at] senden [dot] nl. (I have entered another e-mail address in the form, I want to stay clear from spam if I can.) I know this is not really a help forum, but I tried those and no one seems to understand what is happening. I can’t find any documentation on the problem either.

Thanks a lot in advance for any help!

Best regards, Martijn Senden.

  • Comment by: Martijn Senden
  • Posted:

hi,

does anybody know of it’s possible to change the entire ie-layout by jscript and css? with entire ie-layout i mean stuff like the menu-bar, toolbar, url-bar, status-bar. i’m wondering if it was possible to change all of that in an other color or to give it a background. and if all of this is possible, is it also possible to give the window an other figure, instead of a rectangle into a triangle, polygon, etc. ?

thx for helping me out with this.

ciao, MaJa de Bij.

Excellent work you have actually helped me figure out some of the bugs we were getting.

tnx ~Scotty

  • Comment by: layouts
  • Posted:

Great Article!

I have a problem closely related with this page (layout and scroll).

I use the event OnScroll of the BODY element for to get the ScrollTop and ScrollLeft; normally, it works very well. But, in the pages with DOCTYPE HTML PUBLIC “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> -like this-, the Scroll of the BODY always is 0.

I guess that it is something related with the CSS, Style, Layout, etc., but I have not found the solution.

Any ideas?

Thanks, Deza

  • Comment by: Deza
  • Posted:

Your suggestion for .gainlayout class nested in IE conditional comments seems to miss a trick. Since the style rule is within IE conditional comments you can use zoom:1 and still have the page validate. That will then give you a ubiquitous mechanism for giving an element hasLayout, one with no (known) side effects.

  • Comment by: Lackdoktor
  • Posted:

Good hint. Fantastic article which has all relevant informations about “Layout”. i think we have there a nice compendium about the topic. Thanks to Ingo for sharing it and to Dean for make it more visible to the net.

Well done! This is the most thorough, well-researched, well-written article I have read. You have documented and illuminated a complex issue with clarity. This report warrants an A++ grade.

Fabulous work. Thanks so much for sharing this with all of us!

  • Comment by: Tuttle Grey
  • Posted:

[...] 译者注:一篇很好的文 ,很久以前在blog上就推荐过,这两天断断续续花了点时间翻译了一下,推荐读读。 英文原文在此。 http://www.satzansatz.de/cssd/onhavinglayout.htm 文中所有的 layout 这个单词都未作翻译,一来本身这个单词意思就比较多,翻成啥都觉得别扭,二来它也是专有的属性,所以就意会一下吧。水平有限,很多地方都是模模糊糊地意译,发现错误欢迎留言指出。 引用一段来自Dean Edwards 的评价: I recommend that every CSS designer and DOM scripter read this. Understanding “layout” gives a huge insight into lots of other IE bugs and idiosyncrasies. (Dean Edwards) [...]

http://www.christianfecteau.com/echo/float-introduction/ Can someone tell me why in the hell IE7 adds a top margin to a cleared block container with a floated (inline?) element? The margin added is equal to its border-top-width value. It doesn’t do it for the first but only the subsequent containers and only if I don’t give layout to the containers. This one leaves me clueless… The darndest thing is if I give layout with a standard property like min-height, then IE7 stops acting like a standard browser and the container surrounds my float!!! Even more confusing is if I give layout to a container, then the following one, and only the following one, is displayed fine. I don’t even want to check IE6! I’m so sick and tired of non-standard browsers. I think I’m gonna stop working in IT and start my own Siamese cattery… That seems much bugless. :(

[...] 译者注:一篇很好的文章,很久以前在blog上就推荐过,这两天断断续续花了点时间翻译了一下,推荐读读。 英文原文在此。 http://www.satzansatz.de/cssd/onhavinglayout.htm 文中所有的 layout 这个单词都未作翻译,一来本身这个单词意思就比较多,翻成啥都觉得别扭,二来它也是专有的属性,所以就意会一下吧。水平有限,很多地方都是模模糊糊地意译,发现错误欢迎留言指出。 引用一段来自Dean Edwards 的评价: I recommend that every CSS designer and DOM scripter read this. Understanding “layout” gives a huge insight into lots of other IE bugs and idiosyncrasies. (Dean Edwards) [...]

Thanks for a clear and accurate document. It really helped me solve a problem we were struggling with for some time. You may want to add a note that hasLayout also helps IE understand that it needs to re-render (or re-position or whatever) the element’s content after the element had moved.

  • Comment by: Nir Levy
  • Posted:

[...] (Dean Edwards) [...]

[...] (Dean Edwards) [...]

[...] (Dean Edwards) [...]

[...] 相关讨论: dean.edwards.name/weblog/ [...]

[...] 译者注:一篇很好的文 ,很久以前在blog上就推荐过,这两天断断续续花了点时间翻译了一下,推荐读读。 英文原文在此。 http://www.satzansatz.de/cssd/onhavinglayout.htm 文中所有的 layout 这个单词都未作翻译,一来本身这个单词意思就比较多,翻成啥都觉得别扭,二来它也是专有的属性,所以就意会一下吧。水平有限,很多地方都是模模糊糊地意 译,发现错误欢迎留言指出。 引用一段来自Dean Edwards 的评价: I recommend that every CSS designer and DOM scripter read this. Understanding “layout” gives a huge insight into lots of other IE bugs and idiosyncrasies. (Dean Edwards) [...]

[...] (Dean Edwards) [...]

[...] Обсуждение статьи: dean.edwards.name/weblog/ [...]

[...] (Dean Edwards) [...]

[...] [...]

[...] 相关讨论: dean.edwards.name/weblog/ [...]

[...] (Dean Edwards) [...]

Leave A Comment

Line and paragraph breaks automatic, email address never displayed. Some HTML allowed.