Suckerfish positioning problem IE6

Hi everyone,

I really need your precious help,

I'm using a css:hover fix based on including a csshover htc file to my css as suckerfish solution in ie6.

The problem is when I hover the buttons in any browser, the menus appear directly under the button (which I want to have) however in ie6, the menus appear at the right end of the menu.

Any help will be appreciated.

Thanks!!

problem:

<div id="tabs">
<ul id="menu">
<li></li>
<li><a href="#"><span>Home</span></a>
<ul>
<li><a href="#">Submenu 3.1</a></li>
<li><a href="#">Submenu 3.2</a></li>
<li><a href="#">Submenu 3.3</a></li>
</ul>
</li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Research</span></a>
<ul>
<li><a href="#">Submenu 3.1</a></li>
<li><a href="#">Submenu 3.2</a></li>
<li><a href="#">Submenu 3.3</a></li>
</ul>
</li>
<li><a href="#"><span>Facilities</span></a></li>
<li><a href="#"><span>Projects</span></a></li>
<li><a href="#"><span>People</span></a></li>
<li><a href="#"><span>Publications</span></a></li>
<li><a href="#"><span>Events</span></a></li>
<li><img id="tabRightFooter" src="images/footer_right.gif"></li>
</ul>
</div>

HTML:

#menu {
	font-size:9pt;
	font-weight:bold;
	line-height:39px;
margin:131px 0 0 223px;
	margin-bottom:0px; /*margin between menu and rest of page*/
	
	}

#menu ul {
	margin:0;
	padding:0px 0px 0px 0px;
	list-style:none;
	}

#menu li {
	display:inline;
	margin:0;
	}

#menu li.active {
	margin:0;
	float:left;
	padding:1px 15px 8px 15px;
	background:url("../images/footer.gif") repeat left top;
	color:#FFF;
	background-position:0% -48px;
	}
#menu a {
	float:left;
	background:url("../images/footer.gif") no-repeat left top;
	margin:0;
	padding:0 0 0 0px;
	text-decoration:none;
	}

        	

#menu a span {
	float:left;
	display:block;
	background:url("../images/footer.gif") repeat right top;
	padding:1px 15px 8px 15px;
	margin-right:0px;
	color:#FFF;
	}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu a span {float:none;}

/* End IE5-Mac hack */
#menu a:hover span {
	}

#menu a:hover {
	background-position:0% -48px;
	}

#menu a:hover span {
	background-position:100% -48px;
	}
	* html .nav a { height: 1%; }

	#menu li ul {
		position: absolute;
                width: 100px;
		z-index: 50; /* show the dropdowns above the images */
		top: 170px; /* position the dropdowns a set distance from the top of the image */
		left: -999em;
		list-style: none;
   
		
	}

	#menu li:hover ul { left:auto }

	#menu li li {
		height: auto; /* reset the height and padding set on the IR list items */
                width:auto;
		padding-bottom: 0;
		font-size: 110%;
		border-bottom: 1px solid #FFCC00;
	}

	#menu li ul a {
		padding: 0.25em;
		color: #FF6600;
		background: #FFFFCC;
	}
	#menu li ul a:hover {
		color: #FFFFFF;
		background: #448EB7;
	}

Code (markup):

 

Can you post web url? I need test it with opera and than i could help

 

Hi,

I'm sorry I don't have it on web

 

anyone has any idea

 

Those types of errors are often caused by the PARENT of your relative containers not having "layout" so far as IE is concerned.

Try throwing zoom:1; on both #menu and #menu ul, and see if that fixes it - at the very least it should change where they are being mis-rendered. You might need to toss it on LI too, especially those ones you are making have auto width and height.

When in doubt, throw haslayout triggers at IE6.