Skip to main content

On having layout — the concept of hasLayout in IE/Win

Popularity Report

Total Popularity Score: 0
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Rank

Related Lists

Bookmark History

Saved by 91 people (-26 private), first by anonymouse user on 2006-03-02


Public Comment

on 2006-08-26 by bluecockatoo

Good article on why so many css "flow" bugs in IE are fixed by adding width or height to elements.

Public Sticky notes

A lot of Internet Explorer's rendering inconsistencies can be fixed by giving an element “layout.” John Gallant and Holly Bergevin classified these inconsistencies as “dimensional bugs,” meaning that they can often be solved by applying a width or height.

Highlighted by bluecockatoo

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

Highlighted by bluecockatoo

The following CSS property/value pairs will, if applied, allow an element to gain layout.

position: absolute
Refers to its containing block, and that's where some problems begin.
float: left|right
The float model has a lot of quirks due to some aspects of a layout element.
display: inline-block
Sometimes a cure when the element is at inline level and needs layout. Applying layout is probably the only real effect of this property. The “inline-block behaviour” itself can be achieved in IE, but quite independently: IE/Win: inline-block and hasLayout.
width: any value other than 'auto'
This is often an implicit fix, more often the trigger when hasLayout does things wrong.
height: any value other than 'auto'
height: 1% is used in the Holly Hack.
zoom: any value other than 'normal' (MSDN)
MS proprietary, does not validate. zoom: 1 can be used for debugging.
writing-mode: tb-rl (MSDN)
MS proprietary, does not validate.

Highlighted by bluecockatoo

As of IE7, overflow became a layout-trigger.

overflow: hidden|scroll|auto
This property did not apply in prior versions, unless “layout” was added to the box by other triggers.
overflow-x|-y: hidden|scroll|auto
As part of the CSS3 box model module, overflow-x and -y are not widely implemented yet. They did not trigger hasLayout in prior versions of IE.

Highlighted by bluecockatoo

Elements having both “layout” and display: inline behave in a similar way as what the standards say about inline-block: they flow horizontally like words in a paragraph, are sensitive to vertical align, and apply a sort of shrink-wrapping to their content. As soon as the inline elements have layout, they act as inline-block, this is an explanation why, in IE/Win, inline elements can contain and hold block-level elements with less problems than in other browsers, where display: inline remains inline.

Highlighted by bluecockatoo

width and height trigger hasLayout in IE 5.x and IE 6 or newer in quirks mode only. As of IE6, when the browser is in “standards-compliance mode” inline elements will ignore the width and height properties, and setting the width and height properties will not cause the element to have layout.

Highlighted by bluecockatoo

hasLayout

Highlighted by tkabbs

A lot of Internet Explorer's rendering inconsistencies can be fixed by giving an element “layout.” John Gallant and Holly Bergevin classified these inconsistencies as “dimensional bugs,” meaning that they can often be solved by applying a width or height. This leads to a question of why “layout” can change the rendering of and the relationships between elements. The question, albeit a good one, is hard to answer. In this article, the authors focus on some aspects of this complicated matter. For more thorough discussions and examples, please refer to the links provided.

Highlighted by cvdlinden

A lot of Internet Explorer's rendering inconsistencies can be fixed by giving an element “layout.” John Gallant and Holly Bergevin classified these inconsistencies as “dimensional bugs,” meaning that they can often be solved by applying a width or height. This leads to a question of why “layout” can change the rendering of and the relationships between elements. The question, albeit a good one, is hard to answer. In this article, the authors focus on some aspects of this complicated matter. For more thorough discussions and examples, please refer to the links provided.

Highlighted by pklausner

A lot of Internet Explorer's rendering inconsistencies can be fixed by giving an element “layout.” John Gallant and Holly Bergevin classified these inconsistencies as “dimensional bugs,” meaning that they can often be solved by applying a width or height. This leads to a question of why “layout” can change the rendering of and the relationships between elements. The question, albeit a good one, is hard to answer. In this article, the authors focus on some aspects of this complicated matter. For more thorough discussions and examples, please refer to the links provided.

Highlighted by madchicken

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

Highlighted by kenyth

hasLayout is set to true

Highlighted by haltersweb

not having “layout” can include

Highlighted by haltersweb

Unlike standard properties, or even proprietary CSS properties available in different browsers, layout is not directly assigned via CSS declarations. In other words, there is no “layout property.” Certain elements automatically “have layout” and it is quietly added when various CSS declarations are made.

Highlighted by scootermac315

Default layout elements

Highlighted by haltersweb

The following elements appear to have layout by default.

Highlighted by scootermac315

The following CSS property/value pairs will, if applied, allow an element to gain layout.

Highlighted by scootermac315

The following CSS property/value pairs will, if applied, allow an element to gain layout.

Highlighted by kenyth

The following CSS property/value pairs will, if applied, allow an element to gain layout.

Highlighted by haltersweb

display: inline-block

Highlighted by kenyth

Applying layout is probably the only real effect of this property.

Highlighted by scootermac315

other than 'auto'

Highlighted by kenyth

width: any value other than 'auto'
This is often an implicit fix, more often the trigger when hasLayout does things wrong

Highlighted by scootermac315

more often the trigger when hasLayout does things wrong.

Highlighted by kenyth

height: any value other than 'auto'
height: 1% is used in the Holly Hack

Highlighted by scootermac315

zoom: any value other than 'normal'

Highlighted by haltersweb

For inline elements (either inline by default like span, or having display: inline)

Highlighted by scootermac315

width and height trigger hasLayout in IE 5.x and IE 6 or newer in quirks mode only

Highlighted by scootermac315

  • width, height (to 'auto')
  • max-width, max-height (to 'none') (in IE 7)
  • position (to 'static')
  • float (to 'none')
  • overflow (to 'visible') (in IE 7)
  • zoom (to 'normal')
  • writing-mode (from 'tb-rl' to 'lr-tb')

    • Highlighted by bradblog

    .gainlayout { _height: 0; }

    Highlighted by kenyth

  • <!--[if lte IE 6]>
  • <style>
  • .gainlayout { height: 1px; }
  • </style>
  • <![endif]-->

    • Highlighted by kenyth