Problems with menu on IE 7.0

  • I have a site https://www.purelymancity.com/ which was designed on WP 1.5.1.3 last year.

    On IE 7.0 the menu bar displays vertically and blocks out half the page.

    This is a section of the code from layout.css in Themes that seems connected to the problem:

    /* navigation
    ————————————————–*/
    #navigation {
    height:2.7em;
    line-height:2.7em;
    position: relative;
    margin:0em auto;
    z-index:20;
    }
    #navwrap {
    display:table; /* ignored by IE */
    padding:0;
    list-style-type:none;
    white-space:nowrap; /* keep text on one line */
    }

    * html #navwrap {
    display:inline-block; /* for IE only */
    width:1px; /* IE will expand to fit navigation width */
    padding:0 2px; /* fix bug in IE for border spacing */
    }
    #navwrap li {
    display:table-cell; /* ignored by IE */
    }
    * html #navwrap li {
    display:inline; /* for IE only */
    }
    #navwrap a, #navwrap a:visited {
    display:block; /* for all browsers except IE */
    padding:0 .7em;
    font-size:0.8em;
    text-transform:uppercase;
    border-right:1px solid #ffffff; /* add a 1px white border to the right of items */
    text-decoration:none;
    margin-bottom: -1px;
    }
    * html #navwrap a, * html #navwrap a:visited {
    display:inline-block; /* for IE only */
    margin:0 -2px; /* to correct an IE border width bug */
    }

    .lefted {margin:0 auto 0 0;}
    .centered {margin:0 auto;}
    .righted {margin:0 0 0 auto;}

    }

    * html #navigation a {width:1%;} /* see https://www.positioniseverything.net/explorer/escape-floats.html */

    #navwrap {
    text-align: center;
    margin: 0em auto;
    /*width:800px;
    border-left: 1px solid #ffffff;
    padding-left:20px;

    the above pseudo centers the nav. not really cause the width is inaccurate*/

    }

    The site was designed for me, and I’m still picking up the basics of WP, so any suggestions would be greatly appreciated.

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

  • Well at first glance I can tell that IE is treating your menu as a bulleted list — which is what the

    • attribute was designed for — rather than the table menu which the developer had in mind. I’m no CSS genius by far, but I’ve never seen a table based on
    • — I’m sure others have.

      But in short, I think by using the

    • attribute, which was created to make VERTICAL lists, and trying to force it to make a HORIZONTAL one, is tricky and will always be a problem.

      I’m sure someone here can come up with a fix, but if it was me, I’d rather dump the entire

    • – based approach and come up with a simpler horizontal table approach.

      All those “for IE only” and “ignored by IE” comments are evidence of trouble. If I were a better CSS guy, I’d whip an alternative up for you quick. Don’t think I can manage it myself, though.

    Sorry, everywhere I typed < li > above, it corrupted my post.

    Here is a guy using the same kind of menu as you; maybe you can look at his code:

    https://pschmid.net/index.php

    EpsteinLlewellyn: any time you need to include code tags and have them display properly, you need to surround them with “backticks” – that oddball-looking little symbol underneath the tilde (~) on the key to the left of the numeral 1 key (on windows/US keyboards – placement will vary depending on keyboard….)

    Yes, thanks, vkaryl. I’m new here and learned that a few minutes AFTER I posted. Sorry. But thanks for the heads up.

    Yup, that’s about how it happened to me back when too…. be so much easier if the normal BBCode tags like [code][/code] etc. worked on this forum….

    Thread Starter andy_m

    (@andy_m)

    Sorry, been away a couple of days so I’ve only just read your replys.

    Thanks for your suggestions, Epstein. I’ll take a look at that code but this might be a job for a better man than me.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Problems with menu on IE 7.0’ is closed to new replies.

Tags