# Kirupa CSS Rollover Tutorial Problems

**URL:** <https://forum.kirupa.com/t/kirupa-css-rollover-tutorial-problems/253495>\
**Category:** web dev\
**Created:** [March 2, 2008, 2:14am UTC](https://forum.kirupa.com/t/kirupa-css-rollover-tutorial-problems/253495 "2008-03-02T02:14:19Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dan\_Rider](https://avatars.discourse-cdn.com/v4/letter/d/e99b99/32.png) [@Dan\_Rider](https://forum.kirupa.com/u/Dan_Rider)\
**Post date:** [March 2, 2008, 2:14am UTC](https://forum.kirupa.com/t/kirupa-css-rollover-tutorial-problems/253495/1 "2008-03-02T02:14:19Z")

</div>

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:

```auto

#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:

```auto
<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: