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:   professional, software, browsers, microsoft, ie7, aea
Posted by:   Molly | 4:49 am |

63 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. Chris Casciano Says:

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

  7. Ara Pehlivanian Says:

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

  8. Lionel Fourquaux Says:

    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. Switch-Case / Blog Archive / Links for 3/31/07 [my NetNewsWire tabs] Says:

    […] 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. Chris Wilson (MSFT) Says:

    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. Dr.Lord Says:

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

  23. çeviri Says:

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

  24. Seo Ve Dizin Makaleleri Says:

    I don’t think you want me to articulate what I think hasLayout is

  25. Kopux.NET Says:

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

  26. forum Says:

    Hi
    good nice
    post thanks.

  27. ForumCu Says:

    Hi
    good nice
    post thanks.

  28. Forum Says:

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

  29. forum Says:

    thanks you.

  30. forum siteleri Says:

    forum siteleri, forum, paylaşım

  31. vodafone kontör transfer Says:

    thanks…

  32. Dizin Says:

    thank you very much!
    This description is perfect for me

  33. cam balkon Says:

    nice

  34. Mike Says:

    schöne seite, weiter so…

    LG Mike

  35. 电炉 Says:

    Nice Site!

  36. ilahi Says:

    thanks… :)

  37. Aras-Çanta Says:

    thankss..

  38. irc Says:

    thanx

  39. Alanya Says:

    Those who choose to take the “slights and disappointments” path, meanwhile, are very generously compensated for their trouble

  40. forma Says:

    forma imalat uretici

  41. ilahi Says:

    thankss so much

  42. Forum Says:

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

  43. navigation comand Says:

    superr

  44. IE Bug - hasstyle - XHTMLforum Says:

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

  45. AffettimSeni Paylasim Alani Says:

    thanks for all

  46. Seks hikayeleri Says:

    Thanx molicim

  47. Sex hikayeleri Says:

    eyw. moli

  48. elişi,dantel,örgü modelleri Says:

    nice site

  49. firefox indir Says:

    thanks

  50. bruce Says:

    it is easy to find it, i think u just search on google or yahoo

  51. evden eve Says:

    but, i think it is another thing which you have

  52. universal trade Says:

    i like it

  53. trade Says:

    interesting, thanks

  54. surucu kursu Says:

    do you know everything about css?

  55. belediye Says:

    how can i find everything about css?

  56. ticaret odasi Says:

    what do you want to learn about css? we can help easily

  57. milliyet Says:

    i want learn too, i want start at the beginning of css

  58. umit Says:

    it is good t see u

  59. uygar Says:

    thats the matter i want to learn

  60. net gazetesi Says:

    Nice job.

  61. oyun Says:

    Thanks,very nice blog.

  62. sanayi odasi Says:

    ok,thanks

  63. fikralar Says:

    hi, umit. how is going on

Leave a Reply

Elsewhere

Roll Roll Roll