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

Comment: #1

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: #2

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: #3

Quite good article, definitely commendable.

Comment: #4

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: #5

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: #7

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

I too am glad someone has put it all together

Comment: #8

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.

Comment: #9

Good article that sums haslayout up nicely

Comment: #10

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: #12

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: #13

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: #14

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: #15

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.

Comment: #16

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

tnx ~Scotty

Comment: #17

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: #18

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: #19

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.

Comment: #20

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: #22

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.

Comment: #24

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.