CODEWITHSUNDEEP
htmlcssnavigationpositioning
Victor J
Victor J

Reputation: 23

CSS Navigation Menu Not Positioning Correctly

I have a strange issue with my css navigation menu. The code is here:

<style>
.navigation { width: 1010px; }
.navigation li { float: left; display: inline;}

.navigation li a { display: block; height: 60px; text-indent: -9999px; background:     #EFE8C9 url(../images/bg/primary_navigation.gif) no-repeat 0 0;}
#link1 { width: 96px; background-position: 0 0; }
#link1:hover { background-position: 0 -60px; }
#link2 { width: 166px; background-position: -96px 0; }
#link2:hover { background-position: -96px -60px; }
#link3{ width: 138px; background-position: -262px 0; }
#link3:hover { background-position: -262px -60px; }
#link4 { width: 166px; background-position: -400px 0; }
#link4:hover { background-position: -400px -60px; }
#link5{ width: 134px; background-position: -566px 0; }
#link5:hover { background-position: -566px -60px; }
#link6 { width: 76px; background-position: -700px 0; }
#link6:hover { background-position: -700px -60px; }
#link7 { width: 108px; background-position: -776px 0; }
#link7:hover { background-position: -776px -60px; }
#link8 { width: 126px; background-position: -884px 0; }
#link8:hover { background-position: -884px -60px; }
</style>
<html>
<div id="primary_navigation">
<ul class="navigation">
    <li><a href="#" id="link1">Link 1</a></li>
    <li><a href="#" id="link2">Link 2</a></li>
    <li><a href="#" id="link3">Link 3</a></li>
    <li><a href="#" id="link4">Link 4</a></li>
    <li><a href="#" id="link5">Link 5</a></li>
    <li><a href="#" id="link6">Link 6</a></li>
    <li><a href="#" id="link7">Link 7</a></li>
    <li><a href="#" id="link8">Link 8</a></li>
</ul>
</div>
</html>

As you will see the menu position is off by around 40 pixels and I can't figure out why. I have built plenty of these menus and never had this problem!

I've tried using a couple of versions that work fine and adapting them to this menu but as soon as I test it the same issue occurs.

I've also tried searching the forum for similar issues but have had no success.

Any help is greatly appreciated.

Thanks for your time.

Upvotes: 2

Views: 594

Answers (2)

Caspar Kleijne
Caspar Kleijne

Reputation: 21864

add a reset to the padding of the navigation class:

ul.navigation {
    padding: 0;
    ..... rest of the css
}

Upvotes: 1

Seth
Seth

Reputation: 6260

Your <ul> needs to be reset.

#navigation { padding:0; }

Upvotes: 0

Related Questions