SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Me again...This time with some link trouble.

    I've modified the ideas in the Suckerfish Dropdowns from ALA to be a menubar down the side, instead of along the top, but I ran into a problem in Mozilla/Firebird where the second level of links disappears as soon as the mouse moves below the first-level link. I had the same problem inIE, but I got it to work, however, the same fix didn't work in Firebird.

    The original code has li:hover ul, li.over ul{ display: block; }, along with a small JS to hack it to work in IE, with the :hover bug. I added li ul:hover li, li ul.over li {display: block; } as well, hoping that once the mouse was moved the second instruction would take over, and it appears to do so in IE, but not Mozilla.

    The Page

    The CSS

    Ugly, I know, but I'd rather have it work, then style it.

    ~DB

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anybody?

  3. #3
    Kitty Lizard reptilianfeline's Avatar
    Join Date
    Aug 2002
    Location
    Somewhere in Cyberspace
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried just to change the possition of the items?
    Reptilian Feline
    | www.reptilian-feline.net | Art | Tutorials | Pets | Music |
    Webdesign the hard way...

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by reptilianfeline
    Have you tried just to change the possition of the items?
    Yes, I have. I had to move them around quite a bit to get them in the right position, and the same problem occured.

    ~DB

  5. #5
    Kitty Lizard reptilianfeline's Avatar
    Join Date
    Aug 2002
    Location
    Somewhere in Cyberspace
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK. Here's the deal. A list is normally one item below the previous, right, and that's what you want. Then you need to place the sub-menu at a distance from the first list so they don't overlap. I took the code from the example, not your page, to see how it was supposed to work. I change a couple of things.

    Here is the original style in the example:
    Code:
    <style type="text/css">
    
    body {
    	font-family: arial, helvetica, serif;
    }
    
    ul { /* all lists */
    	padding: 0;
    	margin: 0;
    	list-style: none;
    }
    
    li { /* all list items */
    	float: left;
    	position: relative;
    	width: 10em;
    }
    
    li ul { /* second-level lists */
    	display: none;
    	position: absolute;
    	top: 1em;
    	left: 0;
    }
    
    li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
    	top: auto;
    	left: auto;
    }
    
    li:hover ul, li.over ul { /* lists nested under hovered list items */
    	display: block;
    }
    
    #content {
    	clear: left;
    }
    
    </style>
    And here is what I changed it to:
    Code:
    <style type="text/css">
    
    body {
    	font-family: arial, helvetica, serif;
    }
    
    ul { /* all lists */
    	padding: 0;
    	margin: 0;
    	list-style: none;
    }
    
    li { /* all list items Removed the float so it will work as a normal list*/
    	position: relative;
    	width: 10em;
    }
    
    li ul { /* second-level lists Changed top to zero and left to 75 px so the submenu is placed correctly*/
    	display: none;
    	position: absolute;
    	top: 0;
    	left: 75px;
    }
    
    li>ul {	top: auto;
    	left: auto;
    }
    
    li:hover ul, li.over ul { 
    	display: block;
    }
    
    #content {
    	clear: left;
    }
    
    </style>
    So... take my version, and change the left possition to suit your menu. Hope it helps
    Reptilian Feline
    | www.reptilian-feline.net | Art | Tutorials | Pets | Music |
    Webdesign the hard way...

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, I got it to work somehow, now I just need to figure out z-index stuff to get it to display in front of everything else.

    ~DB

  7. #7
    Kitty Lizard reptilianfeline's Avatar
    Join Date
    Aug 2002
    Location
    Somewhere in Cyberspace
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Z-index is pretty straight forward. The higher number the more over it is. Set the menu to z-index:2 or somethign and keep the others out of it. I think that should work.
    Reptilian Feline
    | www.reptilian-feline.net | Art | Tutorials | Pets | Music |
    Webdesign the hard way...

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  9. #9
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, at least they are purdy in Mozilla. Argh.

    How do I hide the styling for an entire div from IE, so that other broswers use the right stuff?

    I tried html > #div { } and body > #div { }. Didn't seem to do much.

    ~DB

  10. #10
    Kitty Lizard reptilianfeline's Avatar
    Join Date
    Aug 2002
    Location
    Somewhere in Cyberspace
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are javascripts that links to the right stylesheet depending on browser and/or OS. Make seperate css-files, and put the javascript in the main file to check for browser version before serving the stylesheet.

  11. #11
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    body>div#id{}

    I mean, # is for ID, You knew that, right?

  12. #12
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, div#id.

    I tried body > #id, which didn't work.

    And yes, I do know the # is for id.

    If that doesn't work, I'll look for a script somewhere.

    ~DB


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
  •