Kirupa CSS Rollover Tutorial Problems

[Dan Rider]

Hi, I followed the tutorial instructions perfectly and it works fine but it displays them vertically instead of horozontally. I tried a fix posted in another thread but proved ineffective.

CSS:


#homeover{

height: 30px;
width: 96px;
text-indent: 10000px;
overflow: hidden;
background: url(layout/nav/home.png) top left no-repeat;
display: block;
float: left;

}

#homeover:hover{

background-position: bottom left;

}
#forumover{

height: 30px;
width: 104px;
text-indent: 10000px;
overflow: hidden;
background: url(layout/nav/forum.png) top left no-repeat;
display: block;
float: left;

}

#forumover:hover{

background-position: bottom left;

}
#newsover{

height: 30px;
width: 163px;
text-indent: 10000px;
overflow: hidden;
background: url(layout/nav/news.png) top left no-repeat;
display: block;
float: left;

}

#newsover:hover{

background-position: bottom left;

}
#atlantisover{

height: 30px;
width: 196px;
text-indent: 10000px;
overflow: hidden;
background: url(layout/nav/atlantis.png) top left no-repeat;
display: block;
float: left;

}

#atlantisover:hover{

background-position: bottom left;

}
#sg1over{

height: 30px;
width: 196px;
text-indent: 10000px;
overflow: hidden;
background: url(layout/nav/sg1.png) top left no-repeat;
display: block;
float: left;

}

#sg1over:hover{

background-position: bottom left;

}

HTML:

<div id="navbar">
&nbsp;
<a href="#" id="homeover">Home</a>
&nbsp;
<a href="#" id="forumover">Forum</a>
&nbsp;
<a href="#" id="newsover">News</a>
&nbsp;
<a href="#" id="atlantisover">Atlantis</a>
&nbsp;
<a href="#" id="sg1over">SG1</a>
</div>


If you want the entire CSS and HTML Documents just say so and ill post them :thumb2:

[Dan Rider]

BUMP

[Dan Rider]

EDIT: Dont worry I figured it out, removed the &nbsp; that i used to separate the images and used padding: 8px; instead.