homepage Welcome to WebmasterWorld Guest from 54.234.147.84
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
IE8 100% height failing when resizing height of window
resizing using the bottom and the corner handles
swa66




msg:4025102
 1:10 am on Nov 15, 2009 (gmt 0)

We've discovered accidentally a difference in how my IE8 acts from how other's IE8 instances act.
It was done in the discussion of a CSS tutorial: [webmasterworld.com...]

Mine:
parallels virtual machine on my mac, legal XP SP3, IE8, fully up to date on patches.

GryphonLeon:
2 machines running Vista and IE8

How to reproduce the difference:

  • load a page that uses min-height:100%
  • make sure IE7 mode is OFF
  • make sure you only use about half your screen with the browser window
  • REFRESH (important: doesn't trigger if you don't)
  • make the window larger

Mine: the content gets updated and stretches as the browser grows

GryphonLeon's machines: the content does not update and stays small.

Other browsers (e.g. IE7 act like mine)

What I'm interested in is to find out when IE8 acts one way or the other way, as for testing knowing what causes differences might be a good thing to adapt your test cases to ...

Sample code from the post where we discovered the difference:

<!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">
* {
padding: 0;
margin: 0;
}
html {
background-color: #ccc;
height: 100%;
}
body {
background-color: white;
width: 770px;
margin: 0 auto;
min-height: 100%;
position: relative;
border-left: 1px solid #888;
border-right: 2px solid black;
}
.footer {
position: absolute;
bottom: 0;
left:0;
right:0;
border-bottom: 2px solid black;
}
a img {
border:none;
}
.header {
position: relative;
min-height: 110px;
border-top: 1px solid #666;
}
.header a img {
width: 150px;
height: 100px;
position: absolute;
top: 5px;
left: 5px;
}
.header h1 {
padding: 20px 0 0 160px;
}
.middle {
padding: 0 5px 2em 5px;
}
.footer p {
padding: 5px;
font-size: 80%;
}
</style>
<!--[if IE 6]>
<style type="text/css">
body {
height: 100%;
}
.header {
height: 110px;
}
.footer {
width: 100%;
}
</style>
<![endif]-->
</head>
<body>
<div class="header">
<a href="#"><img src="1.jpg" alt="logo" /></a>
<h1>title</h1>
</div>
<div class="middle">
<h2>heading</h2>
<p>Lorem ipsum ...</p>
<p>Add more content to make sure you can scroll as you need.</p>
</div>
<div class="footer">
<p>Footer text goes here</p>
</div>
</body>
</html>

If you could test it and post some details on what you see and what you havre as setup ...

e.g. mine:
Hardware: emulated with Parallels 3.0
OS: XP SP3 fully up to date on patches
Browser: IE8 in IE8 mode
File: served from a test web server
Behavior: stretches like other browsers, might be a slight delay till it pops in place (not smooth)

TIA

 

encyclo




msg:4025106
 1:21 am on Nov 15, 2009 (gmt 0)

I tried your test page on standard hardware (no emulation), quad-core with high-end graphics card. OS is Vista 64-bit with IE8 (tried 32-bit and 64-bit versions), file served via Apache installed on localhost.

For me, the content gets updated and stretches as the browser grows (same effect as in Firefox 3.5.5) - moves smoothly on resizing, no perceptible delay. I cannot reproduce the bug as described.

tangor




msg:4025160
 5:32 am on Nov 15, 2009 (gmt 0)

Got to ask the real question: did the content serve?

There are no guarantees in browser display... though we have a majority of display. Can't serve every user. Just serve the majority!

tedster




msg:4025172
 6:32 am on Nov 15, 2009 (gmt 0)

If anyone can pin this down it would quite interesting. It's been a long time since I heard of a different OS making a difference for the same browser version - but it certainly used to happen.

I can tell you that running Vista on Parallels or Fusion can create issues for some Windows apps. One of my clients creates big ticket software, but they had to withdraw support for Vista on any kind of Mac VM.

Running on a Mac virtual machine, their software runs great for all flavors of XP and even Windows 7. But with Vista it can be a mess, and their support team often can't pin down the problems for the end user. Some users don't see the bugs, and others do - with apparently identical set-ups.

GryphonLeon




msg:4025208
 11:01 am on Nov 15, 2009 (gmt 0)

Just a small addition:
I drag the bottom of IE8 down and the gap appears because the footer doesn't stick to the bottom of the browser window. Then, when I adjust the width of the viewport, the footer jumps down to the correct position.

@tangor

Yes, the content does serve. It's not a huge problem, but an annoying one.

robzilla




msg:4025211
 11:23 am on Nov 15, 2009 (gmt 0)

Content does not stretch when I enlarge the window only vertically; it does stretch when I enlarge it both vertically and horizontally (though I, too, see a slight delay here). The file is opened locally on the hard drive of a computer with Windows XP SP3 with all the latest updates. Exact version of IE8 is 8.0.6001.18702, running in standard IE8 mode.

swa66




msg:4025214
 11:34 am on Nov 15, 2009 (gmt 0)

@robzilla: you might well have found it, it seems. Thanks!

I can reproduce it if I enlarge the window using the bottom border (being a mac user I long forgot that windows has a handle there).

So I guess it's just another IE8 bug, not one that differs from what OS is underneath.

encyclo




msg:4025221
 12:27 pm on Nov 15, 2009 (gmt 0)

I confirm that I see the bug when dragging down the bottom edge of the browser window (not the corner) in Vista.

astupidname




msg:4026153
 11:26 pm on Nov 16, 2009 (gmt 0)

Anybody following this post, see original post page 2 [webmasterworld.com] for the fix.

swa66




msg:4026191
 1:05 am on Nov 17, 2009 (gmt 0)

Paging depend on individual settings, but a relatively elegant solution was found in the CSS thread: [webmasterworld.com...]

For those looking to find it quickly: Turns out IE8 still has the "hasLayout" property and triggering it on the "middle" class in the example does work around this rather weird bug in IE8.

SuzyUK




msg:4031276
 2:10 am on Nov 25, 2009 (gmt 0)

I just found this (playing catchup with my reading), and you scared the life out of me.. no not hasLayout in IE8! - btw that's a great tutorial thread you wrote, sorry I missed it before.

I can confirm seeing the same bug - but it's not hasLayout thankfully phew! (yes I see that hasLayout is still being triggered with the script) but setting hasLayout = "true" by any other method except height doesn't fix the situation, so I would say the fix is not related to the hasLayout trigger.

perhaps related to this vertical resize [connect.microsoft.com] bug?

Instead just a happy coincidence that the non-inheriting height also fixes it!

[added] after reading a bit more about that vertical resize bug on the iframes, I added height 100% to the body, before subsequently overriding it with the min-height, in the same ruleset will do, and that also fixed it too - that's with hasLayout = "false" on the middle div - just to confirm it's not hasLayout .. can you hear the sigh of relief

astupidname




msg:4031363
 8:07 am on Nov 25, 2009 (gmt 0)

@SuzyUK :adding height:100%; to the body wrecks the layout when you fill it up with a pile of Lorem ipsum's to extend below the fold, might want to stick with the height on .middle

astupidname




msg:4031389
 9:45 am on Nov 25, 2009 (gmt 0)

but it's not hasLayout thankfully phew! (yes I see that hasLayout is still being triggered with the script) but setting hasLayout = "true" by any other method except height doesn't fix the situation, so I would say the fix is not related to the hasLayout trigger.

perhaps related to this vertical resize bug?


Yeah, that is interesting, I had not attempted triggering hasLayout by other means at the time, but I experimented also and found what you say to be true. And yes, it does look like a re-size bug in the window it's self. My curiosity prodded me on a bit, and I added a window.onresize function to test. I found that having a direct interaction between the window and an on-page element during the re-sizing event on the window does cure it (without the height rule on .middle applied, even).
This is certainly NOT intended by me as a fix (never javascript fix for css!), just a demonstration, but if you remove the height rule for .middle and add this javascript you will see that it fixes it also, even though hasLayout is false for .middle without the height fix applied, as you say -confirming that it is not truly a hasLayout bug but rather an unexplainable-by-me window bug of sorts:
<script type="text/javascript">
window.onresize = function () {
var body = document.getElementsByTagName('body')[0];
//add a string with no length at all onto the body's innerHTML (does not actually alter or add anything):
body.innerHTML += ''; //having an interaction between the window and an on-page element seems to put the 'broken wire' back together
};
</script>

It's like I say there, there is a broken wire or something, but telling the window to do something with an on-page element when the window resizes 'wakes it up' so to speak. It's like "oh yeah, I got work to do, that's right...".
I re-iterate: the javascript is NOT a fix suggestion, just a demo, stick with the height fix for .middle.

SuzyUK




msg:4031410
 10:14 am on Nov 25, 2009 (gmt 0)

@astupidname, yes thanks my bad, I had my bug tracking head on, which is thankfully a little rusty, it was a good spot that it was even an issue btw.. as you say the CSS fix is more advisable on .middle in this template, where that % height can't inherit from anything

I'm afraid I'm one of them that will still always use a wrapper div as it gives that extra CSS Hook for backgrounds. etc. and is also useful for fixing many other IE Legacy differences, so if I personally did come across this I would actually probably use the wrapper solution shown by GryphonLeon

in this case I was just trying to figure out if that hasLayout problem was back, thankfully I think that's a no :)

added, just saw your new post.. Thanks for that, it is also unexplainable by me, but definitely a resize event thingy (JS is not my strong point so thanks for the test script!), and I too would never use JS to fix IE's CSS, when a CSS fix will do, good advice!

It's like "oh yeah, I got work to do, that's right...".

Not like IE then ;)

thanks
Suzy

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved