Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow strange happenings with CSS UL Menu

    Hi..

    Im attemting to create a top navigational drop down menu using CSS.. I have been following the AList Apart tutorial

    http://alistapart.com/articles/dropdowns

    The file im working on is located here:
    http://www.rooww.com/demos/drlewinn/...alcleanser.htm
    The part in question is the Top Navigational menu, specifically "our products" and "skincare for you" drop downs..

    the CSS file here:
    http://www.rooww.com/demos/drlewinn/files/style.css

    The menu works fine in firefox & netscape.. however in IE on the first rollover after page load the box/border around the items is cut off and I have tried extensively to work out why to no avail.. On the mac platform using safari or IE there are some major positioning errors..

    This is the problem I have on XP with IE 6.. Borders cut off...


    any thoughts would be greatly appreciated...
    Last edited by aztechnician; 07-07-2005 at 06:13 AM.

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Louisville, KY
    Posts
    279
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Something is overlapping something that IE doesn't like.

    Code:
    topNav ul {z-index:1}
    Try the code above, it should make your menu appear on top of everything else.

  • #3
    New to the CF scene
    Join Date
    Apr 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for your help but that didnt solve the problem.. In dreamweaver I set the z index for the menu layer at the top of everything else before with no change of effect in IE. also tried the code you suggest:

    Code:
    topNav ul {z-index:1}
    but it should be this yeah? ..with the #?

    Code:
    #topNav ul {z-index:1;}
    and does this set the z-index to 1? isnt that at the bottom? I also tried to set it to 1000:

    Code:
    #topNav ul {z-index:1000;}
    still no action..

    One strange thing is that this only occurs on the first rollover of each menu item, after this first rollover the rest of the interactions produce the desired effect... any ideas on why this is happening would really help.. im having lots of problems finding a workaround to this problem...

    thanks for your help..


  •  

    Posting Permissions

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