Bloomin annoying gap in IE

[minute44]

Hey guys... I probably just need some fresh eyes to look at this for me cos I can't see whats causing it...

Look at the navigation in FF and then look at it in IE.... there is a well annoying gap at the bottom in IE...

www.minutedesigns.com/cust

CSS as follows

Code: Select all

body {
    background-image: url(../images/bodybg.jpg);
    background-repeat: repeat-x;
    margin: 0px;
    padding: 0px;
}

#wrapper {
    background-image: url(../images/bg.gif);
    background-repeat: repeat-y;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    padding: 0px;
    width: 780px;
}

#header {
    background-image: url(../images/header.jpg);
    background-repeat: no-repeat;
    height: 224px;
    margin: 0px;
    padding: 0px;
    position: relative;
    width: 100%;
}

#logo {
    margin: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
    padding-right: 0px;
    padding-top: 0px;
}

#sidebar {
    margin: 0px;
}

#content {
    margin: 0px;
}

h1 {
    color: #ffffff;
    font-family: Tahoma, "Trebuchet MS", "MS Sans Serif";
    font-weight: 300;
    margin: 0px;
    padding: 0px;
}

#navcontainer {
    bottom: 26px;
    float: right;
    height: 50px;
    margin-bottom: 0px;
    margin-left: 26px;
    margin-right: 0;
    margin-top: 30px;
    padding: 0px;
    position: absolute;
    right: 0px;
}

#navcontainer ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

#navcontainer ul li {
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;
}

#navcontainer ul li a {
    background-color: #95be31;
    color: #ffffff;
    display: block;
    font-family: Tahoma, "Lucida Sans Unicode", verdana, sans-serif;
    font-size: 1.2em;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: 50px;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 2px;
    margin-top: 0;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 3px;
    text-align: center;
    text-decoration: none;
    width: 119px;
}

#navcontainer ul li #active {
    background-color: transparent;
    background-image: url(../images/greentab.jpg);
    color: #000000;
    text-decoration: none;
}

#navcontainer ul li a:hover {
    background-color: #c0c0c0;
    background-image: url(../images/tabover.jpg);
    background-repeat: repeat-x;
    color: #885907;
    text-decoration: none;
}

#navcontainer a:active {
    background-color: transparent;
    background-image: url(../images/greentab.jpg);
    color: #000000;
    text-decoration: none;
}

#navcontainer li#active a {
    background-color: transparent;
    background-image: url(../images/greentab.jpg);
    color: #000000;
}

Feel free to call me stupid if it's something reallt simple...

Cheers.

[moojoo]

remove margin-bottom: 10px; from the ul li a

[minute44]

Cheers!

[Ryan Fait]

Even though this is now solved, does anyone know why white-space: nowrap; doesn't work in Safari on some things (namely lists)? It's so annoying too! The only solution I've found is to remove all tabs, and carriage returns from the source. However, I'm such stickler with structure I hate doing that.