I am having issues with the little bit of white space between the image and the menu. The only way i can get rid of it is by using negative margins. However since I'm using a Strict DTD that is required, negative margins are not an option. Can someone please tell me what I am doing wrong? This whole thing started with an incompatibility issue with `IE8` and that is why I had to change the `doctype` to `strict`. Thanks!

```
<table bgcolor="#ffffff" cellpadding="0" cellspacing="0" margin="0">
    <tr>
        <td>
            <TABLE width="742" border="0" cellpadding="0" cellspacing="0" margin="0">
                <TR>
                    <TD width="742">
                        <img src="http://www.eromadayspa.com/images/header_mainimage_xmas2.jpg" />
                    </TD>
                </TR>
            </TABLE>
            <div id="container">
                <ul id="nav">
                    <li><a href="">Link</a>

                    </li>
                    <li><a href="">Link</a>

                        <ul>
                            <li><a href="">Link</a>

                            </li>
                            <li><a href="">Link</a>

                            </li>
                            <li><a href="">Link</a>

                            </li>
                            <li><a href="">Link</a>

                            </li>
                            <li><a href="">Link</a>

                            </li>
                        </ul>
                    </li>
                    <li><a href="">Link</a>

                        <ul>
                            <li><a href="">Link</a>

                            </li>
                            <li><a href="">Link</a>

                            </li>
                            <li><a href="">Link</a>

                            </li>
                            <li><a href="">Link</a>

                            </li>
                        </ul>
                    </li>
                    <li><a href="">Link</a>

                    </li>
                    <li><a href="">Link</a>

                    </li>
                </ul>
            </div>
            <br />
            <br />
            <br />
        </td>
    </tr>
</table>

```

The CSS is:

```
#container {
    width: 742px;
    margin:0;
    padding: 0;
    font: 100% Helvetica, Arial sans-serif;
    font-size:12px;
    font-style:italic;
    font-weight:bold;
}
ul#nav {
    line-height: 25px;
    padding: 0;
    margin:0;
}
ul#nav li {
    float: left;
    position: relative;
    list-style: none;
    background: #006666;
}
ul#nav li a {
    width: 146.4px;
    display: block;
    border: 1px solid #000;
    text-align: center;
    text-decoration:none;
    color: #fff;
    height:25px;
}
ul#nav li:hover {
    background: #990000;
}
ul#nav ul {
    position: absolute;
    padding: 0;
    left: 0;
    top: 100%;
    width:100%;
    visibility: hidden;
}
ul#nav li:hover ul {
    visibility: visible;
}
ul#nav a:hover {
    color: yellow;
}
ul#nav ul li {
    float:none;
    width:100%;
}
ul#nav ul li a {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    /* Firefox */
    text-align:left;
    padding-left:8px;
    height:26px;
    display:block;
}
header, nav, section, article, aside, footer, hgroup {
    display: block;
}

```

<http://jsfiddle.net/jz4hM/5/>