Drop down menu IE7 – style.css

  • cs00102

    (@cs00102)


    16 years, 7 months ago

    Hi I’m a newbie to web development and this is my first experience with wordpress and really struggling to getting my drop down menus to appear correctly in IE6 &; IE7..In IE7 the drop down menu doesn’t appear correctly and I can’t work out why, works fine in safari!Im stumped! I think I need additional statements but I’ve never done this before and haven’t got a clue where to start.
    Any help would be much appreciated
    Here’s part of the CSS file I’m working with…

    /* Container
    ############################################################################################################## */
    .container { padding: 0px; float: left; width: 655px;}
    .container2 { padding: 0px; margin-left: auto; margin-right:auto; width: 980px;}

    #menucontainer { width: 100%; height: 133px; background:#0DAEE0; position: relative;}

    .linebreakclass { width: 100%; display: block; margin-bottom: 28px; color: #fff;}
    .linebreakclass p { color: #fff;}

    #logocontainer {position: relative; width: 980px; margin-left: auto; margin-right: auto;}
    #sceptrelogo {float: left; margin-left: 8px;}
    .menu {float: left; height:133px; margin-left:auto; margin-right: auto; width: 980px; border: none; padding: 10px 0px 0px 0px;}
    /**/ * html .menu { height: 1%;} /* */
    .menu ul { float:right;}
    .menu li { position: relative; display: inline; float: left; text-transform: lowercase; }
    #home {text-transform: none;}
    .menu li ul li { font-weight: normal; letter-spacing: normal;}
    .menu li a, .menu li a:visited { color:#fff; float: left; padding: 4px 6px 6px 6px; margin-right: 5px;}
    .menu li a:hover { background: #fff; color:#4E9CCE; text-decoration: none; -moz-border-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright:5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius:5px;}
    .menu .current_page_item a, .menu .current_page_item a:visited, .menu .current_page_item a:hover { background: #fff; color:#35383d; -moz-border-radius-topleft: 5px; -moz-border-radius-topright:5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius:5px;}

    .menu .current_page_item .page_item a, .menu .current_page_item .page_item a:visited { background: #def1f9; color:#272d36;}
    .menu .current_page_item .page_item a:hover { background: #fff; color:#0099cc; }
    .menu .social {opacity:0.4;filter:alpha(opacity=40);}
    .menu .social:hover {opacity:1;filter:alpha(opacity=100);}

    /* Menu Functionality */
    .menu ul ul {display: none; position: absolute; z-index: 11; top:28px; opacity:0.95; filter:alpha(opacity=95); -moz-border-radius-bottomleft: 15px; -moz-border-radius-bottomright: 15px; -webkit-border-bottom-left-radius: 15px; -webkit-border-bottom-right-radius: 15px; }
    .menu ul ul ul {position: absolute; top: -45px; left: 100%;}
    .menu ul li:hover ul {background: #fff; padding-top: 5px; _margin-left: -150px;}

    .menu ul li:hover ul li a {color: #000;}
    .menu ul ul, .menu ul li:hover ul ul {display: none;}
    .menu ul li:hover ul, .menu ul ul li:hover ul {display: block;}

    /* Menu Styling */
    .menu ul ul li { border-bottom: #EDFAFD 1px solid; padding: 0px 5px 0px 5px;}
    .menu ul ul li a {line-height: 1em;}
    .menu ul ul li:hover a {background: #EDFAFD;}
    .menu ul ul ul li:hover a {background: #fff;}

Viewing 5 replies - 1 through 5 (of 5 total)
  • esmi

    (@esmi)

    16 years, 7 months ago

    Please don’t post huge chunks of code here. For larger blocks of code, use the WordPress pastebin. It makes life easier for everyone. In this case, a site url that demonstrates the problem is all that’s needed.

    As for getting CSS dropdowns to work properly in IE7/6, good luck. The CSS box model in both browsers is severely borked. Your best option is probably to get it working in the CSS compliant browsers (eg Firefix) and then serve up remedial IE-specific sheets using conditional CSS:

    http://quirm.net/2009/06/29/wordpress-conditional-comment-css/

    Simon Fairbairn

    (@simonfairbairn)

    16 years, 7 months ago

    OK, just so you know, it won’t work at all in IE6. IE6 doesn’t recognise the :hover pseudo-element on anything but the anchor elements (<a> tags) so things like:

    .menu ul li:hover

    won’t work at all.

    Should work in IE7, though. Will take a look at why it’s not working when I get a minute.

    Thread Starter cs00102

    (@cs00102)

    16 years, 7 months ago

    Sorry esmi, your right.
    Made my CSS file available at:
    http://wordpress.pastebin.ca/1541465
    Thanks for your time.
    cs00102.

    Simon Fairbairn

    (@simonfairbairn)

    16 years, 7 months ago

    Okie doke, I see what’s happening. Basically, upon hovering the links, the menu opens too far away from the link text. I got it working by changing this:

    .menu ul li:hover ul {background: #fff; padding-top: 5px; _margin-left: -150px;}

    To

    .menu ul li:hover ul {background: #fff; padding-top: 0; margin-top: -10px; }

    This was just on a test site (I don’t have your xhtml, so I had to recreate as best I could), so your mileage may vary.

    It won’t work at all in IE7 quirks mode (as it’s rendering as, basically, IE6), so if this still doesn’t work, then try coming out of quirks mode.

    If it’s forcing you into quirks mode, then there’s probably something up with your doctype declaration. Post a link and I’ll take a look.

    Thread Starter cs00102

    (@cs00102)

    16 years, 6 months ago

    Thanks for your advice! Unfortunately it had no effect,doesn’t work properly in IE7, my drop down menu text is out of line, any new ideas?
    Sorry for the slow reply.
    Thanks,
    cs00102

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Drop down menu IE7 – style.css’ is closed to new replies.