Results 1 to 10 of 10

Thread: CSS Problem - Suckerfish Dropdown - Firefox

  1. #1
    Web Extraordinaire
    Join Date
    Aug 2004
    Posts
    301
    Thanks
    0
    Thanked
    0 times in 0 posts

    CSS Problem - Suckerfish Dropdown - Firefox

    Hi,

    I have just add the CSS Suckerfish drop down menu seen here: http://www.alistapart.com/articles/dropdowns

    All is well apart from the drop down in firefox it drops to much so i cannot see it which is winding me up to know end as you can imagine. I have been trying to solve this for a while but think i have been looking at it too long so over to you guys any ideas?

    Hover over services / products
    http://www.seamlessgraphics.co.uk/new/

    Try it on IE and on firefox to see what i mean.

    This is the CSS Code:

    Code:
    ul {
      padding: 0;
      margin: 0;
      list-style: none;
      }
      
    li {
      float: left;
      position: relative;
      width: 8em 0;
      margin:0px;
      padding:0px;
      }
      
    li ul {
      display: none;
      position:absolute; 
      top: 1px;
      left: 0;
      }
    
    li > ul {
    	top: auto;
    	left: auto;
    	}
    	
    li:hover ul, li.over ul{ display: block; }
    
    
    #nav a {
    	font-weight: normal;
    	color:#CCCCCC;
    }
    
    #nav a {
    	text-decoration: none;
    }
    
    #nav li li a {
    
    	font-weight: normal;
    	color: #fff;
    	padding:0px;
    	font-size:0.7em;
    }
    
    #nav li li a:hover {
    
    
    
    }
    I believe the fault lies here:

    top: 1px;

  2. #2
    Bigger than Jesus Norky's Avatar
    Join Date
    Feb 2005
    Posts
    1,579
    Thanks
    1
    Thanked
    8 times in 8 posts
    It works for me in FF 1.5, only the text is white and has no background so it's hard to see

    li:hover ul, li.over ul{ display: block; background: #000000; }

    try that

  3. #3
    Web Extraordinaire
    Join Date
    Aug 2004
    Posts
    301
    Thanks
    0
    Thanked
    0 times in 0 posts
    That did not seem to work either have a look a have applied it.

  4. #4
    Registered+ Zathras's Avatar
    Join Date
    Jul 2003
    Location
    Canary Wharf/Richmond
    Posts
    1,454
    Thanks
    13
    Thanked
    7 times in 4 posts
    It's your padding in the styles.css and styles_green.css on the ul element

    Code:
    #nav ul {
    	margin:0;
    	padding:15px 0 0 0;
    	font-size:110%;
    	text-align:left;
    }
    Remove the 15px padding here or override it explicitly to 0 elsewhere.

    Firefox and the DOM inspector/Web developer toolkit are invaluable for debugging/editing CSS. Are you using it? Allows you to see what rules are being applied to each element on the page.

  5. #5
    Registered+ Zathras's Avatar
    Join Date
    Jul 2003
    Location
    Canary Wharf/Richmond
    Posts
    1,454
    Thanks
    13
    Thanked
    7 times in 4 posts
    Ah, just looked at it in IE and realised what you wanted... hmm... all I did was solve the top padding issue. I'll have a gander at it later on and see what's wrong.

  6. #6
    HEXUS.net Webmaster
    Join Date
    Jul 2003
    Location
    UK
    Posts
    3,108
    Thanks
    1
    Thanked
    0 times in 0 posts
    Your top level menu isn't wrapped in a <ul> it's wrapped in a div so the inherited styles aren;t being applied. You need to have nested lists if you're using the suckerfish approach

  7. #7
    Gaarrrrr! Dav0s's Avatar
    Join Date
    Aug 2005
    Location
    Bristol
    Posts
    1,442
    Thanks
    1
    Thanked
    3 times in 3 posts
    maybe im being stupid.....but it looks the same in IE and firefox to me ;/

  8. #8
    Web Extraordinaire
    Join Date
    Aug 2004
    Posts
    301
    Thanks
    0
    Thanked
    0 times in 0 posts
    Quote Originally Posted by Davos
    maybe im being stupid.....but it looks the same in IE and firefox to me ;/
    Yea i have just fixed it. Basically with help from Zathras i managed to solve the issue with the menu droping down to much. The only problem is not that you cannot hover over all the drop down selections in fire fox but you can with IE. Maybe this is to do with the comments from Iain? I will have to look further into this again.

    Cheers for everyones help so far.

  9. #9
    Gaarrrrr! Dav0s's Avatar
    Join Date
    Aug 2005
    Location
    Bristol
    Posts
    1,442
    Thanks
    1
    Thanked
    3 times in 3 posts
    yeah i can only hover over the first 2 options....

  10. #10
    HEXUS.net Webmaster
    Join Date
    Jul 2003
    Location
    UK
    Posts
    3,108
    Thanks
    1
    Thanked
    0 times in 0 posts
    despite a CTRL-F5 its still a vertical menu for me in Firefox

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. DVI problem, pc won't start! help needed.
    By snowwolf in forum Graphics Cards
    Replies: 1
    Last Post: 09-04-2010, 04:11 PM
  2. XFX 6800GT Problem
    By nvisage in forum SCAN.care@HEXUS
    Replies: 45
    Last Post: 07-08-2006, 12:28 AM
  3. firefox problem
    By LouG in forum Software
    Replies: 8
    Last Post: 30-06-2004, 09:04 PM
  4. Replies: 20
    Last Post: 18-06-2004, 05:26 PM
  5. divs and CSS
    By Kezzer in forum Software
    Replies: 11
    Last Post: 18-11-2003, 12:51 PM

Posting Permissions

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