List elements overlapping in Netscape (and FF)

[schwarznavy]

Hi,

I'm not too good with CSS but I managed to create a menu list that I like. It works exactly how I want with IE 6.0, but overlaps with Netscape and FF.

Can anyone help me figure out why?

Here is the CSS:

#left-menu {
	background-color: #181C3A;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #393939;
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
}
#left-menu li.main {
	font-family: arial;
	font-weight: bold;
	font-size: 16px;
	margin: 0;
	margin-top: -12px;
	margin-bottom: -18px;
}
#left-menu li.sub {
	font-family: arial;
	font-weight: bold;
	font-size: 12px;
	font-variant: small-caps;
	margin: 0;
	margin-top: -12px;
}
#left-menu .main a { 
	background-color : #181c3a; 
	border-top-width : 1px; 
	border-top-style : solid; 
	border-top-color : #393939; 
	color : #b3c0ce; 
	display : block; 
	padding : 6px 15px; 
	text-decoration : none; 
	margin : 0; 
}
#left-menu .sub a { 
	background-color : #181c3a; 
	color : #b3c0ce; 
	display : block; 
	padding : 4px 25px; 
	text-decoration : none; 
	margin : 0; 
}
#left-menu .main a:hover {
	background-color: #FF9900;
	background-image: url('../graphics/hover.gif');
	background-position: left center;
	background-repeat: no-repeat;
	color: #181C3A;
	padding-bottom: 6px
}
#left-menu .sub a:hover {
	background-color: #FF9900;
	background-image: url('../graphics/hover.gif');
	background-position: left center;
	background-repeat: no-repeat;
	color: #181C3A;
	padding-bottom: 4px
}

The abbreviated HTML is like this:

<li class="main"><a href="../about.htm" target="_self">About 7th Fleet</a></li>
<li class="sub"><a href="../leaders/commander.htm" target="_self">Leaders</a></li>
<li class="sub"><a href="../forces.htm" target="_self">Forces</a></li>

Also, I've attached screenshots of how it looks in IE and Netscape.
Thank you so very much.

Matthew

[Dekudude]

Try adding 'position:relative' to the <li> tags.

[schwarznavy]

Thank you for your quick reply. No, that didn't work. The list didn't change one way or another with that tag.

[MidiMagic]

You can't have negative surrounding styles.

margin-top: -12px;
	margin-bottom: -18px;

These are causing the overlapping.

Why are you using them?

Negative surrounding styles are not really defined, and do different things in IE and FF.

- Since FF obeys the standard and puts surrounding styles outside the size of a box object, a negative surrounding style makes the surrounding style intrude on the contents of the box. This causes the boxes to overlap when rendered, since they are larger than their margins.

- Since IE does not obey the standard, it puts the surrounding styles inside the size of the box object. So negative surrounding styles stick out from the box.

The best thing to do is to not define sizes and surrounding styles on the same tag.

Always design for FF first, since it obeys the standard. Then, all browsers except IE will work. Then adjust your design to also work in IE.

[schwarznavy]

don't know how smart it is, but I think I figured out a way.
I read http://www.sitepoint.com/article/bro...ific-css-hacks to figure it out.

These are the changes I made:

#left-menu li.main {
 	font-family: arial;
	font-weight: bold;
	font-size: 16px;
	margin: 0;
[B]	margin-top: -12px;
	margin-bottom: -18px;[/B]}
[B]html>body [/B]#left-menu li.main {
 	font-family: arial;
	font-weight: bold;
	font-size: 16px;
	margin: 0;
[B]	margin-top: 0;
	margin-bottom: 0;}[/B]#left-menu li.sub {
	font-family: arial;
	font-weight: bold;
	font-size: 12px;
	font-variant: small-caps;
	margin: 0;
[B]	margin-top: -12px;}[/B]
[B]html>body [/B]#left-menu li.sub {
	font-family: arial;
	font-weight: bold;
	font-size: 12px;
	font-variant: small-caps;
	margin: 0;
[B]	margin-top: 0;}[/B]

And now it looks right, at least using IE 6 and Netscape 7. I can't test on other platforms just yet.

What do you think?

[MidiMagic]

It's a kludge.

Don't use negative surrounding styles. They are not defined, and can do widely different things on different browsers.