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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Horizontal Nav Bar Staggered in IE8

    Hope someone can help. I have a ul nav bar that appears fine in earlier versions of IE, but staggered in IE8. It also appears fine in other browsers (Safari, Firefox) ... When I played with the padding (removed padding from .menu a and .menu :visited) it was no longer staggered in IE8, but was too skinny and the drop downs didn't stay down to click. I would be sooo grateful if anyone had any ideas on a fix! (Here is the site if you'd like to see it live)

    CSS:
    [CODE]
    /* remove the bullets, padding and margins from the lists */
    .menu ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;

    }
    /* make the top level links horizontal and position relative so that we can position the sub level */
    .menu li{
    float: left;
    position: relative;
    z-index: 100;

    }

    /* use the table to position the dropdown list */
    .menu table{
    position:absolute;
    border-collapse:collapse;
    z-index:80;
    left:-1px;
    top:25px;
    }

    /* style all the links */
    .menu :visited {
    display: block;
    font-size: 12px;
    width: 159px;
    padding: 7px 0;
    color: #000000;
    background: url('../../../images/bluebutton.jpg') repeat-x;
    text-decoration: none;
    margin-right: 1px;
    text-align: center;
    }
    .menu a {
    display: block;
    font-size: 12px;
    font-weight: bold;
    width: 159px;
    padding: 7px 0px;
    color: #000000;
    background: url('../../../images/bluebutton.jpg') repeat-x;
    text-decoration: none;
    margin-right: 1px;
    text-align: center;
    }
    /* style the links hover */
    .menu :hover{
    color: #000000;
    background-image: url('../../../images/ltbluebutton.jpg');
    }

    /* hide the sub level links */
    .menu ul ul {
    visibility:hidden;
    position:absolute;
    width:159px;
    height:0;
    }
    /* make the sub level visible on hover list or link */
    .menu ul a:hover ul{
    visibility:visible;
    }
    .menu ul li:hover ul{
    visibility:visible;
    }
    [CODE]

    and the HTML:
    [CODE]
    <div class="menu">
    <ul>
    <li><a href="../index.htm">Home<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]></a><![endif]--></li>
    <li><a href="../katybio.htm">About Us
    <span class="style1">▼</span><!--[if IE 7]><!--></a><!--<![endif]-->
    <table>
    <tr>
    <td>
    <ul>
    <li><a href="../katybio.htm">Katy's Bio</a></li>
    <li><a href="../birth_special_deliveriez.htm">Special Deliveriez</a> </li>
    </ul>
    </td>
    </tr>
    </table>
    <!--[if lte IE 6]></a><![endif]--></li>
    <li><a href="../friends.htm">Friends of the Family<!--[if IE 7]><!--></a><!--<![endif]-->
    <table>
    <tr>

    </tr>
    </table>
    <!--[if lte IE 6]></a><![endif]--></li>
    <li><a href="../friendlyfolder_advertisers.htm">Friendly Folder
    <span class="style1">▼</span><!--[if IE 7]><!--></a><!--<![endif]-->
    <table>
    <tr>
    <td>
    <ul>
    <li><a href="../friendlyfolder_advertisers.htm">Friendly
    Folder Fun</a></li>
    <li><a href="../friendly_folders.htm">Who's Friendly in SWFL?</a></li>

    </ul>
    </td>
    </tr>
    </table>
    <!--[if lte IE 6]></a><![endif]--></li>
    <li><a href="../contact.aspx">Contact Us<!--[if IE 7]><!--></a><!--<![endif]-->
    <table>
    <tr>

    </tr>
    </table>
    <!--[if lte IE 6]></a><![endif]--></li>
    </ul>
    </div>

    [CODE]

  • #2
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, found a temporary work around, but not an actual fix. Placing this just below the <head> tag causes the site to emulate IE7 on IE8:

    [CODE]
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    [CODE]

    But if anyone knows of an actual fix, I'd appreciate it!


  •  

    Posting Permissions

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