On 8/3/07, Terri Houston <[EMAIL PROTECTED]> wrote:
> Sucker Tree Horizontal Menu
> www.ttcollectiblegifts.com/dynamicdrive.html
>
> I'm satisfied with the way my menu looks in IE browser, but not in Firefox.
> As I hover on a top level list item, the background shortens, making the next
> top list item overlap the top of the top link. Any ideas on why this is
> happening?
The problem is that the designer of your menu didn't take into account
the possibility of the vertical padding of the <a> tag at the top
level overflowing the bounds of the containing ul/li. IE gladly
expands container elements to wrap around floating elements, even when
it's not supposed (as in this case).
You can fix this by changing the rule on .suckertreemenu ul li a to
include "display: block;"
>
> Also, in Firefox, my menu is not nearly as wide as it looks in IE. How can I
> change this?
>
The above fix should significantly widen your menu. You will probably
need to play with the width: 100px or else the top menu boxes are
likely to wrap in any small display. Also, be aware that once you
have display: block, having both width and left/right padding is
inconsistent (not to mention redundant with text-align: center) and
going to get you inconsistent results across browsers, either remove
the fixed width (so that each menu with expand to fit its text) or
change the padding to padding: 5px 0px
But you also have a very strange rule:
ul..suckertreemenu {
width: 820em;
margin: auto;
}
-->
replace that with something like
.suckertreemenu {
width: 820px;
margin: 0px auto;
}
note the px instead of em, if any browsers even managed to parse that
selector, it would have made your menu 820 times as wide as an M in
your browser's font. That can't be what you want. Then again, you do
have it set to be 5300 pixels high, so what's 8200+ pixels wide!
(820px won't work either because the parent elements force it to 808px
(at least in firefox) which is too small to handle the 816px that it
wants to be with 1px borders around 100px boxes, it does work on its
own though).
> I would love to be able to center the menu on my webpages, and not have to
> worry about placing it. Can I do this?
The margin: 0px auto; will give you 0px of vertical margin and
horizontally center the entire div. Although, you'll need to consider
the conflicts that such loose positioning will have with all the very
strict relative positioning you have on the other elements of the page
(as with my note on width above).
Rob
______________________________________________________________________
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/
