SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Cranston, RI
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help me get my CSS Drop Down to work in IE/Mac

    Hi,

    I have developed a drop down nav menu that uses CSS and the code is mostly pulled from this article:
    http://www.alistapart.com/articles/horizdropdowns/

    I have customized it a bit to fit within the site I am developing. The main problem is it isn't working in IE for the Mac. I have seen other CSS Drop Down menus that work on IE/Mac, but can't figure out where I'm going wrong with mine.

    You can view the menu at http://216.150.222.139/templates/navmenu_esta.htm

    And here are the styles being used:
    /* nav menu */
    .navHead {
    font-weight: bold;
    }
    .nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 145px;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 9pt;
    color: #CC0000;
    display: block;
    position: relative;
    }
    .nav ul li {
    display: block;
    position: relative;
    }
    .nav li ul {
    position: absolute;
    left: 145px;
    top: 4px;
    display: none;
    background:#fff;
    text-align: left;
    font-variant: normal;
    text-transform: none;
    }
    .nav ul li a {
    display: block;
    text-decoration: none;
    color: #CC0000;
    background: #fff;
    padding: 2px;
    font-variant: normal;
    text-transform: none;
    }
    .nav ul li a:hover {
    color: #758FAC;
    font-variant: normal;
    text-transform: none;
    }
    /* Fix IE. Hide from IE Mac \*/
    * html .nav ul li { float: left; height: 1%; }
    * html .nav ul li a {
    height: 1%;
    font-variant: normal;
    text-transform: none;
    }
    /* End */
    .nav li:hover ul, li.over ul {
    display: block;
    font-variant: normal;
    text-transform: none;
    font-weight: normal;
    }


    Thanks,
    Sara

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

    It seems to work in my ie5 mac. The mainmenu jumps a little bit but its basically working.

    What was the exact problem you were having?

    Paul

  3. #3
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Cranston, RI
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thank you so much for your reply.
    Another user I was working with on this menu was finding that the About ESTA menu item (the first one) wasn't aligned properly with the other items, the Industry History Proj. item would wrap to the next line instead of staying to one line, and that when she would mouse over an item it would turn from mixed case to all caps.

    Are you seeing any of those things in addition to the jumping? Any ideas for how to keep the items from jumping? I'm guessing it's a positioning thing.

    Thanks again,
    Sara

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

    No I don't get all the above problems on My ie5.1 mac os9.1. I get the jumping text on hover and the word wrap on hover.

    The word wrap can be fixed with:
    Code:
    .nav ul li {
    display: block;
    position: relative;
    white-space:nowrap;
    }
    The text jumping on hover seems to be because the padding (and other properties) in .navlink seem to be inherrited into the list items for no apparent reason.

    Whether the word link is causing problems in mac as it may be a reserved word (I don't know) but it seems its treating .navlink as .nav. If you change .navlink to .nvlnk then it seems to work ok.

    very strange but it may help

    Paul

  5. #5
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Cranston, RI
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Thank you, thank you!
    I will apply those fixes and have my other Mac user double check it for me.
    I really appreciate your help!

  6. #6
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Burlington, VT
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excuse me while I build upon the initial question with a question of my own.

    I have also recently implemented a CSS-based drop down menu for my boss based upon the Son of Suckerfish Menu technique (http://www.htmldog.com/ptg/archives/000050.php). Everything works great except for the fact that the drop down menu hides behind form elements.

    This is a serious problem because the design calls for a form at the top of every page directly under the main navigation.

    I know this has been probably been discussed at length before, but after hours of searches I have not been able to find an answer. I have heard rumors that you have to use javascript to hide the form elements any time you roll over the navigation.

    Can anyone please help a stressed out individual with a strict deadline and point me to some reference or give me some guidance on this subject? It would be much appreciated. Thank you so much in advance!

  7. #7
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Cranston, RI
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm also going to chime in with an added question on this.
    My Dreamweaver client seems to not want to play nicely with this CSS and when it is implemented on a page, if I am working in the page view and try to scroll down, the page just blurs and repeats whatever is at the top of the page.

    The code view works fine, but the page view is messed up and unusable. I have downloaded the latest updates for my version of the product, but that hasn't helped.

    I have narrowed it down to that it has something to do with the positioning in the following class:

    .nav ul li {
    display: block;
    position: relative;
    white-space:nowrap;
    }

    If I remove the positioning item from this, then Dreamweaver acts fine again. Of course, then my menu is broken.

    Any ideas?
    Thanks!

  8. #8
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Cranston, RI
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    webodyssey -
    I may be giving you something obvious here, but have you tried applying a z-index to your drop down? This should make it layer over everything on the page.

    Try z-index: 100; (which is way higher than you probably need it to be, but a safe bet).

    Other than that, I'm not sure.

  9. #9
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Cranston, RI
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Re: Dreamweaver problem

    I figured it out. Dreamweaver was being very strict about applying top and left values when using position:relative;

    so the class now looks like:

    .nav ul li {
    display: block;
    position: relative;
    top: 2px;
    left: 0px;
    white-space:nowrap;
    }

    It works great (still waiting for confirmation on the IE/Mac interface) and is usable again in Dreamweaver.

  10. #10
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Burlington, VT
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    saraloubetts -

    I appreciate your idea, I had originally thought the same thing - unfortunately it just never is that easy, is it?

    "The z-index CSS property specifies in which sequence HTML elements may be drawn when multiple elements occupy the same space in a window. This property is useful for rendering HTML elements, CSS styled layers and CSS menus when an overlapping preference is required."

    Unfortunately the catch in with the z-index value is that all of the windowed elements (such as forms) will put themselves on top of all of the windowless elements (such as nav items), but they will respect the z-index sequence among them. To quote another website - "It's almost like windowed and windowless elements are drawn on 2 separate canvases in a browser window, making them completely independent of each other."

    I've heard javascript is the way to go, but I have had trouble finding a solution. Crunch time is upon me.

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

    As you have found out some form elements are window controls and not subject to z-indexing.

    See this thread for some possible solutions.

    http://www.sitepoint.com/forums/show...ht=menu+select

    Paul

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    My Dreamweaver client seems to not want to play nicely with this CSS and when it is implemented on a page, if I am working in the page view and try to scroll down, the page just blurs and repeats whatever is at the top of the page.
    DW doesn't interpret css correctly in design view which is why I only use it in code view and then preview in the browser to see what it looks like. DWMX2004 is much better but it still can't handle a lot of advanced positioning. Some things you can get to work as you found out but i wouldn't try to change code just so that you can see it in DW's design view.

    Paul

  13. #13
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Cranston, RI
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    As you have found out some form elements are window controls and not subject to z-indexing.

    See this thread for some possible solutions.

    http://www.sitepoint.com/forums/show...ht=menu+select

    Paul
    Thanks!
    I'm probably going to run into this too...

    This is the first time I have posted to a forum for help and gotten a good response.

    Thanks guys!


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
  •