investigating 'hasLayout'...

...reverse engineering...

cross-browser solutions…

It is always best to start out with the good browsers, and correct IE/win until it lines up with the others. However, there are times when we actually like to, or simply have to, start with what IE/win does.

When IE6, and IE7, apply its proprietary 'Layout' concept and starts to expand containers and create isolated "boxes" all over the place, then any inexperienced web designer may be forgiven for thinking that “this can't be done in other browsers”. Of course it can be done, but standard-compliant browsers need proper CSS…

So, we want the good browsers to replicate, or rather 'simulate', IE/win's buggy rendering — using W3C-standard CSS. I'll make use of the slight similarities found between 'hasLayout' in IE win (see: on having layout), and the establishment of 'new block formatting context' in standard compliant browsers (see: CSS 2.1 spec - 9.4.1) in the following examples.

next to floats…

How about lining up the left (or right) edge of a paragraph in the flow with a floating image that's preceding it, no matter the size of the image or the length of the paragraph…

  1. 'display: table' vs. 'hasLayout'
  2. 'overflow: hidden|auto' vs. 'hasLayout'

containing floats…

IE/win will expand containers to contain floats whenever 'hasLayout = true'. How about standard-compliant browsers...

  1. 'display: table' vs. 'hasLayout'
  2. 'overflow: hidden|auto' vs. 'hasLayout'
  3. other alternatives
  4. real world solution under test

simulations…

Investigations and testing behind these cross-browser solutions has, literally, been a global undertaking, and part of the work behind the on having layout article.

For a close look at the code behind the 'block formatting context' used to make standard-compliant browsers simulate the concept of 'Layout' in Internet Explorer, see: simulations: IE Windows vs CSS2.1 browsers....

conclusion…

Who said life as a web-carpenter should be easy…

Any similarities between 'hasLayout' in IE/win and the establishment of 'new block formatting context' in standard compliant browsers, are more or less accidental and quite superficial. The effect of 'hasLayout' in IE/win has nothing to do with standards.

In order to complicate it even further: any attempt to create perfect solutions is counteracted by countless bugs and differences in standard-compliant browsers. It's totally absurd

This series deals with IE6, and for the most part also IE7, vs. the latest standard-compliant browsers at time of writing / last revision. Older IE/win versions are simply ignored, and IE8 won't be evaluated until a final version is released.

This series vill be revisited and revised until the use of IE/win versions in need of non-standard design-considerations related to 'hasLayout' is reduced to insignificant numbers. Slow adaptation will probably keep this series going for a while.

sincerely  georg; sign

Hageland 03.sep.2005
last rev: 20.aug.2008


investigating 'hasLayout'...

additions:

'hasLayout':
an internal flag in Internet Explorer for windows.
- 'hasLyout = false': 'Layout' not applied.
- 'hasLyout = true': 'Layout' applied.

Work in progress:

This series vill be revisited and revised until the use of IE/win versions in need of non-standard design-considerations related to 'hasLayout' is reduced to insignificant numbers.

IE6 is in quirks mode.
IE7 is in standards mode.

IE6 has two modes available to us. That's the old 'quirks mode' known from IE5+, and the new 'not very standard compliant mode' only found in IE6. Both modes rely on non-standard CSS in order to work, and both modes are pretty buggy.

IE7 is an improved version of IE6, and only complicates things slightly by needing different hacks to achieve the same old rendering-effects.

IE/Mac is excluded from nearly all these examples, and will render them buggy or not at all.

external resources

examples…
…2005 - 2008