Forum Moderators: not2easy
.menu TD a:hover {background:black; width:100%}
That hilites the link just fine, but not the 5px padding all around the link -- in other words, it doesn't reverse the whole cell. Is there a way to reverse the whole cell without using Javascript?
Thankie-doodle, -MBJ-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<style type="text/css">
#tablemenu1 {
width: 100%;
margin: 0 auto;
border-collapse:collapse;
table-layout:fixed;
}
#tablemenu1 td {
width:25%
}
#tablemenu1 td a {
text-decoration:none;
display:block;
padding:8px;
font: 14px Arial, sans-serif;
font-weight:bold;
}
#tablemenu1 td a:link, #tablemenu1 a:visited,
#tablemenu1 a:active{
color: #6633FF;
background-color:#66CCFF;
}
#tablemenu1 td a:hover {
color: #6600FF;
background-color:#66FFFF;
font-variant:small-caps;
}
#tablemenu1 td {
text-align: center;
}
* html #tablemenu1 td a {width: 100%;}
</style></head>
<body>
<table id="tablemenu1" cellspacing="1">
<tr>
<td><a href="">first link</a></td>
<td><a href="">second link</a></td>
<td><a href="">third link</a></td>
<td><a href="">fourth link</a></td>
</tr>
<tr>
<td><a href="">fifth link</a></td>
<td><a href="">sixth link</a></td>
<td><a href="">seventh link</a></td>
<td><a href="">eighth link</a></td>
</tr>
</table>
</body>
</html>
Well there's always a way, right? Here're two CSS-related methods. In addition to these, you can always try the all-javascript method too :)
Method 1: CSS
For this to work, you have to take any padding out of the td cell in question and put it into the link instead (am I right to suspect this is a layout table? It might possibly be easier without the table in that case...)
In any case, you might try something like this:
HTML:
======
<table>
...
...
<td class="fullCell"><a href="http://www.example.com/example.html">Example link</a></td>
...
...
</table>
CSS:
======
td.fullCell { width:100px; height:100px; /* NOTE: no padding here! */ }
td.fullCell a { display:block; width:100px; padding:5px; }
td.fullCell a:link,
td.fullCell a:visited { /* styles for link and visited states */ }
td.fullCell a:hover,
td.fullCell a:active { /* styles for hover and active states */ }
Depending on your particular markup, it may be more suitable to put the class on the table rather than on the table cell. For example, if all links in the table need this treatment, this would probably be better:
HTML:
======
<table class="fullCell">
...
...
<td><a href="http://www.example.com/example.html">Example link</a></td>
...
...
</table>
CSS:
======
table.fullCell td { width:100px; height:100px; /* NOTE: no padding here! */ }
table.fullCell td a { display:block; width:100px; padding:5px; }
table.fullCell td a:link,
table.fullCell td a:visited { /* styles for link and visited states */ }
table.fullCell td a:hover,
table.fullCell td a:active { /* styles for hover and active states */ }
Method 2: whatever:hover [google.ca]/CSS
For this method to work, you need a bit of javascript that causes Internet Explorer to correctly implement the :hover pseudoclass on arbitrary elements (it's supposed to according to w3c recommendations, but doesn't... See the search above for details of how to implement this js.)
Once the js is in place, you can do something like this:
<table>
...
...
<td class="fullCell"><a href="http://www.example.com/example.html">Example link</a></td>
...
...
</table>
CSS:
======
td.fullCell:hover { /* :hover properties for td.fullCell */ }
This obviously simplifies your CSS quite a bit, but does so at the cost of making the behaviour reliant on javascript on the majority browser.
-B
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<style type="text/css">
#ul-table a:link, #ul-table a:visited, #ul-table a:active {
color: #255FDC;
}
#ul-table a:hover {color: #336600; text-decoration: none}
#ul-table {
width:601px;
text-align:center;
margin: 0px auto;
color: navy;
list-style-type:none;
clear:both;
}
* html #ul-table {margin: 0px auto;}
#ul-table li {
width: 139px;
float:left;
border:1px solid navy;
border-right:none;
text-align: center;
text-decoration:none;
}
* html #ul-table li {width:147px;}
#ul-table li a {
text-decoration:none;
color:navy;
background-color:#F4F7FA;
font: 12px Arial, sans-serif;
display:block;
line-height:40px;
}
* html #ul-table li a {width: 99%;}
#ul-table li a:hover {
background-color:#CCD9E9;
color:navy;
}
#ul-table li a:visited {text-decoration:none}
#ul-table li.top {border-bottom:none;}
#ul-table li.right {border-right:1px solid navy;}
</style></head>
<body>
<ul id="ul-table">
<li class="top"><a href="">first link</a></li>
<li class="top"><a href="">second link</a></li>
<li class="top"><a href="">third link</a></li>
<li class="top right"><a href="">fourth link</a></li>
<li><a href="">fifth link</a></li>
<li><a href="">sixth link</a></li>
<li><a href="">seventh link</a></li>
<li class="right"><a href="">eighth link</a></li>
</ul>
</body>
</html>
All those examples are so long. I compressed the first example down to only what's necessary and this seems to be the minimum to produce a workable example:
#tablemenu1 td { width:25% }
#tablemenu1 td a {
text-decoration:none;
width=100%;
display:block;
padding:8px;
}
#tablemenu1 td a:link,
#tablemenu1 a:visited,
#tablemenu1 a:active{ color: #6633FF; background-color:#66CCFF; }
#tablemenu1 td a:hover { background-color:#66FFFF; }
What I don't understand is why <a:active> is necessary. I thought that was only to style a link at the moment that the mouse button is pressed onto it. Yet if I remove that line from the stylesheet then the example no longer works.
* html #tablemenu1 td a {width: 100%;}
#menu td a { width=100%; display:block; padding:8px; }
#menu td a:hover { background-color:#66FFFF; }
This works fine on both Safari and IE6 for me.
Interestingly, when I used to have these lines in:
#menu td a:link,
#menu td a:visited,
{ color: #6633FF; background-color:#66CCFF; }
IE6 would show the #66CCFF background color, but Safari would not. No problem, I can simply define the color for the TD itself and not the TD a:
#menu td { background-color:gray}
All done, thanks again for your help.
If Safari won't show a background colour, I'd suggest validating your html [validator.w3.org] and css [jigsaw.w3.org].
I can see at least one mistake in just what you've posted here:
#menu td a { width=100%; display:block; padding:8px; }Should be:
#menu td a { width:100%; display:block; padding:8px; }
Incidentally, the '#menu td a' style above is likely to open up a can of box-model [google.ca] worms for you. If your page is in standards mode [google.ca], the <a> in that <td> will be 100% of the width of the <td> PLUS 16px - but since you've set the 'display' property to 'block', the explicit 'width' is probably unnecessary.
-B
I do have to specify 100% width, otherwise in IE6 only the first cell will hilite when I point to it. For other cells I have to point to the link itself to get a hilite. I'm not using a Doctype and I haven't had to worry about having validated code, so far...
Here's the final solution, I think:
#menu td a { width:100%; display:block; padding:8px; background:silver}
#menu td a:hover { background-color:#66FFFF; }
Thanks again for all the help.
