suckerfish drop down Safari problem

[benm]

Hi,

Hoping someone can shed some light on the following problem I am having with Safari using a drop down menu based on son of suckerfish.

In Safari I am gaining an extra 10pixels on the right of the drop down menu items when rolling over them. That extra space also stays behind after mouseout. I have tried changing width and padding settings but to no avail.

The problem menu is here.

CSS for the menu follows:

 #nav, #nav ul {
 	line-height: 1; 
 	font: 11px Arial, Helvetica, sans-serif; 
 	text-transform: uppercase; 
 	float: left; 
 	width: 750px; 
 	background-color: #2461AA; 
 	border-bottom: 1px solid #FFFFFF;}/* all lists */
 
 #nav a {
 	display: block; 
 	color: #FFFFFF; 
 	text-decoration: none; 
 	padding: 5px 7px 5px 5px; 
 	background-color: #2461AA}
 
 #nav a:hover {background-color: #EB7E19;}
 
 #nav li {
 	float: left;}/* all list items */
 
 #nav li ul {
 	position: absolute; 
 	width: 100px; 
 	left: -999em;} /* second-level lists */
 
 #nav li ul li {font-size: 9px}
 
 #nav li ul a {width: 100px; border-top: 1px solid #FFFFFF;}
 
 #nav li:hover ul, #nav li.sfhover ul {left: auto;}
 /* lists nested under hovered list items */

HTML snippet:

 <div id="navcontainer">
 <ul id="nav">
 	<li><a href="#">Company</a>
 		<ul>
 			<li><a href="../company/compview.php">overview</a></li>
 
 etc etc...

Can anyone help?

thanks
Ben

[Tyssen]

You've given #nav li ul and #nav li ul a width of 100px but you've also give #nav a padding which means that #nav li ul a will inherit it too so its width should be wider than 100px. Not sure why this would only be affecting Safari though.

[benm]

thanks Tyssen, I have tried removing that padding and also setting #nav li ul a to 0 padding and margin but neither seems to work.

It's really got me stumped and of course the client uses mac/safari so it's crucial.

cheers
Ben