[EMAIL PROTECTED] wrote:
>see link below with two menus:
>
>- http://www.fatgraffix.com/hrblshop-dev/shop_dev19/
>
>1) in first menu, hover of main headings (h2 tags) work fine as long as
>zero padding is applied to the h2 tags
>
>2) in second menu, hover of h2 tags don't catch the padded areas of the h2
>tags seems that the hover should apply to the padded areas, but they don't
>(on windows IE, firefox and opera)...
>
>i'm pretty sure that hovers usually work over list items with padding, but
>why not h2 tags ??
>
Hi Francis,
It is the definition of what a padding is. The simplified explication
[1]: it is the space between an element an the element inside.
In your case, if the element is the h2, and you give a padding to the
h2, the embedded element (the <a>...</a>) will start at the distances
given by the padding. The background of the <a> element is displaying
only there (if it is a normal background or a hovering one doesn't matter).
See image of screenshot with other paddings of the h2:
*
http://home.tiscali.nl/developerscorner/css-discuss/images/test-1_dev19c.gif
If you hover over the <a> element, only the (yellow) background of that
element is changed; not the background of the surrounding h2. [2]
Now if you want the hovering background color for the whole h2 space,
you can set all paddings of the h2 to zero, and give the padding to the
<a> element. Then the background of the <a> is filling the background of
the whole <h2>, and thus @hover of the <a> is changing all.
See image of screenshot with padding to the <a>:
*
http://home.tiscali.nl/developerscorner/css-discuss/images/test-2_dev19c.gif
:-)
If you want some more space between the search box and the first h2, you
can apply a border-bottom to a search box element:
*
http://home.tiscali.nl/developerscorner/css-discuss/images/test-3_dev19c.gif
Succes and greetings,
francky
[1] w3c-specs: http://www.w3.org/TR/CSS21/box.html#box-dimensions
[2] unless you make an at-hover changing backgound for the h2; but then
IE doesn't understand (because the h2 itself is not an <a>).
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
