rollover effect missing in FF

Forum Moderators: not2easy

Message Too Old, No Replies

rollover effect missing in FF

a href works in IE not FF

A2webgurl

3:23 pm on Apr 25, 2008 (gmt 0)

Hello--

I am trying to make a simple rollover happen within a complicated data table. I have this working in IE 6&7 but am having difficulties in FF.

My requirements call for me to have the href tag within a <td>. I need to have the whole table highlight on rollover. It links, text color changes, but the rollover effect is missing. Again it works in IE, but not FF. Any insight would be hugely appreciated.

Here is a sample of my code:
<style type="text/css">
<!--
a:link, a:visited{color:#ccc;text-decoration:none;background:#289;}
a:active, a:hover{background:#555;colo}

-->
</style>

RedTCat

3:38 pm on Apr 25, 2008 (gmt 0)

Just a guess, (someone here will know for sure) but what you are trying to do is probably not a supported feature, it's just chance it works on IE.

A2webgurl

3:42 pm on Apr 25, 2008 (gmt 0)

wow. that would be a drag. Thanks-

rocknbil

3:56 pm on Apr 25, 2008 (gmt 0)

Welcome aboard a2webgurl, this is invalid HTML, you can't nest a table inside an anchor. You can, however, make it work using a different and more simple approach. Instead of

....<td><a href="">
<table>
<tr><td>link</td>
</tr>
</table>
</a></td>.....

Use just the anchor, and style it somehow to "fill" the TD. This is a better solution anyway, nested tables are bad mojo for accessibility.

.whatever { display: block; height:40px; width:200px; }

... then follow with your hover styles.

The width and height are examples, but this approach will probably lead to a solution as long as you use a valid doctype.

A2webgurl

4:32 pm on Apr 25, 2008 (gmt 0)

thanks for the welcome aboard!
I am not really seeing a big difference in your suggestion and my code. Please know that I have simplified my code for illustrative purposes. I do have a class in my href tag. Perhaps my using the word link in my table cell has caused some confusion.

Let's go with this:
....<td><a href="" class="whatever">
<table>
<tr><td>data</td><td>data2</td>
</tr>
<tr><td>data</td><td>data2</td>
</tr>
</table>
</a></td>.....

then for the style I have:
a.whatever:link, a.whatever:visited {background:#transparent;width:100%;padding:0;color:#000;text-decoration:none;display:block;}

a.whatever:hover{background:#aec3d0;}
Thanks for your help!
DOC TYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

A2webgurl

4:35 pm on Apr 25, 2008 (gmt 0)

Oh and I do know that nested tables is bad for general accessibility. This is for data display, within a browser based app. But thanks- please know that i use css based layouts exclusively. This is why I am frustrated with this. I am terribly out of practice with coding tables. :-)

RedTCat

5:15 pm on Apr 25, 2008 (gmt 0)

what rocknbil is saying is, use CSS to style the link within a table cell to make it fill the cell... but you can't put a table inside a link. If this does not give you what you need, then really you problbly need to look at an alternative way of presenting the information. Why does an entire table *need* to be highlighted? ... Why not present the info in whatever way looks best and have a more conventional link as part of the text?

A2webgurl

5:24 pm on Apr 25, 2008 (gmt 0)

thank you.
yes, i understand (now) about the table inside the link.

Thank you for your help. The data display is complex and persnickety. The client is requesting the rollover effect. I am trying to give my clients what they want... but understand limitations. Before I gave up, I wanted to reach out and find out if there might be some answer - while the above may work in some instances, for my special case it does not.

Thank you both for your wonderful insights
a

swa66

2:03 am on Apr 26, 2008 (gmt 0)

Actually in FF you could apply the :hover on *any* element in valid html. It's IE that limits you to use <a> tags only.
If you drop support for the broken IE6 I think you can get it to work once you get valid html and then e.g. add back in the <a> tags where they would be illegal for getting it back to working order in IE6 ... (still it feels bad to do that, better to let it gracefully degrade the way it shows in obsolete browsers like IE6 [yes, in CSS terms it can only be considered obsolete, unfortunately MSFT doesn't succeed making it obsolete in the deployed base out there, perhaps our continued effort to make things work in IE6 are partly to blame])

swa66

2:20 am on Apr 26, 2008 (gmt 0)

A few more remarks:

a:active, a:hover{background:#555;colo}

Is invalid CSS ... "colo", but that might be cut&paste ...

The other thing I've noticed recently is that using shorthand ways to set things might have unintended side-effects in both the standard as well as in firefox.

If you only intend to set the color, and not change other background settings, I'd recommend

"background-color:#555"

over

"background:#555"

Firefox interprets

background:#555

as if you wrote:

background-color: #555555;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-x-position: 0%;
background-y-position: 0%;

overwriting previous values ...

pageoneresults

2:47 am on Apr 26, 2008 (gmt 0)

a:link, a:visited{color:#ccc;text-decoration:none;background:#289;} 
a:active, a:hover{background:#555;colo}

LVHA

Link
Visited
Hover
Active

Change the order of your rules to...

a:link, a:visited{
color:#ccc;
text-decoration:none;
background:#289;
} 
a:hover, a:active{
background:#555;
}

The rollover effect is missing due to the incorrect order.