So as everyone knows...IE6 has the lovely 3px margin issue. The company I am now working with requires that no hacks be used and the websites must be compatible with IE6, IE7 & FF3...One of the lead designers tells me there is a way to do it, but won't show me what he means. How does one fix the 3px margin issue in IE6 without hacks? I've ran searches (here & Google) and the only solutions that come up are hacks...Am I missing something?

In the attached screenshot you can see the bug is above the navigation on the left (3px of white space).

<!-- Begin Header DIV -->
<div id="header">

    <div id="headerfloat">

    <address>
        1219 East Avenue<br />
        Suite 107<br />
        Sarasota, Florida 34239<br />
        942-365-4040<br />
        M-F 9:30am - 5:30pm
    </address>
    
    <img src="http://www.webmaster-talk.com/images/flash.gif" width="464" height="366" />
    
    </div>

<!-- Begin Nav DIV -->
<div id="nav">

    <img src="http://www.webmaster-talk.com/images/logo.gif" width="436" height="226" alt="eye art inc" />
    
<ul id="mainnav"> 
      <li><a href="index.html" class="current">Welcome</a></li>
        <li><a href="about-eye-art.html">About Eye Art Inc</a></li>
        <li><a href="display-case-eyewear.html">Display Case</a></li>
        <li><a href="product-information-lenses.html">Product Information</a></li>
        <li><a href="location-sarasota-florida.html" >Location</a></li>
    </ul>
<!-- End Nav DIV -->
</div>

<!-- End Header DIV -->
</div>

address {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    background-image: url(images/address.gif);
    background-repeat: repeat-x;
    text-align: right;
    color: #ffffff;
    font-size: 16px;
    line-height: 19px;
    padding: 15px;
}

div#header {
}

div#headerfloat {
    width: 464px;
    float: right;
}

/* ----------------------------  NAVIGATION (VERTICAL) ----------------------------  */

div#nav{
    width: 436px;
    float: left;
}

ul#mainnav {
    float: left;
    width: 100%;
    margin: 0px;
    padding: 10px 0px 10px 0px;
    list-style-type: none;
    background-image: url(images/nav.gif);
}

ul#mainnav li {
    display: inline;
    float: left;
    margin: 0px auto;
    padding: 0px;
}

ul#mainnav li a:link, ul#mainnav li a:visited, ul#mainnav li a:active {
    color: #a15070;
    font-size: 18px;
    text-decoration: none;
    display: block;
    width: 376px;
    padding: 13px;
    margin: 0px 15px;
    border-bottom: 1px dotted #a15070;
}

ul#mainnav li a:hover {
    background-image: url(images/nav-down.gif);
    background-repeat: no-repeat;
}

.current {
    background-image: url(images/nav-down.gif);
    background-repeat: no-repeat;
}

By "no hacks", the designer probably just means not to do anything inline in the CSS document, and put the fixes in a separate CSS document, while pointing at it with a Conditional Comment in the HTML.

No, I got yelled at for that. Everything must be contained in one CSS document and I am not allowed to have any hacks per the lead. Which means no * html in the css for IE6 specific problems either.

No, I got yelled at for that.

That is ridiculous, since conditional comments and a separate IE-only css file is the industry accepted way to handle IE's problems. You almost cannot address ALL of the problems in IE6 and 7 without them! Sounds to me like someone is out of touch

IE doesn't have a 3px margin issue, it DOES have a 3px text jog issue, but that is not the problem.

I'd really like to see a URL or ALL of the code. Trying to decipher this w/o the images and the rest of the code is a crap shoot.

LNR, I'm going to PM you the code. Because of who I now work for, I really can't publicly disclose the code.

This is what happens when designers become bosses over code also. A well functioning workplace needs a more modular approach to the workflow. This doesn't mean there are not good designers that are good at code also, but it doesn't seem the norm.

</rant>

What exactly does your rant have to do with the requirement that absolutely no hacks are permitted in any sense? Are you referring to me or the company? I'm confused. For what it's worth...I took a look at their "porfolio" and last year they were still programming in tables!

If I would avoid floats I really wouldn't need to worry about hacks...But I am as much a designer as I am a coder and that means I try to design functionally but visually appealing and creative websites which will always be a downfall when it comes to IE6!

Not referring to you, just think your new boss is a bit of a control freak in a way that is too ridged to be practical.

I know. This morning I got told "It’s important that your sites work without hacks. Again, I would rather you figure this out for yourself first before I step in. Try adjusting your divs (hint: widths and heights)" After I got all but one minor margin hack out. He wouldn't even look at the reworked code. I'm getting really frustrated as I have 3 sites sitting here that all have the same problem that I can't find the solution for!