SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot janislanka's Avatar
    Join Date
    Sep 2004
    Location
    Lithuania
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE dropdown menu problem

    page
    menu CSS

    The problem is in IE. When I move mouse over th emenu, it shows dropdown, but I can't go to submenu items. It just dissapears.

    I tried other CSS dropdown menu code, and as soon as I used images in menu, it had the same problem. So, what is the deal with that? It's so annoying b/c it works well in Firefox, but hey, it's only 14% of all the world...and the rest go for IE. Any help?

  2. #2
    Twitter - @CarlBeckel busy's Avatar
    Join Date
    May 2004
    Location
    Richmond, VA, USA
    Posts
    819
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wanted to point out that it also doesn't work for anyone with javascript turned off.

    I think the following method degrades better for older browsers, and it should solve your problem with IE as well, with a much smaller script
    http://www.howtocreate.co.uk/tutorials/testMenu.html

    edit: Oops, just noticed the tutorial says you might have problems adapting the one I posted to horizontal style. My bad. It's still worth checking out though, it explains how the menus work pretty well, and I don't see why a few changes wouldn't make it run smoothly as a horizonatal menu.

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

    IE won't display full padding and borders unless position:relative is added which means you are losing focus before you get to the drop down menu.

    Code:
    #menuList1 li a {
    background-color: transparent;
    color: #fff;
    display: inline;
    margin: 0;
    padding: 2px 8px;
    position:relative;
    /* always set margin to '0' */
    	text-decoration: none;
    }
    This comment is wrong (or only half -right ) ):
    Code:
    /* Win/IE5.0 will ignore border and padding if display is 'inline' */
    An anchor is an inline element anyway and declaring it display:inline means nothing. However as I mentioned above IE won't show full padding and borders on inline elements unless position:relative is added.

    For unobtrusive menus see the suckerfish menus that only need js to work in IE.

    Here's my example:
    http://www.pmob.co.uk/temp/drop-down-multi.htm

    There are accessibility issues with drop downs so make sure your site is navigable with js turned off.

    Hope that helps

  4. #4
    SitePoint Member
    Join Date
    Dec 2005
    Location
    Kuala Lumpur, Malaysia
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    Hi regarding the suckerfish drop down menu tutorial, is it possible to make the menu transparent? I tried adding the "filter: alpha (opacity = 90);" for IE and "-moz-opacity: .90;" for Firefox and it only works in Firefox... in IE... the 2nd level menu simply disappears
    Last edited by ylihao; Dec 29, 2005 at 09:49.

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

  6. #6
    SitePoint Member
    Join Date
    Dec 2005
    Location
    Kuala Lumpur, Malaysia
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool yours really work... let me review my script again. Thanks anyway!

  7. #7
    SitePoint Zealot janislanka's Avatar
    Join Date
    Sep 2004
    Location
    Lithuania
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Weird, but I looked in the same problem before. This is referring other code, but the same three lines need to go where you need.

    Code:
    #menuList1 .menu {
      background-color: #769273;
      color: #000;
      border: 1px solid #769273;
      margin: 0;
      padding: 2px;
      /* only set '0' or negative margin */
      /* border  width must be the same on the four sides (in 'px' units) */
      /* padding width must be the same on the four sides (in 'px' units) */
      z-index: 1;
      position: absolute;
      visibility: hidden;
      /* always set position to 'absolute' and visibility to 'hidden' */
    	filter:alpha(opacity=80);
    	opacity: 0.8;
    	-moz-opacity:0.8;
    }

  8. #8
    SitePoint Zealot janislanka's Avatar
    Join Date
    Sep 2004
    Location
    Lithuania
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    also a problem with most menus is that this transparent code makes the whole thing transparent, including text. So, if you want to keep the text normal solid color..you'll need to sweat a bit and redo a bit the code.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    also a problem with most menus is that this transparent code makes the whole thing transparent
    The opacity will do that

    In Ie you could nest an inner element and set it to position relative which stops the text from becoming transparent but other browsers won't follow suit. For other browsers you could use a transparent png instead for the background which will not affect the text.

    However that seems like a lot of work unless the text is very opaque so I'd be inclined to leave it as it is.


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
  •