views:

48

answers:

1

I'm having a very weird issue in IE6. If I set a div container do the width of 987px it adds a spacing between the container and an absolute positioned element inside. Any other width works fine, it's just 987. Is there something I'm not seeing?

Code to reproduce:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>IE6 Issue</title>
    <style type="text/css">
        body { background-color: #000; }
        #c1 { width: 987px; background-color: #fff; }
        #c2 { border: #f00 1px solid; zoom: 1; position: relative; }
        #tl, #tr { background-color: #000; font-size: 0; line-height: 0; position: absolute; top: 0px; left: 0px; width: 4px; height: 6px; }
        #tr { left: auto; right: 0; }
    </style>
</head>
<body>
    <div id="c1"><div id="c2"><div id="tl"></div><div id="tr"></div>a</div>
</div>
</body>

This is crazy.

+3  A: 

Sounds like the infamous IE6 Box Model Bug

Also http://stackoverflow.com/questions/755689/3-pixels-extra-space-in-ie6

Dead account
Thanks for the info.
William