IE Forcing Layout in wp_nav_menu

  • I am not sure what I’m doing wrong: wp_nav_menu layout looks perfect in Chrome, Safari, and Firefox. I cannot get it to layout right in IE – IE forces the list and ignores my images. Not sure what to do.

    Please check it out and let me know if you have any ideas: https://www.christaylorpainting.com

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

  • fix the validation errors and see if that resolves the problem:
    https://validator.w3.org/check?uri=http%3A%2F%2Fwww.christaylorpainting.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
    https://codex.www.ads-software.com/Validating_a_Website

    Thread Starter jeremyhawes

    (@jeremyhawes)

    I’ve been running several of the validation checks this morning. There are some Errors, but they show my browser compatibility as doing good.

    Let me show what I’ve got – maybe that will shed light on something I’m just not seeing.

    <nav class=”mainnavbar”>
    <?php wp_nav_menu(array(‘menu’ => ‘Main Nav Menu’ )); ?>
    </nav>

    —CSS—

    .mainnavbar ul {
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 24px;
    font-family: Calibri, Helvetica, Verdana, Arial, sans-serif;
    font-weight: bold;
    }

    .mainnavbar ul li{
    margin: 0;
    padding: 0;
    width: 210px;
    height: 37px;
    }

    .mainnavbar ul li:nth-child(1) a:link, .mainnavbar ul li:nth-child(1) a:visited {
    display: block;
    padding: 5px 5px 5px 40px;
    background: url(images/b1.png) no-repeat left top;
    color: #fff;
    font-size: 80%;
    text-decoration: none;
    }

    .mainnavbar ul li:nth-child(1) a:active, .mainnavbar ul li:nth-child(1) a:hover {
    display: block;
    padding: 5px 5px 5px 40px;
    background: url(images/b1.png) no-repeat left bottom;
    color: #ff9;
    font-size: 80%;
    }

    –AT THIS POINT I HAVE 5 more NTH-CHILD commands that I’ll leave out–

    Thread Starter jeremyhawes

    (@jeremyhawes)

    A good note to add – IE is not editing anything. It’s not taking of the list-style, it’s not changing the font-style, increasing the font-size, nothing.

    As was said, clearing these issues, especially the first 4 or 5 should help. https://validator.w3.org/check?verbose=1&uri=http%3a%2f%2fchristaylorpainting.com%2f

    BTW, IE9 sees the page fine.

    i assume that IE7 does not understand the :nth-child pseudo class;

    if the menu-ids are not going to change, you could, for instance, try to use:
    .mainnavbar ul li.menu-item-16 a:link, .mainnavbar ul li.menu-item-16 a:visited {
    instead of:
    .mainnavbar ul li:nth-child(1) a:link, .mainnavbar ul li:nth-child(1) a:visited {

    1 = 16
    2 = 14
    3 = 15
    4 = 52
    5 = 54
    6 = 13

    edit:
    i support @kmessinger’s opinion – clearing the validation errors could help; the worst being some code before the doctype declaration, right at the beginning of the code:

    <div id="pagewrap" class="pagewrap">

    move this to its proper place, to after the <body> tag

    Thread Starter jeremyhawes

    (@jeremyhawes)

    I spotted the error there – Put that “PageWrap” on the home.php right before it called the Header.php

    kmessinger said it appeared fine in IE 9 – I’m running IE 9 where it looks like crud. I’ve cleared my cache, but still crud. Is there something else I need to do or I’m missing that will let me view it correctly?

    Thanks for your help guys – I feel closer now – think it might be something in my IE 9 browser… hopefully.

    Thread Starter jeremyhawes

    (@jeremyhawes)

    It was 100% the DOCTYPE – I put a page wrap around it in the Home.php

    Thanks for your help guys – couldn’t have done it (that quick) without ya ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘IE Forcing Layout in wp_nav_menu’ is closed to new replies.