By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,676 Members | 1,763 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,676 IT Pros & Developers. It's quick & easy.

CSS background images not filling the cell

P: n/a
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
Share this Question
Share on Google+
1 Reply


P: n/a
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.