Today, 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:
1: <?xml version="1.0" encoding="utf-8" ?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3: <html>
4: <head>
5: <title>IE7 Bug test</title>
6: <style type="text/css">
7: body{
8: overflow: hidden;
9: }
10:
11: div{
12: width: 4000px;
13: height: 4000px;
14: background:red;
15: }
16: </style>
17: </head>
18: <body>
19: <div></div>
20: </body>
21: </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.
1: html{
2: overflow: hidden
3: }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!
1.
D Carter
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.