Re: CSS background images not filling the cell

dhunter (AT) abrasive-tech (DOT) com (dhunter) wrote:

I'm trying to create a mouseover navbar with CSS which inserts a
colored background JPG that fills a transparent cell using "a:hover"
and inserts a different colored JPG after you click on the link and
are on the linked page ("a:active" I assume).

a:visited actually. a:active applies to the current active link (i.e.
the one in the process of being activated) once the next page has
loaded there is no active link until the user clicks on one, but the
link to the current page (bad practice - pages shouldn't link to
themselves) will obviously be visited.

My current test works fine (at least on the "a:hover" part) but the
background won't fill the cell, no matter what I do. When I create a
class and apply it to an ordinary cell, the background jpg fills the
cell with no trouble. But as soon as I try to do the same thing with
links, the background jpg won't fill the cell.

.mouseovertest a:link, a:visited {
color: 003366;
font-family: arial;
font-size: 10px;
text-decoration: none;
}

.mouseovertest a:hover {
color: 3399CC;
background: url(../Media/colorchange.jpg);
}

.mouseovertest a:active {
color: 003366;
background: url(../Media/colorchange2.jpg);
}

That sets the background image on the <a> element, not the <td>
element. If you want to make the <a> element fill the cell then set

..mouseovertest a {display: block;}

<table border="1" cellpadding="8"
<tr
<td class="mouseovertest"><a href="#">Mouseover</a></td
<td class="mouseovertest"><a href="#">Mouseover</a></td
<td class="mouseovertest"><a href="#">Mouseover</a></td
</tr
</table

It would be less work to have the class on the table rather than on
every cell. And are you sure that this is a table?

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>