SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    sydney
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    suckerfish drop down Safari problem

    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:

    Code:
     #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:

    HTML Code:
     <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

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    sydney
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •