467,074 Members | 975 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,074 developers. It's quick & easy.

CSS background images not filling the cell

I'm kind of new to CSS and hope someone knows how to fix a problem
I've been fighting with for days.

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).

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.

I only want certain, specified links to work this way, not every link
on the page. I haven't created any linked documents yet to test out
the "a:active" part of the navbar. I hope it will work?? The style
sheet needs to be external due to the number of pages I'm going to
have to "upgrade" if I can get this to work.

Your suggestions will be HUGELY appreciated!

========================
MY EXTERNAL STYLE SHEET
========================
..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);
}

====================
MY TEST HTML PAGE
====================
<html>
<head>
<meta http-equiv="content-type"
content="text/html;charset=iso-8859-1">
<title>Mouseover test</title>
<link rel="stylesheet" href="../NewFiles/mouseovertest.css"
type="text/css">
</head>
<body>
<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>
</body>
</html>
Jul 20 '05 #1
  • viewed: 6462
Share:
1 Reply
dh*****@abrasive-tech.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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by veryred | last post: by
5 posts views Thread by Derek Fountain | last post: by
5 posts views Thread by proximus@operamail.com | last post: by
5 posts views Thread by Michael | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.