Bloomin annoying gap in IE

minute44 · #1 Oct 17th, 2006, 14:05

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 · #2 Oct 17th, 2006, 14:16

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

minute44 · #3 Oct 17th, 2006, 14:20

Cheers!

Ryan Fait · #4 Oct 18th, 2006, 05:15

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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Isn't it SOOOOO annoying when...	VanessaJW	Webforumz Cafe	27	May 22nd, 2007 00:18
Notepad Is annoying me	Accurax	Webforumz Cafe	21	Mar 12th, 2007 12:18
Simple but so annoying	Sean J	Web Page Design	11	Mar 11th, 2007 00:34
This ImageMap is annoying me!	Dapandyman	JavaScript Forum	2	Nov 14th, 2006 20:02
very annoying DATES	benbacardi	Classic ASP	15	May 26th, 2005 12:51

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Bloomin annoying gap in IE