Hi there

I'm not quite sure how I can get the complete td that contains an href to have a hover and a:link background colour. I can make it work on the link itself but it would be nice for the complete cell colour to change.

I have tried the "display: block" element but this didn't work. I must be doing something wrong. I also tried the onmouseover function but that didn't seem to work. See below my code:

td .all-price-prem a:link {

background-color: #f37915;
color: #fff;
display:block;
margin: 0;

}

td .all-price-prem a:hover {

background-color: #ffcc99;
color: #000;
display:block;
text-decoration:none;
margin: 0;

}

and on the link I had:

              <td class="all-price-prem" valign="top"><a href="#" onmouseover="style.backgroundColor='#ffcc99';"

onmouseout="style.backgroundColor='#f37915'">12

I was trying both ways.

Thanks in advance for your help.

2 answers

3
points

According to your markup, you are only styling links within an element within a td. Instead, you may want to declare the td itself and set it's style properties, then make a declaration for any links within the td and set their style properties too. You'll achieve that by doing this:

td.all-price-prem {
 background-color: #f37915;
}

td.all-price-prem:hover {
 background-color: #ffcc99;
}

td.all-price-prem a {
 color: #fff;
}

td.all-price-prem a:hover {
 color: #000;
 text-decoration: underline;
}

You'll also notice that I've omitted the space that you had between td and .all-price-prem. By doing this, I've set "all-price-prem" to be the exclusive class for td, instead of the class of an element within td.

While Behzad's solution is probably the more generally accepted one, it's important to note that the end-result of his answer can vary with different doctypes and different browsers; in fact, height just won't work in certain instances.

If I may, I would suggest that you refrain from using tables for structure and design. Not only is it clumsy, but it's also bad practice and a complete misuse of what tables were originally designed for. Needless to say, browsers and search algorithms may treat your website as tabular data, as opposed to actual stand-alone content. Just food for thought!

Answered over 8 years ago by Vinny Burgh
  • Hi there Vinny Thanks for your very clear and analytical answer. Very helpful. I agree with your comment regarding avoiding tables for layout. Believe me, if I had more autonomy in my position, I would not be using tables. I am adding to code that already exists and I have advised not to use tables. However, I am just an employee and a web designer. It seems web developers have more power these days! Cheers Felicia over 8 years ago
  • Vinny's answer is excellent. I do have to comment, though, that web designers are responsible for the more visible side of a website, and thus should have more bargaining power with management about certain elements of code. Be firm! Ben Overmyer over 8 years ago
  • Thanks. And going along with what Ben said, be sure to put your foot down on this manner, don't let the developer push you around. However, I understand completely where you're coming from, believe me, I've been there. Vinny Burgh over 8 years ago
Behzad 20
0
points

try this:

.all-price-prem a{ height:100%; width:100%; display:block;}
.all-price-prem a:hover{background-color:#39F; color:#FFF;}
Answered over 8 years ago by Behzad