CSS pullout menu troubles in IE

[jaelle]

I'm working on a menu that pulls out from the side of the page. It works fine in FF, however, in IE, it does some sort of weird padding thing when you mouse over one of the links in the menu on the side. So far I have had no luck figuring out where this error is coming from.

If someone else would be able to take a second look at this and give me some suggestions, it would be much appreciated.

To see what it is doing, go here and mouse over the sublinks in the ironworker menu.

The CSS used for the menu is below:

/*Side pullout menu*/
#nav {
		background:#394A57;
}
#nav, #nav ul {
		padding: 0 0 3px 0;
		margin: 0;
		list-style: none; 
		float: left;
		width: 168px;	

}
#nav li {
		float: left;
  	position: relative;
		width: 138px;
		margin-left:10px;
}
#nav li ul {
		display: none;
}
#nav li a {
		display:block;
		width: 138px;
		text-decoration:none;
		color:#FFF;
		font: normal 10px/12px Arial,sans-serif;	
		padding: 5px 0 5px 0;
		background:#394A57 url(graphics/current_mnu_background.gif);
}
#nav li a:hover {
		text-decoration:none;
		color:#FF6600;
		font: normal 10px/12px Arial,sans-serif;
}
#nav li ul li a {
		display:block;
		width: 98px;
		text-decoration:none;
		color:#FF6600;
		background:#FF6633 url(graphics/pulloutlistbullet.gif) no-repeat center left;
		font: normal 10px/12px Arial,sans-serif;
		padding: 3px 0px 3px 20px;
}
#nav li ul li a:hover {
		text-decoration:none;
		color:#000000;
		font: normal 10px/12px Arial,sans-serif;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
		display: none;
}
#nav li:hover ul, #nav li.sfhover ul { /*First level submenu*/
		display: block;
		position:absolute;
		left:128px;
		top:0;
}
.link {
    background:#394A57;
}
.sublink {
		padding:5px 8px 5px 0;
		background:#FF6633;
}
/*End side pullout menu*/

 

[Vragabond]

Cannot confirm your claims. Menu works the same on my Mozilla and IE6 and does not show any weird behaviour.

 

[jaelle]

Try clicking on another link (Ex: Band Saws) and then mousing over the links below it. For me it moves the whole menu over maybe 5-10px to the right.

I don't think I'm crazy! ^^; (But I suppose it is possible)

 

[BillyRayPreachersSon]

Time for you to do some debugging, then. What happens if you comment out these lines:

sfEls[i].onmouseover=function() {
   this.className="sfhover";
}

If that stops the problem, then put those lines back in, and remove all CSS referring to the class "sfhover".

If the problem is still no longer happening, then put back the sfhover class CSS 1 line at a time, until you find the one(s) that are causing the issue. Then you have to try and work around them.

Some things to note, anyway:

- The menu positions are way different in IE to Fx
- IE shows the bullet points in the rollover menus where Fx does not
- The word "Fabricating" in your logo is obscured, and is hard to read.
- Your nav consists mainly of images. While it's admirable that you have alt attributes (on some of them), some of those attributes are quite long, and do not fully show (testing in IE with images turned off). Suggest not relying on images for each nav item - it really isn't necessary, IMHO - especially as you're using text for half you menu. Why the inconsistency? You may as well use all text which would be better for so many reasons. If you stay with the images, also consider adding a "title" attribute, with the same text as the "alt" attribute, so that in browsers such as Fx, you see the text when rolling over the image.

Hope this helps,
Dan

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

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

[/tt]