SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot HardinComp's Avatar
    Join Date
    May 2003
    Location
    Boston, MA
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Tab menu + sub menu = a mess

    I'm working on a redesign of a site and I want to use a tab menu plus a sub menu. The tabs by themselves work great, but once I try to add a submenu it gets all messed up. I read a couple of threads and it just won't work for me. As you can see on the page when I hover over a tab (any except "Home" and "New") the other tabs get pushed to the right and my submenu won't float all the way left. The CSS file is here.

    Also, what's the best way to create a space just below the tabs the same color as my submenu so that if no submenu you will still get the area for a submenu and it won't push the rest of the content down?
    J.M. Hardin
    My blog
    Registered Ubuntu User #10980

  2. #2
    SitePoint Zealot HardinComp's Avatar
    Join Date
    May 2003
    Location
    Boston, MA
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Close, but no cigar

    I did some playing with it thanks to other threads and I got it to work in Firefox and IE, but I need a bar below the tabs. The working version is here, but I need a bar beneath the tabs. I did an attempt, but in IE you can't see the submenu. Any ideas what I'm doing wrong?
    J.M. Hardin
    My blog
    Registered Ubuntu User #10980

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Yoe are using hover on the li items which IE doesn't understand. IE only understands hover on anchors. You are also using the child selector for some of your styles and ie doesn't understand that either. You should look at the suckerfish drop downs (from ala and htmldog) which show how to add unobtrusive dhtml for ie to make the menu work.

    http://www.htmldog.com/articles/suckerfish/

    Heres a menu I did using the js routine that I have cut out of a page I worked on so it may look a bit odd, but it shows the techniques needed. This menu works on most modern browsers and is similar to what you were doing.

    http://www.pmob.co.uk/temp/horizontal-menu-hozsub.htm

    Hope that helps.

    Paul

  4. #4
    SitePoint Zealot HardinComp's Avatar
    Join Date
    May 2003
    Location
    Boston, MA
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the assist Paul.I was trying to get away from using images for the tabs thanks to this article. I got the tabs to work, but my submenu is pretty fubar. I'll put some more time into it in the coming days. Maybe when my brain is clearer I'll be able to get it to work.
    J.M. Hardin
    My blog
    Registered Ubuntu User #10980

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The images just happened to be the example I had handy but the technique for the sub nav is the important part.

    Tabs are pretty easy to do as its basically just manipulating a couple of bg images and there are various ways to go about it

    Paul


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
  •