Forum Moderators: open
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:
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
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.
There are no guarantees in browser display... though we have a majority of display. Can't serve every user. Just serve the majority!
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.
@tangor
Yes, the content does serve. It's not a huge problem, but an annoying one.
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.
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.
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
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?
<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>
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...".
thanks
Suzy
