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 9 of 9
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    34
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Drop down menu bg opaque in FF but transparent in IE

    I am using a jQuery script for a drop down menu. It works great in FF but in IE you can see the text behind the drop down box. This is the CSS code

    Code:
    /* Dropdown Category Navigation */
    .sf-menu, .sf-menu * {
    margin:0;
    padding:0;
    list-style:none;
    font-family: Verdana, Verdana, Geneva, sans-serif;
    }
    
    .sf-menu {line-height:2.5em;background:transparent;}
    .sf-menu ul {position:absolute;width:10em; /* left offset of submenus need to match (see below) */}
    .sf-menu ul li {width:100%;}
    .sf-menu li:hover {visibility:inherit;/* fixes IE7 'sticky bug' */}
    .sf-menu li {position:relative;}
    .sf-menu a {line-height:2.5em;display:block;position:relative;color:#666;}
    
    .sf-menu li:hover ul,.sf-menu li.sfHover ul {
    border: solid 1px #E3E3E3;
    padding: 0 25px 0 5px;
    background: #F7F6F6;
    top:30px; /* match top ul list item height */
    z-index:150;
    display: inline;
    }
    
    ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul {top:-999em;}
    ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul {left:20em; /* match ul width */top:0;}
    ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul {top:-999em;}
    ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul {left:20em; /* match ul width */top:0;}
    
    .sf-menu {
    width:100%;
    }
    
    .sf-menu a {
    padding: 8px  10px;
    text-decoration: none;
    color: #0F364C;
    } 
    
    .sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/color:#0066cc;}
    .sf-menu li {background:transparent;color:#666; }
    .sf-menu li li {background: #F7F6F6;}
    .sf-menu li li li {background:#fff;}
    
    .sf-menu a:hover, .sf-menu a:active {
    color: #06202F;
    }
    Does anyone have any idea what might be causing this?

    Thanks

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    a link would be handy but i imagine its something to do with:

    Code:
    .sf-menu {line-height:2.5em;background:transparent;}
    .sf-menu li { background:transparent; }

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    t works great in FF but in IE you can see the text behind the drop down box.
    We can't see any effect from some CSS code. Please post a link to your page.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    Jun 2009
    Posts
    34
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by met View Post
    a link would be handy but i imagine its something to do with:

    Code:
    .sf-menu {line-height:2.5em;background:transparent;}
    .sf-menu li { background:transparent; }
    Yeah I've been messing around with those lines but I'm not having any luck.

    You can see it here on the right in the category section http://pixelpiys.com/wordpressmu/wor...mu/subteknium/

    Thanks for helping

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Try
    Code:
    .sf-menu li {/* position:relative; */}
    
    
    .sf-menu li:hover ul,.sf-menu li.sfHover ul {
    border: solid 1px #E3E3E3;
    padding: 0 25px 0 5px;
    background: #F7F6F6;
    top:auto; 
    z-index:150;
    display: inline;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    jondouglas (12-31-2009)

  • #6
    New Coder
    Join Date
    Jun 2009
    Posts
    34
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Try
    Code:
    .sf-menu li {/* position:relative; */}
    
    
    .sf-menu li:hover ul,.sf-menu li.sfHover ul {
    border: solid 1px #E3E3E3;
    padding: 0 25px 0 5px;
    background: #F7F6F6;
    top:auto; 
    z-index:150;
    display: inline;
    }
    Thanks abduraooft! That works perfectly! While I'm here, another thing I've been trying to do is display the drop down inline with the category ( so it appears beside it rather than underneath it and obscuring the categories below it) Could you possibly help me with that? Thanks again.

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Like
    Code:
    .sf-menu li { position:relative; }
    .sf-menu li:hover ul,.sf-menu li.sfHover ul {
    border: solid 1px #E3E3E3;
    padding: 0 25px 0 5px;
    background: #F7F6F6;
    top:0; 
    right:105%;
    z-index:150;
    display: inline;
    }
    ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New Coder
    Join Date
    Jun 2009
    Posts
    34
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Like
    Code:
    .sf-menu li { position:relative; }
    .sf-menu li:hover ul,.sf-menu li.sfHover ul {
    border: solid 1px #E3E3E3;
    padding: 0 25px 0 5px;
    background: #F7F6F6;
    top:0; 
    right:105%;
    z-index:150;
    display: inline;
    }
    ?
    Yeah that's almost it but I wanted it to appear on the right at the end of each word (I tried changing 'right' to 'left' but I would prefer it to appear at the end of each word rather then a set distance from the begining of the div).

    Thanks for your time.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello jondouglas,
    This works in FF -
    Code:
    /* Dropdown Category Navigation */
    .sf-menu, .sf-menu * {
    margin:0;
    padding:0;
    list-style:none;
    font-family: Verdana, Verdana, Geneva, sans-serif;
    }
    
    .sf-menu {line-height:2.5em;background:transparent;}
    .sf-menu ul {
    position:absolute;
    top: 0;
    left: 100px;
    width:10em; /* left offset of submenus need to match (see below) */
    }
    .sf-menu ul li {width:100%;}
    .sf-menu li:hover {visibility:inherit; /* fixes IE7 'sticky bug' */}
    .sf-menu li {position:relative;}
    .sf-menu a {line-height:2.5em;display:block;position:relative;color:#666;}
    It also seems to work fine the way ab suggested, just needs flopped the other way. I'm not sure why the % instead of px setting though...
    Try this in place of the one I posted above -
    Code:
    .sf-menu li:hover ul,.sf-menu li.sfHover ul {
    border: solid 1px #E3E3E3;
    padding: 0 25px 0 5px;
    background: #F7F6F6;
    top:0px; /* match top ul list item height */
    left: 100px;
    z-index:150;
    display: inline;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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