Kirupa CSS Rollover Tutorial Problems

programming web dev
1

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: