can´t get links to go horizontally

Hi!

I´m testin those imagebased links that i´ve questioned earlier. I´m not able to get those links to go horizontally. I don´t know why. I thought maybe u could help me. here´s a link to a sample.

http://koti.mbnet.fi/thinner/testi/

here´s the css

body {background: #fff;}
.navi {	
	
	background: #000;
	margin: 0 auto;
	width: 500px;
	height: 25px;
}

/*Links*/

a.link1 {
	display: block;
	background: url(moo/link1.gif) no-repeat;
	
}
	a.link1:hover {
		background: url(mov/link1o.gif) no-repeat;
		
}	
a.link2 {
	display: block;
	background: url(moo/link2.gif) no-repeat;
	
	
}
a.link2:hover {
		background: url(mov/link2o.gif) no-repeat;
		
		
}	
a.link3 {
	display: block;
	background: url(moo/link3.gif) no-repeat;
}
a.link3:hover {
	background: url(mov/link3o.gif) no-repeat;
		
}	

Code (markup):

and if u look closely the pics u can see blue line in each one the links. Do u think i did something wrong in slicing?

i would be glad if could help me!

thanks in advance!

HDaddy

 

that didn´t work..any other ideas?

 

Uhm... why don't you use a simple html table?

 

I think use Unordered Lists <ul> can solve this problem and set CSS style Use display: inline; and list-style-type: none; to make a basic horizontal list.

See this example:

HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

Code (markup):