CSS Navigation Menu Not Positioning Correctly

Question

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.

for the legacy, please post your relevant code here as well, it will outlive your website, so future users can learn something from this question. — Caspar Kleijne
– Caspar Kleijne, Commented Jun 20, 2011 at 17:48

Caspar Kleijne · Accepted Answer · 2011-06-20 17:46:06Z

1

add a reset to the padding of the navigation class:

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

answered Jun 20, 2011 at 17:46

Caspar Kleijne

21.9k13 gold badges74 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

thirtydot Over a year ago

@Victor J: It's simply because you've put the wrong width value. The width of #donate should be 126px, not 116px.

Victor J Over a year ago

@thirtydot: Correct, I realised while adding the code above and corrected it. Thanks very much for your time though, I really appreciate this forum!

Seth · Accepted Answer · 2011-06-20 17:46:02Z

0

Your <ul> needs to be reset.

#navigation { padding:0; }

answered Jun 20, 2011 at 17:46

Seth

6,2353 gold badges30 silver badges44 bronze badges

Collectives™ on Stack Overflow

CSS Navigation Menu Not Positioning Correctly

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related