Jeralyn Merideth wrote:
> ...Could someone help me figure out why my hover isn't filling up the entire
> space of the menu block?
>
> http://216.119.67.187/js/index.htm#
It is difficult to archive such a menu in an inline context.
With setting line-height:2em; for the link, as you did, you don't change
the content's height, but only the line box height. On hover, the
content gets another background, but not the line box.
You can change the content height by applying a small vertical padding,
say 0.5em to the link. This fills the vertical space of the line-box
ul a { padding: 0.5em 1em; line-height: 2em; ... }
But browsers do not align this the same, and content which becomes
taller than its line-height "bleeds" into the context.
ul { ... overflow: hidden;}
For the horizontal gap between the list entries, remove all
white-space/return between the
<\li> <li>
like so
<li><a href="#">Home</a></li
><li><a href="#">About Us</a></li
><li><a href="#">Personal Products</a></li
...
Currently, this seems to break if the font is zoomed or the the line
wraps. js_nav-btn-bg.jpg is just not tall enough. Added an olive
bg-color and removed repeat-y to show the content height. See what
happens if the line wraps on small window sizes, compared in IE vs. Fx.
The tiling and positioning of backgrounds is undefined for inline
elements. A white-space:nowrap does not really help, since it will put a
stop to all the wrapping.
Another difference is noticeable with this version in IE. The list entry
is expanded by the link+padding, this is wrong. But the delimiter, the
white-border, gets taller.
This example is broken in IE-Mac, the hover interacts with other
buttons. I don't know why. Hope someone else sees what I am missing.
http://www.satzansatz.de/cssd/tmp/jsnav.html
Ingo
--
http://www.satzansatz.de/css.html
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/
