1. Home
  2. Forums Index
  3. Browser Side / CSS 5:59 pm May 21, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

IE8 hasLayout?

zoom:1 or height:1%?

         

CSS_Kidd

6:01 pm on Dec 11, 2009 (gmt 0)

10+ Year Member



It was brought to my attention that in IE8 zoom:1; does not trigger hasLayout anymore. And that I should really use height:1% Or not even use it at all for IE8. However I will still get "odd" spacing on some elements and I seem to have no issue with either one working in IE8. And now I am confused.

Here is one of 3 sites where I use zoom:1 to adjust for odd spacing that is created in IE in general. Take note that if you use either one of the methods the spacing is removed. However this is only because I call the divs that use it in my IE Conditional css. If I remove it completely the page is fine in IE8. But I have notice that if I do call the divs, they will work with either zoom:1 or height:1% and without any java script at all. Overall this really isn't a big deal because I can just remove it and I still have other css files that target IE6 and IE7 for their issues. Take a look at the HTML, CSS and IE8 css and let me know what you all think of this quirky thing. Also let me know if you see any other issues in general.

Both the HTML and the CSS do validate

HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />

<title>Title</title>

<link rel="shortcut icon" href="favicon.ico" />

<link rel="stylesheet" type="text/css" href="css/wm1-style.css" />
<!--[if lte IE 8]>
<link href="css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 7]>
<link href="css/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 6]>
<link href="css/ie8.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--Script to fix target _blank nonvalidation-->
<script type="text/javascript" src="script/external.js">
</script>

</head>

<body>

<!--HEADER CONTAINER START-->
<div id="header">
<div id="logo">
<a href="index.htm"><img src="images/logo.png" width="190" height="125" alt="" title="" /></a>
</div>
<div id="right">

<!--NAV MENU START-->
<div id="nav-menu">
<!--Classes .corner and .TL, TR, BL, BR are rounded corners -->
<div class="corner TL"></div>
<div class="corner TR"></div>
<ul>
<li><a href="item.htm">Item 1</a></li>
<li class="break"></li>
<li><a href="item.htm">Item 2</a></li>
<li class="break"></li>
<li><a href="item.htm">Item 3</a></li>
<li class="break"></li>
<li><a href="item.htm">Item 4</a></li>
<li class="break"></li>
<li><a href="item.htm">Item 5</a></li>
<li class="break"></li>
<li><a href="item.htm">Item 6</a></li>
<li class="break"></li>
<li><a href="item.htm">Item 7</a></li>
<li class="break"></li>
<li><a href="item.htm">Item 8</a></li>
</ul>
</div>
<!--NAV MENU END-->

</div>
</div>
<!--HEADER CONTAINER END-->

<!--MAIN CONTAINER START-->
<div id="container">
<div class="corner TL"></div>
<div class="corner BL"></div>
<div class="corner BR"></div>

<!--INSIDE CONTAINER PADDING START-->
<div class="container-inner">

<div id="qk-links">
<a href="index.htm">Home</a> ¦ <a href="item.htm">Item 9</a> ¦ <a href="item.htm">Item 10</a> ¦ <a href="item.htm">Item 11</a>
</div>

<!--PAGE MAIN IMAGE START-->
<div id="page-main-image">
<h1>Welcome to Example.com</h1>
<img src="images/image.jpg" alt="" title="" width="560" height="269" />
</div>
<!--PAGE MAIN IMAGE END-->

<!--ADDRESS START-->
<div id="ad-weather">
<h3>Address:</h3>
<p>123 Main St.</p>
<p>New York, NY 12345</p>
<p>&nbsp;</p>
<h3>Phone:</h3>
<p>(123) 123-1234 - OFFICE</p>
<p>(123) 123-1234 - FAX</p>
<div class="reserve-link"><a href="item.htm">Reserve</a></div>
<h3>Current Conditions:</h3>
<!--Weather-->
<div style="padding-top:8px;">

<script type="text/javascript" src='weather-app'></script>

</div>
<div class="clear-float"></div>
</div>
<!--ADDRESS AND WEATER END-->

<div class="clear-float"></div>
<div class="ad-weather-line"></div>

<!--TEXT BOX HEADER START-->
<h1><span class="corner2 TL"></span>Topic Title 1<span class="corner2 TR"></span></h1>
<!--TEXT BOX HEADER END-->

<!--TEXT BOX START-->
<div class="text-box">
<div class="corner2 TR"></div>
<div class="corner2 BL"></div>
<div class="corner2 BR"></div>
<div class="container-inner2"> <img src="images/image.jpg" alt="" title="" />
<p>&nbsp;</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper, odio ut rhoncus egestas, massa mauris hendrerit dui, eu elementum nunc purus ut felis. Duis lacinia pharetra tincidunt. Integer laoreet arcu eget erat posuere tempus. In hac habitasse platea dictumst. Sed aliquam venenatis purus nec posuere. Nunc tincidunt adipiscing massa in blandit.</p>
<p>&nbsp;</p>
<ul class="feature-list">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<ul class="feature-list">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<div class="clear-float"></div>
</div>
</div>
<!--TEXT BOX END-->

<div class="ad-weather-line"></div>

<!--TEXT BOX HEADER START-->
<h1><span class="corner2 TL"></span>Topic Title 2<span class="corner2 TR"></span></h1>
<!--TEXT BOX HEADER END-->

<!--TEXT BOX START-->
<div class="text-box">
<div class="corner2 TR"></div>
<div class="corner2 BL"></div>
<div class="corner2 BR"></div>
<div class="container-inner2"> <img src="images/image.jpg" alt="" title="" /><img src="images/image.jpg" alt="" title="" style="margin: 0 30px;" /><img src="images/image.jpg" alt="" title="" />
<p>&nbsp;</p>
<p>Vivamus sapien erat, lacinia id fermentum in, eleifend in nibh. Proin vehicula eleifend bibendum. In hac habitasse platea dictumst. Etiam nibh augue, semper at dignissim a, congue vitae risus. Maecenas adipiscing, tortor nec posuere commodo, leo sapien interdum mauris, nec porttitor tortor ante quis nibh. Phasellus sed quam lorem. Maecenas euismod sodales bibendum. Vivamus fermentum varius dui, sit amet condimentum orci accumsan quis.</p>
<p>&nbsp;</p>
<p><strong>These are List Items:</strong></p>
<p>&nbsp;</p>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
</div>
<!--TEXT BOX END-->

</div>
<!--INSIDE CONTAINER PADDING END-->

</div>
<!--MAIN CONTAINER END-->

<!--FOOTER START-->
<div id="footer">Copyright &copy;2009 <a href="http://www.example.com" rel="external">Example, Inc.</a>. All Rights Reserved.</div>
<!--FOOTER END-->

<!--GOOGLE TRACKING START-->

<!--GOOGLE TRACKING END-->

</body>

</html>

CSS


* {
margin: 0px;
padding: 0px;
border: none;
}
body {
background: #996;
font: 11px/1.4em Arial,sans-serif;
}
h2 {
font-size: 14px;
}
.clear-float {
clear: both;
font-size: 0%;
line-height: 0;
}
.image-float-left {
clear: left;
float: left;
margin-right: 10px;
border: 1px solid #000;
}
.image-float-right {
clear: right;
float: right;
margin-left: 10px;
border: 1px solid #000;
}
p.justify {
text-align:justify;
}
/*HEADER CONTAINER START*/
#header {
width: 800px;
height: 135px;
margin: 0px auto;
background: url(../images/image.jpg) no-repeat center bottom;
clear: both;
}
#header #logo {
width: 190px;
height: 125px;
display: block;
padding: 5px 0 0 0;
float:left;
}
#header #right {
width: 630px;
height: 25px;
padding: 110px 0 0 0;
float: left;
display: block;
overflow: hidden;
}
#header #right {
width: 610px;
height: 25px;
padding: 110px 0 0 0;
float: left;
display: block;
overflow: hidden;
}
/*HEADER CONTAINER END*/

/*NAVIGATION START*/
#nav-menu {
height: 24px;
background: #663;
position: relative;
border-bottom: solid 1px #552
}
#nav-menu ul {
list-style: none;
float: right;
padding: 0 13px;
}
#nav-menu ul li {
float: left;
display: block;
}
#nav-menu ul li.break{
width: 1px;
height: 24px;
background: #552;
}
#nav-menu ul li a {
padding: 0 1em;
text-align: center;
font-weight:bold;
text-decoration: none;
color: #cc9;
line-height: 2.2em;
}
#nav-menu ul li a:hover {
color: #fff;
}
#nav-menu ul li a.selected, #qk-links a.selected {
color: #000
}
#qk-links {
clear: both;
height: 20px;
}
#qk-links a, #qk-links a:visited, #qk-links a:active {
color: #cc9;
text-decoration: none;
font-size: 11px;
}
#qk-links a:hover {
color:#fff;
}
.reserve-link {
padding: 8px 0px;
margin: 0 auto;
}
.reserve-link a {
padding: 3px;
border: solid 1px #cc9;
display: block;
text-align: center;
background: #996;
color: #000;
text-decoration: none;
font-weight: bold;
}
.reserve-link a:hover{
border: solid 1px #fff;
background: #cc9;
color: #000;
}
/*NAVIGATION END*/

/*CONTAINER WITH ROUND CORNERS START*/
#container {
position: relative;
background: #663;
width: 800px;
margin: 0 auto;
border:none;
clear: both;
}
.corner{
position: absolute;
width: 13px;
height: 13px;
background: #996 url('../images/round-corner-container.gif') no-repeat;
font-size: 0%;
}
.container-inner {
padding: 10px;
}
/*CONTAINER WITH ROUND CORNERS END*/

/*CONTAINER H1 IS THE TAB TITLE TO THE "TEXT BOXES"*/
#container h1 {
position:relative;
font-size: 16px;
height: 25px;
float: left;
clear: both;
line-height: 2em;
padding: 0 13px;
background: #cc9;
color: #000;
}
.text-box {
position: relative;
background: #cc9;
margin: 0 auto;
border:none;
clear: both;
}
.corner2 {
position: absolute;
width: 13px;
height: 13px;
background: #663 url('../images/round-corner-text-box.gif') no-repeat;
font-size: 0%;
}
.container-inner2 {
padding: 13px;
}
.TL {
top: 0;
left: 0;
background-position: 0 0;
}
.TR {
top: 0;
right: 0;
background-position: -13px 0;
}
.BL {
bottom: 0;
left: 0;
background-position: 0 -13px;
}
.BR {
bottom: 0;
right: 0;
background-position: -13px -13px;
}
.container-inner2 iframe {
width: 752px;
height: 400px;
border: solid 1px #996;
margin: 0;
padding: 0;
overflow: auto;
}
.spacer-10pxh {
height: 10px;
font-size: 0%
}
/*CONTAINER WITH ROUND CORNERS "TEXT BOX" END*/

/*PAGE IMAGE, ADDRESS AND WEATHER INFO START*/
#page-main-image {
clear: right;
float: left;
width: 560px;
}
#page-main-image img {
border: solid 1px #cc9;
}
#page-main-image h1 {
color: #CC9;
background: #663;
padding: 0 0 8px;
font-size: 20px;
}
#ad-weather {
margin-left: 10px;
float: left;
display: block;
border-left: 1px solid #552;
padding-left: 10px;
}
.ad-weather-line {
font-size: 0%;
line-height: 0px;
border-top: solid 1px #552;
background: #552;
margin: 15px 0;
}
/*PAGE IMAGE, ADDRESS AND WEATHER INFO END*/

/*UNORDERED LIST*/
.text-box ul {
padding: 0 25px;
}
.feature-list {
float: left;
position: relative;
padding-right: 75px;
}
/*UNORDERED LIST*/

/*FOOTER CONTAINER START*/
#footer {
margin: 0 auto;
width:820px;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
}
/*FOOTER CONTAINER END*/

Segment in question on Original IE8 Conditional


.text-box {
zoom: 1;
/*height:1%*/
switch between either one
}

This occurs on more divs but I just posted one for an example.

swa66

8:26 pm on Dec 11, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



This started back in [webmasterworld.com...]
[long thread, loads of code]

In which I stated in relation to CSS_Kidd suggested using zoom:1 to get hasLayout in IE8 :


zoom:1: in IE8 mode this doesn't trigger their notorious "hasLayout" anymore.
IE8 still has the property and you can still set it (using e.g. height:1%), but zoom:1 doesn't trigger it anymore.
Note that in IE8 mode hasLayout is mostly a moot point, you need javascript to even see if it's set or not. The effect of it is far less dramatic.

And then obviously the thread started to diverge (I'll move those here)

CSS_Kidd

2:11 pm on Dec 11, 2009 (gmt 0)

10+ Year Member



System: The following 3 messages were spliced on to this thread from: http://www.webmasterworld.com/css/4040130.htm [webmasterworld.com] by swa66 - 8:28 pm on Dec. 11, 2009 <small>(utc 0)</small>

Swa,

Not questioning your knowledge (You do know a lot more than I), but are you sure about the IE8 and "hasLayout". I only asked because I have 3 sites (All XHTML Strict) that use rounded edges that are background images to small divs placed "absolute" in the four corners of some divs. When originally viewed in IE8 the background images for these corners where not positioning correctly until I applied the old "hasLayout" trick? So I am not to sure there?

Side note: I still use this over all because the client still caters to a large % of IE6 users. So it is one big conditional applied to IE in general, so to speak. But hey It works.

[edited by: swa66 at 8:34 pm (utc) on Dec. 11, 2009]
[edit reason] fixed system message [/edit]

swa66

3:29 pm on Dec 11, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



CSS_Kidd: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Test</title>
    <style type="text/css">
      div {
        /* does not trigger hasLayout in IE8 */
        zoom:1; /* IE only, will not validate */
        /* uncomment to trigger hasLayout in IE8 */
        /* height: 1% */
      }
    </style>
    <script type="text/javascript">
      window.onload = function () {
        var div = document.getElementsByTagName('div')[0];
        alert('hasLayout = '+ div.currentStyle.hasLayout);
      };
    </script>
  </head>
  <body>
    <div>
      Hello World!
    </div>
  </body>
</html>

Kudos to astupidname in [webmasterworld.com...] for the inspiration for the script part.

CSS_Kidd

4:11 pm on Dec 11, 2009 (gmt 0)

10+ Year Member



Hmm... This is weird... I am able to get it to work either way... I used one of my three sites I mentioned above and tested it using either or methods. Maybe I am missing something. Any ideas? Maybe I should start another topic with my code, so we can all rip it apart see why this is... Let me get that together, because we are totally going off the main subject of the original post here.

swa66

9:26 pm on Dec 11, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It's important to have IE8 in IE8 mode (so that you have an extra button to turn on the bugs of IE7, AKA "compatibility mode", and have it turned off.)

Positioning an absolutely positioned element inside an element that has position works in IE8 in general:

e.g.: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
  <title>Test</title>
  <style type="text/css">
   .outer {
    padding:13px;
    position: relative;
    background-color: green;
   }
   .tl, .bl, .br {
    position: absolute;
    height: 13px;
    width: 13px;
    background-color: red;
   }
   .tl {
    top: 0;
    left: 0;
   }
   .bl {
    bottom: 0;
    left: 0;
   }
   .br {
    bottom: 0;
    right: 0;
   }
  </style>
  </script>
 </head>
 <body>
  <div class="outer">
   Hello World!
   <div class="tl"></div>
   <div class="bl"></div>
   <div class="br"></div>
  </div>
 </body>
</html>

I don't think the IE property hasLayout works the same in IE8 than it did in prior versions (but I've ever dug in really deeply as mostly IE8 just works as expected -be it it's nearly completely CSS3 unaware-).

So that moves us to figuring out how to minimize the long code you posted above and what happens in IE8 with it.

I've tried it (not having your images makes it hard to see it all, but I don't see any difference at all between your version with or without zoom:1 applied to the .text-box.

Which makes me wonder if your site isn't listed in the blacklist MSFT keeps of sites that get IE7 mode forced onto them, and hence IE8 will continue to act up like IE7 does till you manage to get out of that list.

IE8 shows that list on this pseudo URL: res://iecompat.dll/iecompatdata.xml

Or if you managed to turn on the "display all sites in compatibility mode switch".

Brings us to establishing you do to have IE8 in that dreaded compatibility mode.

SuzyUK

11:23 am on Dec 15, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I actually think the hasLayout property is completely turned off in IE8, as in although it still shows under the hood, it serves no purpose any more - but I'm always interested in finding out if there are any exceptions!

So have you figured this out yet or is it just the IE8 mode as Swa refers to?

btw, Interesting find about zoom not working in IE8 (Standards Mode) any more Swa! The inline-block "tripswitch" does still work..

NOTE: this is nothing more than an interesting observation, I still haven't found an example of hasLayout actually causing or fixing any issues in IE8 (Standards)

If indeed the page is in IE8 Emulation mode then yes this might well be a different story! (could this be related? [webmasterworld.com] - is there anything before your Doctype?)

btw, is the image you're using a 26px circle?

I'll try to see if I can spot anything meantime..

CSS_Kidd

2:53 pm on Dec 15, 2009 (gmt 0)

10+ Year Member



SuzyUK To answer your questions:

I haven't really figured this out yet. I have tried all kinds of conditions.

I can NOT get it to work in Emulation mode, only standard.

I don't have anything above the Doctype. The code I provided is the actual full code, minus the real text and urls that are used for the site.

Yes the image used for the corner is a 26px circle.

This isn't really anything to lose sleep over. Because, really, all I have to do is not put those divs in that conditional css for IE8. It is just one of those weird things that only I seem to find like the .swf HS_text [webmasterworld.com]

SuzyUK

5:16 pm on Dec 15, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Not losing sleep don't worry.. I copied the code as it is in the OP, made a circle and found no 'odd spacing' issues in IE8 Standards mode. Even leaving the conditional intact for lte IE8

all I have to do is not put those divs in that conditional css for IE8

That's the 'solution' anyway isn't it?
i.e. - To only feed the hasLayout hack to IE7 and below. IE7 has hasLayout issues with the .text-box div requiring that you set hasLayout to true on the .text-box div, IE8 has no such issues so doesn't need to see that rule, leaving it intact for IE8 is not doing anything; the height:1%; has nothing to inherit from, and zoom: 1; is the default anyway.. the "hasLayout" properties of both those rules is neither here nor there as far as IE8 is concerned.

or I've misunderstood, I thought you said you were seeing the 'odd spacing' in IE8 as well?

CSS_Kidd

5:42 pm on Dec 15, 2009 (gmt 0)

10+ Year Member



I was seeing odd spacing... but when I posted this mock up page I some how eleminated it. I went back and compared it to my actual sites code and found out that on the actual site itself this spacing was created by an extra space in the following code:

<h1><span class="corner2 TL"></span>Topic Title<span class="corner2extra space here TR"></span>and here</h1>

This is where I would get the odd spacing between the H1 and the "text-box" divs along with the positioning of the background "circles being out of whack.

This of course was corrected when I posted the code here and at the time I really didn't think about it. So I can only assume that this was the issue.

Of course the hasLayout being obsolete in IE8 was unknown to me until I answered the thread ([webmasterworld.com ]) that this topic started on. I was actually in the middle of testing my sites for IE8 when Swa brought this to my attention.

SuzyUK

5:57 pm on Dec 15, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ah Ok Cool, glad it got sorted then :)

and that the hL issue was clarified too! Get those hasLayout hacks/workarounds into an lte IE7 conditional and hopefully it's the start of relegation time hehe..

cheers,Suzy

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 5:59 pm May 21, 2026