Welcome to WebmasterWorld Guest from 54.163.84.187

Forum Moderators: not2easy

rollover effect missing in FF

a href works in IE not FF

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

5+ Year Member



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>

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

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

5+ Year Member



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.
3:42 pm on Apr 25, 2008 (gmt 0)

5+ Year Member



wow. that would be a drag. Thanks-
3:56 pm on Apr 25, 2008 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

<td><a class="whatever" href="">link</a></td>

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

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

5+ Year Member



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">

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

5+ Year Member



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. :-)
5:15 pm on Apr 25, 2008 (gmt 0)

5+ Year Member



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?
5:24 pm on Apr 25, 2008 (gmt 0)

5+ Year Member



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

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

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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])
2:20 am on Apr 26, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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 ...
2:47 am on Apr 26, 2008 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month