molly.com

Friday 30 March 2007

Back to Work: Someone Please Clearly Articulate hasLayout?

At the recent AEA Boston, both Eric Meyer and I were stumped by two questions asking to explain hasLayout. Neither of us could articulate it well.

I’ve studied the documents, talked to some friends who have worked closely with it, and still fail to have a clear understanding of this rather mysterious piece of the way Internet Explorer handles layout.

Anyone who can help out by explaining and articulating, in as simple a description as possible, what hasLayout is and how it works . . . well, I’d be grateful!

Filed under:   aea, browsers, ie7, microsoft, professional, software
Posted by:   Molly | 04:49 | Comments (40)

40 Responses to “Back to Work: Someone Please Clearly Articulate hasLayout?

  1. bruce says:

    The real answer:

    “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.

    This quality can be irreversibly triggered by some CSS properties. Some HTML elements have “layout” by default

    http://www.satzansatz.de/cssd/onhavinglayout.html

    The real answer is that it’s mysterious voodoo.

    I wonder if they’ll nuke it in IE8.

  2. Dave Sussman says:

    Oh yeah, we need this. I did a conference talk on IE7 earlier this week and couldn’t explain it either. This is the best description I’ve found: http://www.satzansatz.de/cssd/onhavinglayout.html

  3. pepelsbey says:

    Don’t think that they’ll nuke it in «IE-N».
    Backward compatibility, you know…

  4. eSearing says:

    To me, it is like going to grandmas for dinner. Unless you tell your grandma what you wanted her to cook, dinner is a surprise, but limited to her usual tasty recipies. However, once in a while you get Lima bean and brusselsprout casserole.

    Unless you tell the browser what layout you want for each element, it is going to guess, or do what it has been programmed to do.

  5. ritchie says:

    it’s way over my head but this makes the most sense:

    The object model inside Explorer appears to be a hybrid of a document model and their traditional application model. I mention this as it is important in understanding how Explorer renders pages. The switch for jumping from a document model to an application model is to give an element “layout”. Elements acquire “layout” when they are assigned a numeric width or height.

  6. I don’t think you want me to articulate what I think hasLayout is.. ;)

  7. I think it’s a mistake wrapped in an enigma.

  8. My understanding is that “hasLayout” is an internal implementation detail in IE, that describes whether the element’s (and its children’s) position is calculated by calling a method of the element’s associated object (in which case it has layout) or by calling a method of the parent object.
    Giving an element “layout” works around some bugs because different code paths are involved, but ideally (in a bug-free implementation) it should be completely irrelevant to web developers.

  9. Ingo Chao says:

    It’s a sort of ‘block formatting context’.

  10. Ian Muir says:

    The way I understand it is that it’s largely a legacy thing.

    In IE5, especially IE5.2 for Mac, setting hasLayout seemed to force the browser to recognize the CSS positioning. In general, hasLayout = false means that the browser is controlling the layout (positioning, size, etc) hasLayout = true means that CSS is controlling the layout.

    In IE6, it seems that hasLayout is automatically set for most properties that would need it and IE7 just seems to have it on almost all the time by default.

    From a programming standpoint, I’d say that this is something that was put in to get some CSS stuff to work without having to rewrite the rendering engine. I would be surprised if it was taken out unless they build a completely new browser from scratch.

  11. thacker says:

    Very interesting. Thank you.

    Does the haslayout property within IE7 explain some of the rendering issues of its page zoom function — such as the zoom of left and right margins for centered content?

    It appears that setting this property’s value to none for impacted div tags may resolve that issue?

    Any input would be appreciated.

    Sorry I lack the knowledge to answer the original question that Molly presented.

    Thanks.

  12. ralph says:

    Andy Budd’s book CSS Mastery explains it this way, more or less: if an item controls its own size and placement, it has layout. If it doesn’t control its own size and placement, it doesn’t have layout, and its size and placement are controlled by the nearest ancestor element that does have layout.

    It’s a hack to increase performance so that IE doesn’t have to figure out size and placement for every page element.

  13. Tim Connor says:

    hasLayout is an alias for !vooDooMode. It means it’s come out of the limbo state of IE thinking “Oh sweet, nothing is strictly defined for this element – I can do whatever is fastest and easiest” into a defined state where it has to obey the laws of CSS physics. hasLayout means opening the box on the Schroedinger’s cat of the IE render model and finding out if it’ll act like a block/inline, relative/absolute, etc/etc, instead of some nebulous undefined state.

    It’s isNotNull for the box-model. Or least, that’s how it’s always seemed to me.

  14. Blog says:

    An Event Apart Boston Summary

    So I am finally getting around to writing up a summary of my time at An Event Apart Boston. I can’t even express how much that I learned. It was amazing to see so many respectable names in the web…

  15. [...] molly.com » Back to Work: Someone Please Clearly Articulate hasLayout? &emdash; My arch-nemesis: hasLayout [...]

  16. Ingo Chao says:

    A search in the MSDN revealed a widely unknown property (erroneously called attribute) and I thought I share some findings.
    The property is similar to the haslayout property and is called hasconcept. hasconcept is set to true when some CSS declarations are made.
    Promising tests showed this solves for many problems in the Trident engine haslayout is not able to cope with; it even provides some more CSS2.1 compliancy. For example, it is known that display:inline plus zoom:1 acts like display:inline-block. But: if hasconcept is set to true in addition, it acts like display:table-cell. And even better, the pseudo-element :first-letter will simulate :after (in quirksmode, that is).
    To make use of it, first of all, authors have to determine the status of hasconcept in their documents: true | false | undefined . Authors simply have to write
    javascript:alert(document.hasconcept)
    in the IE5.5+ address bar.
    If the document in question has this property set to undefined, the rendering is going to get slightly buggy under circumstances that are not entirely clear to me yet (the rendering might appear correct on your display, but on another display, it won’t: check carefully if boxes are positioned a few pixels off on your client’s PC).
    I am preparing an in-depth article to demystify this voodoo property (a long technical read -sorry-, to be published on April 2, 2007). A new magick bullet, that’s for sure.

  17. thacker says:

    Ingo Chao–

    Hopefully, you will be back here to post a link to your publication regarding haslayout, hasconcept, et al.

    It would be very much appreciated.

    Thank you very much.

  18. Ingo Chao says:

    Hi Thacker, please forgive me, it was April Fool’s Day, and I couldn’t resist to write something self-ironical. The cited article on having layout we wrote is descriptive for the most part. For another article, see the MSDN haslayout overview. Sorry again.

  19. That was a good one, Ingo. You had me doing an MSDN search (”Huh?!?!? I don’t remember any hasconcept…”), but I did realize what day it was yesterday when it turned up no results. :)

  20. thacker says:

    :::chuckling::: Thanks, Ingo. I am, again, reminded of an applicable Jack Nicholson quote from a “Few Good Men”:

    “Well, don’t I look like the f–king asshole.”

  21. Marc says:

    Hello,
    thank you very much!
    This description is perfect for me! I searched just this.

    I make an link on my website to this here.

    bye

  22. Kopux.NET says:

    I think it’s a mistake wrapped in an enigma.

  23. forum says:

    Hi
    good nice
    post thanks.

  24. ForumCu says:

    Hi
    good nice
    post thanks.

  25. Forum says:

    This article is very interesting and written by some clever guy.:) Thank you!

  26. Dizin says:

    thank you very much!
    This description is perfect for me

  27. Mike says:

    schöne seite, weiter so…

    LG Mike

  28. Forum says:

    we’ll post an update here once it’s done

  29. [...] Bei derartigen Bugs hilft, glaube ich, nur noch hasconcept __________________ Ingo Chao [...]

  30. zayıflamak, kilo verme, dogal, Zayıflama hapları, zayıflama, zayıflama, diyetle kilo verme , bitkisel zayıflama, zayıflama hapları , diyet ürünleri , rejim, diyet, zayıflam, diyet proğramı, diyetin, zayiflama hapi, zayiflama haplari, zayıflama hapları, zayiflama ilaçlari, zayiflama yöntemleri, zayıflama çayı, zayıflama yöntemleri, zayıflama ilacı, zayıflama diyetleri,

  31. cet says:

    thanks youu..

Upcoming Activities