IE7 Bugs: No overflow to your body
posted on Tuesday, 06 February, 2007 at 9:26 amToday, I've been developing a small elayer script for unnamed company. While testing it, I've found a nice bug in IE7 that can pretty mess up your life…
No overflow to your body. Yes! Thats right. A single script could mess my time around. But let's get to the point.
In most of my script where I use to display an e-layer, I usually set html
body to width:100% and overflow:hidden. But today
I noticed everything worked fine except IE7. To test it I minimized HTML
document and code below is my output:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>IE7 Bug test</title>
<style type="text/css">
body{
overflow: hidden;
}
div{
width: 4000px;
height: 4000px;
background:red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>IE7 will not apply overflow:hidden to body when the xml
declaration and doctype is stated! It seems guys in Micro-soft messed up with Trident parser a
little bit more than expected.
The easiest way (and only one I found today) how to correct it was to set
same definition to html element. So while using previous
contruction will not affect the gorgeous scrollbars while you don't need them
using one below will.
html{
overflow: hidden
}How simple ;) So remember try to define html and
body together while in css, and setting
document.documentElement or
document.getElementsByTagName("html")[0] while in javascript to
hide scrollbars in your pages…
Good luck folks!
Thank you, thank you, thank you! I’ve wasted so much time trying to find the issue here and this has exactly fixed it! I can’t thank you enough. Great job.
[1] with pleasure d. I’m glad it helped u.
Wow thanks you just saved me!!! I don’t even wan’t to think how long it would have taken me to figure this one out :)
In my case it didn’t work in IE6 either :/ using:
document.body.style.overflow
You pull my trigger then you blame my gun, and nothing pulls triggers more than IE!
Greets & Thanks,
maxwell
You are a great CSS master, thank you so much !
Thank you so much for posting this. Been wasting my time finding out what was wrong! IE7 again…(sigh)
thanks man. this post save my sanity!
Hey there…
Thanks a lot for taking the time to document this!
I’ve spent the last 1/2 hour trying to find out why IE7 has yet more problems…
Thanks, this really helped me out!
YOU
ARE
A
GOD!!!!!
Thank you!
Gregor,
I added your bug to my webpage. See bug #108:
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug108
and
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/BodyOverflowHidden-1.html
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/BodyOverflowHidden-2.html
Best regards, Gérard
Gracias :)
Thanks a Lot…..Every where they have given that it will not work in IE so i was not able user that.After seeing urs i was soooooooooooo happy and it works very fine in all the browsers. Thanks a lot. :):)
Thanks a lot.
Here, in Brasil, I didn´t find no one site to help me about this.
You´re great.
Thanks a lot.
thanks man, you saved my ass!
U sir, are this mondays hero!
hey thanks a lot…it really help me out.
Hey!
I'd like to note that Microsoft didn't really mess anything up here – as far as I know the spec doesn't mention what the default
overflowvalue should be for the root element, which is what this issue is about.The in your case would not hide any overflow because there is no height/width set on it. The reason sane browsers hide it is because in them element's
overflowis set tovisibleand thus, as per spec's section 11.1.1, theoverflowvalue from is transfered onto the viewport. IE simply has a different default on .If you want to read up in more detail, see my tut on the subject: http://haslayout.net/css/view?…
Cheers!
Ugh, you should have a note that <foo> would be stripped off the comments completely :/
Here's what I meant to say:
Hey!
I'd like to note that Microsoft didn't really mess anything up here – as far as I know the spec doesn't mention what the default
overflowvalue should be for the root element, which is what this issue is about.The <body> in your case would not hide any overflow because there is no height/width set on it. The reason sane browsers hide it is because in them <html> element's
overflowis set tovisibleand thus, as per spec's section 11.1.1, theoverflowvalue from <body> is transfered onto the viewport. IE simply has a different default on <html>.If you want to read up in more detail, see my tut on the subject: http://haslayout.net/css/view?…
Cheers!
You're awesome and you deserve a truckload of internets.
This option work in IE7
#wrapper {
overflow: hidden;
}
and make an exception for IE7 in code of page:
<!--[if IE 7]>-->
#c1, #c2 {padding-bottom: 1000em; margin-bottom: –999.5em; height: 100%!important;}
c1 and c2 are column div-s
I lost 5 hours on this
@%#!!!??? Microsoft and bugs
Thank you very much for your fix. Just saved my day :)