What Is Haslayout

What is haslayout?

It's a non-standard property on an HTML element which is only supported by IE7 and lower ( IE8 compatability mode too ), which if triggered, causes the element to be rendered in a certain way ( which can be unexpected, random, can be a godsend or can be hell ).

Classic example is giving layout to an element so it can clear floats.

#wrapper { zoom:1; }

The element will now contain floats. Any of these properties and value other than auto/normal will trigger the layout property.

* display: inline-block
* height: (any value except auto)
* float: (left or right)
* position: absolute
* width: (any value except auto)
* writing-mode: tb-rl
* zoom: (any value except normal)

Please have a thorough read @ http://reference.sitepoint.com/css/haslayout

Why does Internet Explorer need the hasLayout flag?

The Netscape renderer was completely re-written post-NS4. IE's "Trident" rendering engine got no such love. This made good business sense - IE continued to improve incrementally while NS was being re-written, and partially because of this (and partially because of its distribution arrangement...) managed to capture a huge share of the market...

But the end result is an old, crufty codebase which makes life hell for developers, who must consequently be painfully aware of what should be hidden implementation details.

Now, that last point is key: a browser's renderer is an abstraction, allowing you to create in a few lines of markup something that would take hundreds or thousands of lines of low-level rendering and event-handling code. And like all programming abstractions, it leaks a bit... This is true for IE, Netscape, Firefox, Opera, Webkit... And each browser has developers working feverishly to plug the leaks in the abstractions. Except, for five years, IE did not. Other leaks were plugged, but the rendering engine became more and more sieve-like.

Together, these to factors conspire to expose things like hasLayout.

What does hasLayout = -1 in Buggy Old IE means...?

Customarily 0 indicates false and all other values are true.

However if it's an HTML attribute it might be parsed differently because Microsoft says valid values are true or false

It appears that in your example, the intention of the programmer was to specify a true value (by customary means) but they should have used true or false, otherwise they might be conveying the wrong meaning.

hasLayout Block vs. hasLayout Zoom

The first method:

@mixin has-layout-block {
  @if $legacy-support-for-ie {
    // This makes ie6 get layout
    display: inline-block;
    // and this puts it back to block
    & {
      display: block; } } }

will compile to something like:

selector {
    display: inline-block;
}
selector {
    display: block;
}

And the second method:

@mixin has-layout-zoom {
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
    *zoom: 1; } }

will compile to something like:

selector {
    *zoom: 1;
}

Both methods will successfully give an element hasLayout, so purely from that perspective it doesn't matter which you use.

The first method will pass validation, whereas the second method will not. However, the validation failing in the second method is a complete non-issue; the hack used is "safe".

I use the second method everywhere because it's shorter and doesn't involve two rules.

It's not really worth worrying about (IE6/7 are dying), but if you want more information read this and this.

Why would you use a HTML/CSS width of 99.9% instead of 100%?

The `hasLayout` property

It's a dirty hack used to set the IE specific hasLayout property of the element to true. The hasLayout property "determines how elements draw and bound their content, interact with and relate to other elements, and react on and transmit application/user events." Giving an element layout is an easy way to fix many layout related bugs which appear in Internet Explorer.

What's with the 99.9%?

Setting the width to 99.9% is one way to trigger it. The reason you would use 99.9% is because layout is given to an element if its width is set to anything other than auto. Setting it to a percentage prevents the need to use a fixed width.

After some testing in jsFiddle, I've come to the conclusion that it really isn't necessary to to use a width of 99.9%, using a width of 100% is just as effective. http://jsfiddle.net/3qfjW/2/ (IE-Only). It seems that setting width to 99.9% may have been a common misconception which stuck.. Spread the word people.

Other methods

You can also trigger hasLayout using zoom: 1; While this is the preferred method for many, as it doesn't mess with other style related features of an element, it is also invalid CSS code, which is not an option to use for some developers.

CSS HasLayout IE7 Bug

@sweetroll is correct, this has nothing to do with hasLayout.

The problem is inside /wp/wp-content/themes/custom_bellydance_theme/style.css.

You have two lines (specifically, lines 354 and 438) which contain a filter rule:

filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', /* IE6,IE7 */ 
                      M11=0.9986295347545738, M12=0.05233595624294383, M21=-0.05233595624294383, M22=0.9986295347545738);

Seemingly, any CSS after either of those lines is not parsed by IE7.

If you remove both of those lines, your site is fixed in IE7.

I'm not sure what the actual problem is with those lines. I tried removing the /* */ comments inside those lines, but that made no difference.

I'd suggest the best way to proceed is just to forget about having the rotated date hover things on IE6/7. It's not that important an effect, and it's only in two unimportant browsers. If that's unacceptable, you could make another question to see if anybody else knows the reason for this (if you do, make sure you link to this question).

I'm glad you decided to link to your site.

It would've otherwise been impossible for anyone to figure this out.

What Is Haslayout