0

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/

Deryck
  • 7,608
  • 2
  • 24
  • 43
user3140351
  • 5
  • 2
  • 1
    The use of tables for layout is usually frowned upon and can cause design issues. It's generally accepted for tables to be used for data, not for design and layout. In this instance, it appears you are using tables for the latter, which is not recommended. Try using another method, such as floating divs. – Josh Beam Dec 28 '13 at 06:32
  • Sorry i had the wrong JSFIddle link. Can you please look at the new link and let me know if there is anything else i can do. Sorry for the confusion. – user3140351 Dec 28 '13 at 06:34
  • Lack of experience with CSS is probably the biggest deterrent...i use a table because i have columns that are displayed down the page and it would take a lot of retweaking for all of the pieces to fit in and look right. Is there anyway to remove that little bit of space without switching to a completed CSS layout. – user3140351 Dec 28 '13 at 06:41
  • Check out [this answer to a previous question](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html), as well. Talks about tables, design practices, etc. – Josh Beam Dec 28 '13 at 06:56
  • I checked it out but am still not sure what kind of tweakes i need to make. Overall i agree with you that CSS is probably the way to go but at this point in time i'm just trying to get this up and running for my cousin. It was totally functional until i tested it with IE11 and realized that the javascript menu i was using was totally broke (Milonic). Rather than upgrading the menu i decided to look for a CSS option which i found but now im running into some browser compatibility issues. – user3140351 Dec 28 '13 at 07:05
  • Thanks Josh and Ajay. I used Ajay's solution and it worked perfectly on my site. – user3140351 Dec 28 '13 at 07:55

2 Answers2

0

Add This css in your code, and then you can get your desired result

 img {
   border-spacing: 0;
height: 100%;
display: block;
}

result on fiddle http://jsfiddle.net/H4eNH/1/

Ajay Nigam
  • 36
  • 7
0

This:

img {
    vertical-align: bottom;
}

This is a CSS1 property, should work in all major browsers.

Josh Beam
  • 19,292
  • 3
  • 45
  • 68