css rollover problems

[danny322]

Hi

Im having problems with my css rollover menu, no matter what i try the menu wont display in line, it keeps displaying down the left like.....

Home
About
Cart
Contact
etc

I need it to display inline like....

Home About Cart Conatct

here is my code,

HTML

<div id="top_menu">
<div class="rollover">
<a href="default.asp">Home</a>
<a href="shopcontent.asp?type=aboutus">About Us</a>
<a href="shopcustcontact.asp">Contact Us</a>
<a href="shopaddtocart.asp">View Cart</a>
<a href="shopcheckout.asp">Checkout</a>
</div>
</div>

CSS

.rollover a{
display: inline;
text-align: left;
background: url(images/btn.gif) 0 0 no-repeat;
}

.rollover{
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
/*font-style: normal;
font-weight: normal;*/
padding-bottom: 10px;
padding-left: 30px;
padding-top: 9px;
padding-right: 25px;
text-align: left;
text-decoration: none;
width: 100%;
font-weight: 700;
}
.rollover a:link{
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
/*font-style: normal;
font-weight: normal;*/
padding-bottom: 10px;
padding-left: 30px;
padding-top: 9px;
padding-right: 25px;
text-align: left;
text-decoration: none;
width: 100%;
font-weight: 700;
}
.rollover a:visited{
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
/*font-style: normal;
font-weight: normal;*/
padding-bottom: 10px;
padding-left: 30px;
padding-top: 9px;
padding-right: 25px;
text-align: left;
text-decoration: none;
width: 100%;
font-weight: 700;
}
.rollover a:hover{
/*background-color: #b00a0d;
color: #ffffff;*/
background: url(images/over_btn.gif) 0 0 no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
/*font-style: normal;
font-weight: normal;*/
padding-bottom: 10px;
padding-left: 30px;
padding-top: 9px;
padding-right: 25px;
text-align: left;
text-decoration: none;
width: 95px;
background-repeat: no-repeat;
font-weight: 700;
}
.rollover a:active{
background: url(images/over_btn.gif) 0 0 no-repeat;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
/*font-style: normal;
font-weight: normal;*/
padding-bottom: 10px;
padding-left: 30px;
padding-top: 9px;
padding-right: 25px;
text-align: left;
text-decoration: none;
width: 95px;
font-weight: 700;
}

[Lchad]

You are missing a few bits to your html and css. A list for navigation should sit between <ul></ul> (unordered lists) and each link should sit between list code. <li></li>

Check out this link ..Taming Lists. it should really help you.

[Lchad]

I guess we'll close this thread since you've already started a new one.
Thread closed.