css issue in IE6

[sachi]

i'm seeing a huge height disparity in IE6 for my site here. it's fine in FF, but I'm not sure what is causing this problem. Does anyone have a clue or point me in the right direction?

[jumpenjuhosaphat]

You're link doesn't seem to be working in either FF or IE...


Edit: Nevermind, it was my connection.

[exam]

Post your CSS for the lefthand UL menu.

[sachi]

Sure, no problem. Here you go;

#nav-container {
  width: 220px;
  float: left;
  height: 200px;
}

* html #nav-container {
  width: 220px;
  float: left;
  top: 0;
}
#navmenu {
width: auto;
border-right: 0px solid #000;
color: #333;
font-size: 1em;
font-weight: 900;
height: 200px;
clear: left;
line-height: 2.5em;
letter-spacing: .15em;
margin: 0;
padding: 0;
}

#navmenu ul {
list-style: none;
}


#navmenu li a {
	font-family: "Lucida Grande", Geneva, Helvetica, Arial, sans-serif;
	display: block;
	padding: 5px 5px 3px 20px;
	border-left: 10px solid #012345;
	background-color: #fff;
	color: #012345;
	text-decoration: none;
	height: auto;
}


#navmenu li a:hover {
	border-left: 5px solid #0099ff;
	background-color: #none;
	color: #012345;
}

li.one:hover,  {
	border-left: 5px solid #ff9900;
	}
	
li.two:hover {
	border-left: 5px solid #fff;
	}
li.three:hover {
	border-left: 5px solid #93ccea;
	}
	
li.four:hover {
	border-left: 5px solid #133fbf;
	}
	
li.five:hover {
	border-left: 5px solid #a524ef;
	}
	
html>body #navmenu li a { width: auto; }

[sachi]

btw- i was tinkering around with it and I noticed removing the line-height: 2.5em; from the #navmenu will shorten the height on IE6. However, a gap will still exist b/w each navmenu tab.

[exam]

Thanks for posting the CSS. I don't see anything obvious, you can try changing heights for the elements while testing in both browsers, especially the height: auto; that you have for the #navmenu li a. Experiment with explicitly declaring the height of each menu item, since IE and FF inherit CSS values differently. Other than that, I would experiment with it until it works.

[exam]

Originally Posted by sachi

btw- i was tinkering around with it and I noticed removing the line-height: 2.5em; from the #navmenu will shorten the height on IE6. However, a gap will still exist b/w each navmenu tab.

Could it have something to do with having the li and a elements both display:block ?

[sachi]

no- it's not the block element. just tried it.

it's so strange because it was perfect in both IE and FF before I started tinkering with it yesterday night. Grrghhh....me and my tinkering. I wish I had the original stylesheet before all this happened!

Thanks for helping, though. I'll keep messing with it. I did manage to close the height gap now but just need to align it the left.

[Taltos]

Looks OK now. Did you get it fixed. When dealing with IE6 you will almost always have to use one of the variations on the box model hack. IE6 treated the CSS box model differently than the standards stated. When you start using borders and padding, IE6 will render different than other standards based browsers. I would assume that is what you ran into. You have a box model hack in your CSS but I didn't userstand why because it is no different.
The hack is:

* html #nav-container {
width: 220px;
float: left;
top: 0;
}

Did you remove some things from this area?