473,848 Members | 1,835 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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.jp g);
}

=============== =====
MY TEST HTML PAGE
=============== =====
<html>
<head>
<meta http-equiv="content-type"
content="text/html;charset=is o-8859-1">
<title>Mouseove r test</title>
<link rel="stylesheet " href="../NewFiles/mouseovertest.c ss"
type="text/css">
</head>
<body>
<table border="1" cellpadding="8" >
<tr>
<td class="mouseove rtest"><a href="#">Mouseo ver</a></td>
<td class="mouseove rtest"><a href="#">Mouseo ver</a></td>
<td class="mouseove rtest"><a href="#">Mouseo ver</a></td>
</tr>
</table>
</body>
</html>
Jul 20 '05 #1
1 6766
dh*****@abrasiv e-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. .mouseoverte st a:link, a:visited {
color: 003366;
font-family: arial;
font-size: 10px;
text-decoration: none;
}

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

.mouseoverte st a:active {
color: 003366;
background: url(../Media/colorchange2.jp g);
}
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="mouseove rtest"><a href="#">Mouseo ver</a></td>
<td class="mouseove rtest"><a href="#">Mouseo ver</a></td>
<td class="mouseove rtest"><a href="#">Mouseo ver</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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
4245
by: Justin | last post by:
Ok here is working code in IE, <td ID="TD1" width="478" height="553" background="images/GUYONDOC.JPG" valign="top">. . . </td> <a href="texana.htm" onmouseout="document.images.src='images/Dot1.bmp'; TD1.background='images/GUYONDOC.JPG';" onmouseover="document.images.src='images/Dot2.bmp';
3
2350
by: veryred | last post by:
Hello. I'm placing a background image in a table cell using a style sheet--I reads it, Netscape, Firefox, and Opera do not--they will however read background-color when I insert that. This is what I've entered on my CSS: td.logo {
21
20663
by: Dan V. | last post by:
I have tried a number of things including preloading, but the background image (water tile in header) in IE 6 will not display where other browsers will. http://www.officeactivate.com/web-site-design.shtml Any ideas? thanks.
3
4776
by: Peter Williams | last post by:
Hi All, I want to write some javascript for a html page which does the following. Imagine that the page contains a table with 2 columns and 3 rows, e.g.: +---+---+ | A | B | +---+---+
5
116817
by: Derek Fountain | last post by:
I have a horizontal navigation bar, which is a single row table containing the right images. It "stretches" itself across the screen using a penultimate td like this: <td width="100%" background="images/nav_bar/nb_spacer.gif">&nbsp;</td> which works in all major browsers that I've tried, but doesn't validate. No background attribute to the td tag, apparently. What is the correct way to do this? A stylesheet entry with a
5
11108
by: proximus | last post by:
Hi, I am trying to change the background of table TD's. The problem is that I have no access to the HTML code. SO I am trying to alter this using Javascript/DOM in an external .js file. I have tried lot's of things and spent hours on this, I thought I might give it a try here. One of the TD's uses HTML to set the background, the other one uses CSS styling:
5
3170
by: Michael | last post by:
Is there a way to specify a background-image for a html table cell in a theme's css file. I know a lot of things I can't do... can't figure out one that I can do: 1) ~/ Images/logo.gif doesn't work since it isn't a server side control. 2) /Images/logo.gif doesn't work, not sure why. 3) Images/logo.gif doesn't work - This can work specify the style of the td element instead of the CSS class but then it isn't part of the theme. 4)...
2
3816
by: Jim | last post by:
How can I use JavaScript to change a background image in a table cell? Here's the code for the cell <td width="338" valign="top" background="../images/ LEC_Q1.jpg"><div align="right"></div></td> You can see that the background is set to the image LEC_Q1.jpg. I want to change the image LEC_Q1.jpg to LEC_Q1_faded.jpg after a user clicks a button and the only way I can figure out to do it is by using
5
9382
denny1824
by: denny1824 | last post by:
I want each cell in a table on the Master page to have its own background image. The images exist, but none of them show on the page. <body> <form id="form1" runat="server"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" style="background-image:url('~/images/header.jpg'); width:100%; height:100%;"> <div> <asp:ContentPlaceHolder...
0
9893
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, weíll explore What is ONU, What Is Router, ONU & Routerís main usage, and What is the difference between ONU and Router. Letís take a closer look ! Part I. Meaning of...
0
9738
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
11001
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10664
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
5735
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5919
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4544
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4137
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3175
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.