Hi,

 

I'm trying to use this method to create a rollover image button with CSS.

 

But it's not working for some reason.

 

I'm trying to create a horizontal nav bar using an image which is 28px high and 288px wide.

 

So the inactive state is the first 144px and the rollover state is 144- 288px.

 

The code I'm using is as follows:

 

#navbar {

position:absolute;

top: 200px;

left: 300px;

font-family:Arial, Helvetica, sans-serif;

font-size:.8em;

font-weight:bold;

height:28px;

}

#navbar li {

list-style:none;

display:inline;

}

#navbar a {

width:108px;

height: 28px;

color:#fff;

text-decoration:none;

background:url("btnmasterH.jpg") no-repeat;

float:left;

padding:6px 0px 0px 32px;

margin:0px 0px;

}

#navbar a:hover {

background-position:0px -144px 0px 0px;

color:#1e5ebd;

}

/*#navbar a:active {

background-position:0 0px;

color:#1e5ebd;

}*/

 

Thanks for any advice.

 

Jo

just out of interest can we see he source for the menu.

 

you MUST include an <a> for CSS to treat this properly if I remember right.. so:

 

<li><a href="#">Menu Item Here</a></li>