[SOLVED] Extra few pixels under nav?

[gevans]

Hey guys, A little stumpped here...

 

I've just changed my nav from text to background-images, it's a drop down nav (requires javascript) and after changing it to images a random space has turned up....

 

projects.purplecoffee.co.uk/aquitaine/

 

If you look at the above page you'll see a nav with 6 headings, the 4 middle ones have drop down lists. Between the nav and the drop downs there is a space (3px in FF, 5px in safari, 3px in IE8, no space in IE7). Don't bother with IE6 haven't looked there yet.

 

Bellow is the css for the nav, and bellow that the html for the nav;

 

/**
* NAV STYLES
*/
#links {
    margin-left: 37px;
}
#links dl {
    display: inline-block;
    border: 0px solid;
    list-style: none;
    float: left;
}
#links dl dt {
    display: inline;
}
#links #nav-home {
    background: url(../images/nav/home.png) no-repeat 0 0 #f9f9f9;
    width: 108px;
}
#links #nav-about-us {
    background: url(../images/nav/about-us.png) no-repeat 0 0 #f9f9f9;
    width: 71px;
}
#links #nav-our-services {
    background: url(../images/nav/our-services.png) no-repeat 0 0 #f9f9f9;
    width: 87px;
}
#links #nav-our-people {
    background: url(../images/nav/our-people.png) no-repeat 0 0 #f9f9f9;
    width: 81px;
}
#links #nav-information {
    background: url(../images/nav/information.png) no-repeat 0 0 #f9f9f9;
    width: 84px;
}
#links #nav-contact-us {
    background: url(../images/nav/contact-us.png) no-repeat 0 0 #f9f9f9;
    width: 80px;
}
#links dl dt a {
    color: #6e7f90;
    display: inline-block;
    height: 39px !important;
    overflow: hidden;
}
#links dl dt a.hover, #links dl dt a.live {
    background-position: 0 -39px !important;
}
#links dd {
    position: absolute;
    display: block;
    border: 0px solid #ff0000;
}
#links dd ul {
    list-style: none;
}
#links dd ul li {}
#links dd ul li a {
    border-bottom: 1px solid #a5b6ca;
    color: #fff;
    display: block;
    padding: 5px 11px;
    background-color: #155774;
    text-decoration: none;
}
#links dd ul li a:hover, #links dd ul li a.live {
    background-color: #3d80c2;
}

 

<div id="links" class="left">
    <dl>
        <dt rel="menu1"><a id="nav-home" class="live" href="" title=""><span class="access-hide">Aquitaine Home</span></a></dt>
    </dl>
    <dl>
        <dt rel="menu2"><a id="nav-about-us" class="m-default" href="#"><span class="access-hide">About Us</span></a><br />
            <dd id="menu2">
                <ul>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Aquitaine Group Limited</a></li>
                    <li><a href="#">Our Approach to Doing Business</a></li>
                    <li><a href="#">Why Guernsey?</a></li>
                    <li><a href="#">Why Aquitaine?</a></li>
                    <li><a href="#">Our Name</a></li>
                </ul>
            </dd>
        </dt>
    </dl>
    <dl>
        <dt rel="menu3"><a id="nav-our-services" class="m-default" href="#"><span class="access-hide">Our Services</span></a><br />
            <dd id="menu3">
                <ul>
                    <li><a href="#">Our Services</a></li>
                    <li><a href="#">Fiduciary Services for Private Clients</a></li>
                    <li><a href="#">Fiduciary Services for Corporate Clients</a></li>
                    <li><a href="#">Family Office Services</a></li>
                </ul>
            </dd>
        </dt>
    </dl>
    <dl>
        <dt rel="menu4"><a id="nav-our-people" class="m-default" href="#"><span class="access-hide">Our People</span></a><br />
            <dd id="menu4">
                <ul>
                    <li><a href="#">Our People</a></li>
                    <li><a href="#">Reputation & Culture</a></li>
                    <li><a href="#">Biographies</a></li>
                </ul>
            </dd>
        </dt>
    </dl>
    <dl>
        <dt rel="menu5"><a id="nav-information" class="m-default" href="#"><span class="access-hide">Information</span></a><br />
            <dd id="menu5">
                <ul>
                    <li><a href="#">Downloads</a></li>
                    <li><a href="#">Useful Links</a></li>
                </ul>
            </dd>
        </dt>
    </dl>
    <dl>
        <dt rel="menu6"><a id="nav-contact-us" href="" title=""><span class="access-hide">Contact Us</span></a></dt>
    </dl>
</div>

 

I can add a negative top margin to the top of the drop downs but that distors the jquery slide. I can add a negative margin to the bottom of the main part of the nav, but the size of the space changes from browser to browser.

 

Before changing to images it was working fine, and the layout as expected.

 

Hope you have a second to have a look, cheer, gareth.

[gevans]

I've got this sorted, if anyone wants to know how let me know.

[TheFilmGod]

I love your semantic code. It seems a little overkill though. I would just use headings and nice unordered lists. But I guess you can't go wrong with definition lists anyway. Out of curiosity - how did you manage to fix it?

[gevans]

I've actually changed the html a little bit to comply with xhtml strict, not there yet, may well have to re-build it anyway

 

I've pasted the new css bellow with comments next to the new lines...

 

/**
* NAV STYLES
*/
#links {
margin-left: 36px;
position: relative; /*ADDED TO ENSURE ABSOLUTE ELEMENTS ARE POSITIONED FROM HERE*/
}
#links dl {
display: inline-block;
border: 0px solid;
list-style: none;
float: left;
height: 39px;
}
#links dl dt {
display: inline;
}
#links #nav-home {
background: url(../images/nav/home.png) no-repeat 0 0 #f9f9f9;
width: 108px;
}
#links #nav-about-us {
background: url(../images/nav/about-us.png) no-repeat 0 0 #f9f9f9;
width: 71px;
}
#links #nav-our-services {
background: url(../images/nav/our-services.png) no-repeat 0 0 #f9f9f9;
width: 87px;
}
#links #nav-our-people {
background: url(../images/nav/our-people.png) no-repeat 0 0 #f9f9f9;
width: 81px;
}
#links #nav-information {
background: url(../images/nav/information.png) no-repeat 0 0 #f9f9f9;
width: 84px;
}
#links #nav-contact-us {
background: url(../images/nav/contact-us.png) no-repeat 0 0 #f9f9f9;
width: 80px;
}
#links dl dt a {
color: #6e7f90;
display: inline-block;
height: 39px !important;
}
#links dl dt a.hover, #links dl dt a.live {
background-position: 0 -39px !important;
}
#links dd {
position: absolute; /*ADDED TO POSITION FROM THE CONTAINING DIV*/
display: block;
top: 39px; /*ADDED TO MOVE THE ELEMENT TO THE CORRECT PLACE*/
border: 0px solid #ff0000;
overflow: hidden;
}
#links dd ul {
list-style: none;
}
#links dd ul li {}
#links dd ul li a {
border-bottom: 1px solid #a5b6ca;
color: #fff;
display: block;
padding: 5px 11px;
background-color: #155774;
text-decoration: none;
}
#links dd ul li a:hover, #links dd ul li a.live {
background-color: #3d80c2;
}

 

Basically three little changes to absolute position the drop downs rather then letting them position naturally.

[TheFilmGod]

Why absolute positioning? 

 

And I was soo impressed by your code earlier...

[gevans]

It's positioned over the rest of the page content. If it wasn't absolute positioned, everytime a drop down nav opened the whole page would push down, not very nice!