3 replies to this topic

[kyao888]

Dear all,
I'm running into a problem with the css. I have a series of divs and I need to place an little icon on the right of each div. If I put the icon in the background then when hover it will be overrded by the color #e8f9f9. I want the little icon to be on the right at all times.

here is the css:

#subnavProdList{
width: 184px;
}
#subnavProdList a{
font: normal 11px Arial;
display: block;
width: 100%;
color: #666666;
text-decoration: none;
border-bottom: 1px solid #cccccc;
text-indent: 5px;
padding-top: 5px;
padding-bottom: 5px;
}
#subnavProdList a:hover{
background-color: #e8f9f9;
color: #000000;
}


here is the div:

<td><div id="subnavProdList"><a href="fabrics.php?coll=Suncloth&fam=Summerhouse">Summerhouse<img src="../products/images/miniswatch/summerhouse.png" border="0" /></a></div></td>
</tr>
<tr>
<td><div id="subnavProdList"><a href="fabrics.php?coll=Suncloth&fam=Southern Cross">Southern Cross<img src="../products/images/miniswatch/summerhouse.png" border="0" /></a></div></td>  css.gif   16.49K   345 downloads

[Autocrat]

Have you tried assigning hte image as a background in the hover state as well as a color?

[kyao888]

I did but it wont work because when you mouse over the background image shifts a pixel down everytime and I have to define like 10 different divs/a/a:hovers.....

[iamlost]

Not tested in all browsers.
Try adding:

#subnavProdList a img {
	 float: right; 
	 margin-top: -12.5px;
}

where the negative margin is equal to the height of the image (eg: 10px) plus half the height of the bottom padding for <a> (5px/2=2.5px) so 10+2.5=12.5px.