homepage Welcome to WebmasterWorld Guest from 54.227.34.0
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
rollover effect missing in FF
a href works in IE not FF
A2webgurl

5+ Year Member



 
Msg#: 3635093 posted 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>

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

 

RedTCat

5+ Year Member



 
Msg#: 3635093 posted 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

5+ Year Member



 
Msg#: 3635093 posted 3:42 pm on Apr 25, 2008 (gmt 0)

wow. that would be a drag. Thanks-

rocknbil

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



 
Msg#: 3635093 posted 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.

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

A2webgurl

5+ Year Member



 
Msg#: 3635093 posted 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

5+ Year Member



 
Msg#: 3635093 posted 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+ Year Member



 
Msg#: 3635093 posted 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+ Year Member



 
Msg#: 3635093 posted 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

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



 
Msg#: 3635093 posted 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

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



 
Msg#: 3635093 posted 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

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



 
Msg#: 3635093 posted 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved