IE6 1px Padding Error

**Phaaze** · 05-20-2008, 01:30 AM

I'm coding a design (duh) and trying to figure out why there is a 1px padding appearing between my #header and #wrapper's 1px border on the right side in IE6.

I've only coded the header really and don't have it online right now so I'll post the code for you to view. (Images are not important in this..)

CSS

HTML Code:

@charset "utf-8";
/* CSS Document */

*                                        { margin: 0; padding: 0; }
html                                    { height: 100%; } 
body                                     { height: 100%; font-family: Verdana, Arial, Tahoma, Sans-Serif; font-size: 11px; color: #fff; margin: 0; padding: 0; background: #282828;  }
img                                     { border: none; }
.clear                                     { clear: both; }
#wrapper                                { width: 766px; height: 100%; margin: 0 auto; border: 1px solid #1C1C1C;  }
#header                                    { width: 766px; height: 108px; margin: 0; padding: 0; float: left; background: #191919; }
#header h1 a                            { width: 262px; height: 108px; background: url("img/logo.gif") no-repeat; display: block; float: left; }
#header .navigation                        { width: 494px; height: 20px; background: url("img/nav-bg.gif") repeat-x; padding: 3px 0 0 10px; color: #444444; float:left; }
#header .navigation li                    { float: left; list-style: none; margin: 0 3px 0 0; }
#header .navigation li a,
#header .navigation li a:visited,
#header .navigation li a:active            { color: #979797; text-decoration: none; }
#header .navigation li a:hover            { color: #444444; border-bottom: #979797 1px dashed; }
#header .adBox                            { width: 504px; padding: 0; margin: 0; height: 85px; background: #191919; text-align: center; float: left; }
#header .adCenter                        { width: 468px; margin: 5px auto; overflow: hidden; }

HTML

HTML Code:

<!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <h1><a href="#" title="#"></a></h1>
                <ul class="navigation">
                    <li><a href="#" title="#">link 1</a> | </li>
                    <li><a href="#" title="#">link 2</a></li>
                </ul>
                <div class="adBox">  
                    <div class="adCenter"> 
                        Place Ad Here
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
    </body>
</html>

Thanks for your time & support!

**LadynRed** · 05-20-2008, 09:59 AM

I'm afraid I'm not seeing any odd 1px spaces in IE6, it all looks perfectly snug to me.

**rezzy** · 05-20-2008, 10:46 AM

Quote:

Originally Posted by LadynRed

I'm afraid I'm not seeing any odd 1px spaces in IE6, it all looks perfectly snug to me.

could you show us a demo of it? can you host it anywhere?

**Phaaze** · 03:52 PM

I don't have a place to upload it right now but here is an image of whats happening...

If I make the dark area 1px larger it then drops below the left column...

**LadynRed** · 05-21-2008, 03:10 PM

It would be helpful to see ALL of your code if you've got it.

**Phaaze** · 05-22-2008, 01:48 AM

I posted all of it, all of which I've coded so far..