Forum Moderators: not2easy

Message Too Old, No Replies

links for IE

display block;

         

natty

4:06 pm on Aug 19, 2004 (gmt 0)

10+ Year Member



hi all,

now i know i should know this, but im afraid i dont think i do.
trying to style some links as hover blocks.
sadly each of them is in its own table cell.
so html goes like this

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

and so it continues..

the effect im after is a hover in all of the cell , not just over the text.

in the css.
#nav a:link, #nav a:visited{
color: #f66;
background-color: #000;
display: block;
padding: 5px 0px;
}
#nav a:hover, #nav a:active{
color: #66f;
display: block;
background-color: #efefef;
padding: 5px 0px;
}
#nav td{
text-align:center;
padding: 0px 1px;
}

as usual its IE im having problems with.
i seem to remember that you have to give ie links width to get them to hover like this.. so must i then use the bmh to get ie not to get the link width wrong etc. having padding on the cell/link as i mentioned before.

any help much appreciated.

nat

dan121

7:52 pm on Aug 19, 2004 (gmt 0)

10+ Year Member



your css works fine for me in IE 5, 5.5 and 6.
When I hover over the cell with a link (anywhere in the cell) the whole background changes.

What HTML are you using?

johnnie

12:38 am on Aug 20, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Try adding this:


#nav a
{
width: 100%;
}

That will cause the link to fill up the entire table cell and should make the hover-effect apply on the entire block.