Active area of div for hover on link - corrected

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-REMOVED]]
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/

Active area of div for hover on link - corrected

Sent by Tony Martin on 17 July 2005 13:01