Hi, I have a very very strange problem lol...

 

I am adding a navbar into my website, but seeing as I am not used to do this via css I get a weird problem which is instead of my entire button showing up, I get a strip of it.

I attached it into the post..here is my code.

 

	<ul id="navlist">
  <li><a id="n1" href="index.htm">Home</a></li>
  <li><a id="n2" href="">News</a></li>
  <li><a id="n3" href="">Events</a></li>
  <li><a id="n4" href="">Reviews</a></li>
  <li><a id="n5" href="">Forum</a></li>
  <li><a id="n6" href="">Contact Us</a></li>
  <li><a id="n7" href="">Links</a></li>
</ul>

 

#navlist{
margin-left: 0px;
padding-left: 0px;
white-space: nowrap;
position: absolute;
height: 27px;
width: 777px;
top: 225px;
}
#navlist li{
display: inline;
list-style-type: none;
}
#navlist a {
padding: 3px 10px;
background-image: url(images/button.jpg);
height: 20px;
width: 91px;
display: inline;
position: absolute;
text-align: center;
color: #fff;
text-decoration: none;
}
#navlist a:hover{background-image: url(images/buttonover.jpg);}
#n1{left: 0px;}
#n2{left: 111px;}
#n3{left: 222px;}
#n4{left: 333px;}
#n5{left: 444px;}
#n6{left: 555px;}
#n7{left: 666px;}

 

I used an old template for help with it, but I still can't get it right..

 

Thanks

anyyone?

Have you tried changeing the line-height ? I had a similar problem and I had the line-height to high for the div my links were in.

 

have you got a screen shot?

Screenshot is attached to my first post.

Any ideas?

Try removing position:absolute;