Nav menu displaces in IE 1

[moirakris]

I have a menu that shows up fine in Firefox but in IE (6 specifically) it renders over to the right too much. I do not know how to fix this problem and could use a little advice please.

Here are screenshots of it
Menu in Firefox

http://img.photobucket.com/albums/v605/moirakris/firefox.png

Menu in IE

http://img.photobucket.com/albums/v605/moirakris/IE.png

Here is my nav CSS

/********************************* Navigation **********************************/

#navcontainer { }

#navcontainer ul
{
	list-style-type: none;
	font-weight: bold;
	color: #990000;
}

#navcontainer a
{
	display: block;
	padding-top: 17px;
	padding-left: 37px;
	width: 182px;
	background-color: #DCE3ED;
	border-bottom: 1px solid #eee;
	background-image: url(images/menu.png);
	background-repeat: repeat-x;
	height: 27px;
}


#navcontainer a:link, #navlist a:visited
{
color: #614240;
text-decoration: none;
}

#navcontainer a:hover 
{	
	background: url(images/menu.png) 0 -45px;
	color: #562930;
}

Not sure if I needed to post the whole css file or not




Moira
Those that stop learning, stop living

 

[BillyRayPreachersSon]

How is the nav container positioned?... Some more CSS could be handy.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[moirakris]

How about links to the actual two files, maybe this will be helpful

http://home.comcast.net/~cmeek1969/handw/index.html

http://home.comcast.net/~cmeek1969/handw/style.css

Moira
Those that stop learning, stop living

 

[Vragabond]

Although you zero out margins and padding for all the elements at the top, you might try to do it specifically for the menu as well. IE6 could be messing that up. If not, it could simply be one of IE6 oddities and you should start putting temporary borders around the container, ul, lis and so on to find out which item gets jostled. However, putting a border around it might even fix it.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[BillyRayPreachersSon]

It could well be the old IE double-margin bug. Try changing your #left css block by adding this line:

#left {
	float:left;
	width: 225px;
	margin-left: 45px;
	margin-top: 120px;
	[!]_display: inline;[/!]
}

If that works, either stick with it, or put it in an external IE-only style sheet.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[moirakris]

thanks alot, the _display:inline did the trick

Moira
Those that stop learning, stop living