WordPress.org

Ready to get started?Download WordPress

Forums

IE7 not rendering HTML generated by wp_page_menu (3 posts)

  1. dtgreen
    Member
    Posted 3 years ago #

    Hello Folks,

    I'm just doing some cross browser testing now that I'm launching a site I've been building for a friend's small business. I'm on a Mac, but have been using sites such as IE NetRenderer and BrowserShots to get screens of how the site looks in different browsers on Windows.

    The site is: http://www.icecreamvanhireyorkshire.co.uk. The screenshot I'm basing this on is here: http://www.icecreamvanhireyorkshire.co.uk/misc/IE7-05-06-2011.png

    The code I have in my header is:

    <div id="wrapper" class="hfeed">
    	<div id="header">
    	   <div id="blog-title">
    <span><a href="<?php bloginfo( 'url' ) ?>/" title="Happy Sundaes - Ice Cream Van Hire Yorkshire" rel="home">
    <img src="<?php bloginfo("template_url"); ?>/img/logo.png" alt="Ice Cream Van Hire Yorkshire" /></a></span>
                </div><!-- #blog-title -->
                <div id="tabs">
                  <?php wp_page_menu( 'sort_column=menu_order&exclude=286,292' ); ?>
                </div><!-- #tabs -->
        </div><!-- #header -->
            <div class="seperator"></div>
    	<div id="main">

    The id's 'tabs' and 'menu' don't have any CSS associated with them, and the CSS for the list is:

    #tabs ul {
        display: inline;
        float: right;
        list-style: none outside none;
        margin: 0;
        padding: 0;
    }
    #tabs li {
        display: inline;
        margin: 0;
    }

    I have a feeling something obvious may be staring me in the face, but then again I've only seen the issue replicated in IE7! IE8 and 9 are both rendering that menu perfectly!

    Any advice much appreciated!

    Cheers,
    Dave

  2. Andrei Olsen
    Member
    Posted 3 years ago #

    Remove height from #header (line 25), actually you can remove the whole thing since it's the only property there, and trigger hasLayout in #tabs with zoom:1, since you're already using CSS3.

    #tabs { zoom:1; }

  3. dtgreen
    Member
    Posted 3 years ago #

    Thanks! I knew it was something staring right at me!

Topic Closed

This topic has been closed to new replies.

About this Topic