CSS Dropdown menus and IE…help?

  • markjbennett · Member ·

    Alright,
    So I took a theme, stripped it down, and built it back up. What I have is
    http://johnnyruth.com.wedodns.com/index2.php/

    Never mind the links not working. I have an index.html construction page thrown up for now which is throwing off the links. The problem is, (surprise!) Internet Explorer not meshing well with my CSS dropdown menus. It works great in Firefox and fine in Safari, but oh no, not in IE.

    I am aware in my css that I have some doubles of properties (ie #nav ul and ul.nav). I thought about taking them out but it just works in 2 of the 3 browsers and it says it’s complaint…but if it makes it easier to debug, I’ll probably combine them to make the code cleaner (if I need too).

    So what I need is a solution to this without chopping up my code too much. I have it pretty lean and it’s compliant (minus a few warnings..), but I have no idea what do to. Can anyone help?
    Thanks

    CSS CODE BELOW
    ———————————-

    /*
    Theme Name: JR1
    Theme URI: http://www.johnnyruth.com.wedodns.com/index2.php/ (TEMP)
    Description: /”>This theme was modded from another theme for a light use, minimalistic style for small boutiques, shops and personal use.
    Version: 0.9
    Author: Mark Bennett
    Author URI:

    This theme was modified/designed by Mark Bennettt.
    */

    body { font-family:Arial, Helvetica, sans-serif; font-size:12px; background:#ffffff; color:#666; }
    #wrap { width:800px; margin:10px auto; padding:0; }
    #banner { width: 800px; height: 50px; padding:0; background: url(‘images/jrlogo_header.gif’) no-repeat top; background-position: right; margin: 15px 0px; }
    a:hover { text-decoration:none; color:#000; border:none; }
    #box { background:#fff; width:800px; table-layout:fixed; margin:0 auto; padding:0; }
    #top { /* This is the colour of the background the whole length of the search box line (from left to right) */ /* background:#f1efe7; */ height:26px; line-height:26px; margin:0 auto; padding:0 5px; }
    #header { background:#666666; /* This is the height of the grey banner box */ height:125px; line-height:26px; margin:5px auto; padding:0 5px; text-align: right }
    #header h1.blogtitle { font-family:Arial, Helvetica, sans-serif, Serif; color:#fff; font-size:30px; text-transform:uppercase; margin:0; padding:20px 0 0; text-align: right }
    #header h1.blogtitle a:hover { text-decoration:none; color:#fff; border:none; }
    p.description { color:#fff; font-size:12pt; margin:0; padding:0; }
    .entry { background:#fff; line-height:19px; text-align:justify; overflow:hidden; margin:5px auto; padding:0 5px; }
    .entry h2 { font-family: Arial, Helvetica, sans-serif; font-size:14px;font-weight:700; }
    .entry a:hover { text-decoration:none; color:#000000; border:none; }
    #tophome { width:250px; float:left; text-align:left; margin:0; padding:0; }
    #tops { width:150px; float:right; text-align:right; margin:0; padding:2px 0 0; }
    #searchform { height:26px; line-height:26px; float:right; margin:0; padding:0; }
    #searchform #s { font-size:8pt; width:120px; margin-right:2px; }
    #searchform #submit { font-size:8pt; }
    input#s { color:#666; border:1px solid #cbcbcb; background:#fcfcfc; }
    .alignright { float:right; }
    .alignleft { float:left; }
    blockquote { padding-left:20px; border-left:5px solid #ddd; margin:15px 30px 0 10px; }
    blockquote cite { display:block; margin:5px 0 0; }
    .comments h3 { font-family: Arial, Helvetica, sans-serif; font-size:14px; font-weight:700; padding-top:10px; }
    /* I’m not really sure about this line..It was from the last theme I modified by Bob. Sorry Bob : / */ /* .bobcomment :hover { background:#f8f8f3; } */
    ol.commentlist { list-style:none; margin:0 0 1px; padding:0; }
    ol.commentlist li { list-style:none; margin:0; padding:13px 13px 1px; }
    ol.commentlist li.commenthead { list-style:none; margin:0; }
    ol.commentlist li.commenthead h2 { margin:0; }
    textarea { color:#666; width:80%; border:1px solid #cbcbcb; margin-bottom:0.6em; background:#fcfcfc; margin-top:2px; padding:3px; }
    #footer { height:26px; line-height:26px; clear:both; margin:0 auto; padding:0 5px; }
    a:link,a:active,a:visited { text-decoration:none; color:#000; border:none; }
    a:hover { text-decoration:none; color: #000000; }
    #header h1.blogtitle a:link,#header h1.blogtitle a:active,#header h1.blogtitle a:visited { text-decoration:none; color:#fff; border:none; }
    /* This line for links effects the body links */ .entry a:link,.entry a:active,.entry a:visited { text-decoration:none; color:#000; border:none; }
    .entry a:hover { text-decoration:none; color:#666; border:none; }
    /* I’m not really sure about this line..It was from the last theme I modified by Bob */ /* .end,.bobcomment { border-bottom:1px #eeede0 solid; } */
    input#url,input#author,input#email { color:#666; width:50%; border:1px solid #cbcbcb; margin-bottom:0.6em; background:#fcfcfc; margin-top:2px; padding:3px; }

    #nav { height:26px; line-height:26px; /* This is the line below the links */ /* border-bottom:1px #ccc solid; */ margin:0 ; padding:0; margin-left: -20px; list-style: none;
    background: #ffffff; }
    ul.nav { height:22px; line-height:22px; float:left; list-style:none; font-size:12px; font-weight:400; /* This makes the Links in the navigation uppercase if turned on */
    /*text-transform:uppercase; */ margin:0; padding:3px 0 0; }
    ul.nav li { float:left !important; list-style-type:none; margin:0; padding:0; }
    ul.nav li a,ul.nav li a:link,ul.nav li a:visited { color:#000; float:left; display:block; padding:0 5px; }
    ul.nav li a:hover,ul.nav li a:active { background:#fff; color:#000; text-decoration:none; }
    ul.nav li.current_page_item a { text-decoration:underline; color:#000; /* background:#fff; */ }
    ul.nav li ul { float:left; margin:0; padding:0; }
    .navigation { display:block; text-align:center; margin-top:10px; margin-bottom:10px; }

    /*menu */

    #nav ul {
    margin: auto;
    padding: 0;
    height: 1em;
    background: #ffffff;
    }

    #toolbar form {
    margin: 0;
    padding: 0.1em 2em 0.1em 0em;
    height: 1em;
    }

    #toolbar input {
    margin: 1px;
    }

    /* This one below is for the hover color on the menu links. The one below it is the color of just the normal menu links without hover */
    #nav a:hover { color: #666; }

    #nav a {
    display: block;
    color: #000;
    background: #fff;
    text-decoration: none;
    padding: 0.1em 2em;
    }

    #nav li {
    float: left;
    padding: 0;
    border: 1px solid #fff;
    border-width: 1px 0;
    }

    /* This code below is for the drop menu section text */
    #nav li ul {

    position: absolute;
    left: -999em;
    height: auto;
    width: 2em;
    font-weight: normal;
    margin: 25px; /* This one affects the vertical space it moves down from the parent link */
    list-style: none;
    }

    #nav li li {
    padding-right: 1em;
    width: 13.4em;
    border: 0px;
    }

    #nav li ul a {
    width: 12em;
    w\idth: 9em;
    }

    /* This one below is how far the sub menu of the sub menu comes off (how far horizontally from the left text) */
    #nav li ul ul {
    /* The below margin is written in CSS Shorthand. The first 0em is for vertical spacing, and the last one is for horiztonal */
    margin: 0em 0 0 10em;
    }

    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em;
    }

    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;
    color:#000;
    }

    #nav li:hover, #nav li.sfhover {
    color:#000;
    }

    /* end menu */

  • markjbennett · Member ·

    okay, I’ve narrowed the left to right movement down to this line:

    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;
    color:#000;
    }

    —–

    With the left: auto being the controller. If I take out left, the dropdown menu disappears…

    I’m going to keep posting any progress since it may speed things up and also help someone else.

  • rosclarke · Member ·

    Do you have a wp.com blog? That link looks like it’s going to a commercial site which isn’t allowed on wp.com If you’re using wp.org software, you need to head over to their forums. These are only for wp.com blogs.

  • markjbennett · Member ·

    Yeah, it’s a commercial site I’m designing…so no support here if I’m using WP on my own server? I’ll have to checkout wp.org.
    Thanks

  • rosclarke · Member ·

    Yes, that’s exactly right. These forums offer no support for wp.org blogs hosted elsewhere.

  • jemmo · Member ·

    Theme Name: JR1
    Theme URI: http://www.johnnyruth.com.wedodns.com/index2.php/ (TEMP)
    Description: /”>This theme was modded from another theme for a light use, minimalistic style for small boutiques, shops and personal use.
    Version: 0.9
    Author: Mark Bennett
    Author URI:

    This theme was modified/designed by Mark Bennettt.
    */

    body { font-family:Arial, Helvetica, sans-serif; font-size:12px; background:#ffffff; color:#666; }
    #wrap { width:800px; margin:10px auto; padding:0; }
    #banner { width: 800px; height: 50px; padding:0; background: url(‘images/jrlogo_header.gif’) no-repeat top; background-position: right; margin: 15px 0px; }
    a:hover { text-decoration:none; color:#000; border:none; }
    #box { background:#fff; width:800px; table-layout:fixed; margin:0 auto; padding:0; }
    #top { /* This is the colour of the background the whole length of the search box line (from left to right) */ /* background:#f1efe7; */ height:26px; line-height:26px; margin:0 auto; padding:0 5px; }
    #header { background:#666666; /* This is the height of the grey banner box */ height:125px; line-height:26px; margin:5px auto; padding:0 5px; text-align: right }
    #header h1.blogtitle { font-family:Arial, Helvetica, sans-serif, Serif; color:#fff; font-size:30px; text-transform:uppercase; margin:0; padding:20px 0 0; text-align: right }
    #header h1.blogtitle a:hover { text-decoration:none; color:#fff; border:none; }
    p.description { color:#fff; font-size:12pt; margin:0; padding:0; }
    .entry { background:#fff; line-height:19px; text-align:justify; overflow:hidden; margin:5px auto; padding:0 5px; }
    .entry h2 { font-family: Arial, Helvetica, sans-serif; font-size:14px;font-weight:700; }
    .entry a:hover { text-decoration:none; color:#000000; border:none; }
    #tophome { width:250px; float:left; text-align:left; margin:0; padding:0; }
    #tops { width:150px; float:right; text-align:right; margin:0; padding:2px 0 0; }
    #searchform { height:26px; line-height:26px; float:right; margin:0; padding:0; }
    #searchform #s { font-size:8pt; width:120px; margin-right:2px; }
    #searchform #submit { font-size:8pt; }
    input#s { color:#666; border:1px solid #cbcbcb; background:#fcfcfc; }
    .alignright { float:right; }
    .alignleft { float:left; }
    blockquote { padding-left:20px; border-left:5px solid #ddd; margin:15px 30px 0 10px; }
    blockquote cite { display:block; margin:5px 0 0; }
    .comments h3 { font-family: Arial, Helvetica, sans-serif; font-size:14px; font-weight:700; padding-top:10px; }
    /* I’m not really sure about this line..It was from the last theme I modified by Bob. Sorry Bob : / */ /* .bobcomment :hover { background:#f8f8f3; } */
    ol.commentlist { list-style:none; margin:0 0 1px; padding:0; }
    ol.commentlist li { list-style:none; margin:0; padding:13px 13px 1px; }
    ol.commentlist li.commenthead { list-style:none; margin:0; }
    ol.commentlist li.commenthead h2 { margin:0; }
    textarea { color:#666; width:80%; border:1px solid #cbcbcb; margin-bottom:0.6em; background:#fcfcfc; margin-top:2px; padding:3px; }
    #footer { height:26px; line-height:26px; clear:both; margin:0 auto; padding:0 5px; }
    a:link,a:active,a:visited { text-decoration:none; color:#000; border:none; }
    a:hover { text-decoration:none; color: #000000; }
    #header h1.blogtitle a:link,#header h1.blogtitle a:active,#header h1.blogtitle a:visited { text-decoration:none; color:#fff; border:none; }
    /* This line for links effects the body links */ .entry a:link,.entry a:active,.entry a:visited { text-decoration:none; color:#000; border:none; }
    .entry a:hover { text-decoration:none; color:#666; border:none; }
    /* I’m not really sure about this line..It was from the last theme I modified by Bob */ /* .end,.bobcomment { border-bottom:1px #eeede0 solid; } */
    input#url,input#author,input#email { color:#666; width:50%; border:1px solid #cbcbcb; margin-bottom:0.6em; background:#fcfcfc; margin-top:2px; padding:3px; }

    #nav { height:26px; line-height:26px; /* This is the line below the links */ /* border-bottom:1px #ccc solid; */ margin:0 ; padding:0; margin-left: -20px; list-style: none;
    background: #ffffff; }
    ul.nav { height:22px; line-height:22px; float:left; list-style:none; font-size:12px; font-weight:400; /* This makes the Links in the navigation uppercase if turned on */
    /*text-transform:uppercase; */ margin:0; padding:3px 0 0; }
    ul.nav li { float:left !important; list-style-type:none; margin:0; padding:0; }
    ul.nav li a,ul.nav li a:link,ul.nav li a:visited { color:#000; float:left; display:block; padding:0 5px; }
    ul.nav li a:hover,ul.nav li a:active { background:#fff; color:#000; text-decoration:none; }
    ul.nav li.current_page_item a { text-decoration:underline; color:#000; /* background:#fff; */ }
    ul.nav li ul { float:left; margin:0; padding:0; }
    .navigation { display:block; text-align:center; margin-top:10px; margin-bottom:10px; }

    /*menu */

    #nav ul {
    margin: auto;
    padding: 0;
    height: 1em;
    background: #ffffff;
    }

    #toolbar form {
    margin: 0;
    padding: 0.1em 2em 0.1em 0em;
    height: 1em;
    }

    #toolbar input {
    margin: 1px;
    }

    /* This one below is for the hover color on the menu links. The one below it is the color of just the normal menu links without hover */
    #nav a:hover { color: #666; }

    #nav a {
    display: block;
    color: #000;
    background: #fff;
    text-decoration: none;
    padding: 0.1em 2em;
    }

    #nav li {
    float: left;
    padding: 0;
    border: 1px solid #fff;
    border-width: 1px 0;
    }

    /* This code below is for the drop menu section text */
    #nav li ul {

    position: absolute;
    left: -999em;
    height: auto;
    width: 2em;
    font-weight: normal;
    margin: 25px; /* This one affects the vertical space it moves down from the parent link */
    list-style: none;
    }

    #nav li li {
    padding-right: 1em;
    width: 13.4em;
    border: 0px;
    }

    #nav li ul a {
    width: 12em;
    w\idth: 9em;
    }

    /* This one below is how far the sub menu of the sub menu comes off (how far horizontally from the left text) */
    #nav li ul ul {
    /* The below margin is written in CSS Shorthand. The first 0em is for vertical spacing, and the last one is for horiztonal */
    margin: 0em 0 0 10em;
    }

    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em;
    }

    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;
    color:#000;
    }

    #nav li:hover, #nav li.sfhover {
    color:#000;
    }

    /* end menu */

  • raincoaster · Member ·

    Have you read the thread you posted in?

  • The topic ‘CSS Dropdown menus and IE…help?’ is closed to new replies.