Hi,
(correction to previous email span: hover should read a:hover span - I have
corrected the text of this message - my apologies for the error)
A recent problem was raised of trying to get the hover active area of a link
to encompass the whole area of a tr (Color change on row hover, Vol 32
Issue 17).
I was having a similar problem and the replies were helpful. I had been
looking at Eric Meyer's page
http://www.meyerweb.com/eric/css/edge/popups/demo.html and trying to create
a single button containing a link. I have now achieved this but have got
stuck on trying to get the positioning of the text as I want it.
.linkbutton {
vertical-align: middle;
font: 16px Verdana, sans-serif;
width: 120px;
background: #AAA;
text-align: center;
margin: 5px 10px;
}
.linkbutton a {
display: block;
background-color: red;
width: 100%; height: 100%;
text-align: center;
font: bold 70% sans-serif;
padding: 20px 10px 0 10px;
}
.linkbutton a:hover {
background-color: red;
}
The emails on this subject stated that display: block would make the text
fill the containing block. I found this worked but only with width and
height 100%. In my button, the text wraps onto two lines (to keep it
neat). The padding on the a element works for left and right, but not for
top, (somethng to do with collapsing margins?). Putting the padding in
linkbutton or using margin on the a element creates a gap between the top of
the active hover area and the linkbutton edge.
This is not serious but irritating. Any ideas how to push the text down
without losing the active area at the top of the button would be
appreciated. (I tried the span row height fix for vertical align middle
solution (using table-cell) but this only works if the text is on one line.)
I was also intrigued to see how Eric Meyer's buttons worked. The four
letter link (Home) fills the whole area. This is an intruiging effect of
the <span> text. Which even though it has display: none, still triggers the
hover area because it has a a:hover span declaration. If the span text is
reduced to less than the width of the button then the active area shrinks to
"Home".
I tried to use something similar, but actually didn't want <span> text to
appear on hover. I created a dummy span and set the a:hover span to
display:none. Guess what, it then does not get treated as an active hover
area (in IE at least), so the area reduces to the original a text.
Thanks for any ideas - (I am trying to keep my page free from browser
specific hacks).
Tony
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
