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 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2005
    Location
    Sweden
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Menu bug in IE7 (WP theme's CSS broken?)

    Hi there, first of all let me say I tried the WP forums, but got no reply so I thought I'd try here as I believe it has very little to do with it being WordPress and everything to do with it being broken CSS or possibly the PHP? As it works in other browsers I thought it'd be a good idea to assume it's the css...

    www.nathaliewinberg.com is my site, and if you view it in firefox for example there'll be 2 rows in the menu, as it should be. But in IE7 the second row turns into a small grey line and the pages aren't accessible at all. The menu even works fine in IE6 (though it looks a bit different, but at least all the links are there).

    I can't for the life of me figure out what's wrong. I'll post the code in the header first of all, with the doctype and then the relevant code.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    ...
    
    <body>
    <div id="container">
    <div id="wrap">
    <div id="top">
    <h2><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h2>
    <p><?php bloginfo('description'); ?></p>
    </div>
    <div id="menu">
    <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Main Sidebar') ) : else : ?>
    <ul>
    <?php if (is_page()) { $highlight = "page_item"; } else {$highlight = "page_item current_page_item"; } ?>
    <li class="<?php echo $highlight; ?>"><a href="<?php bloginfo('url'); ?>">Home</a></li>
    <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
    </ul>
    <?php endif; ?>
    </div>
    When I view the source in IE, I do see the links. But they aren't displaying.

    Code:
    <div id="menu">
    <ul>
    <li class="page_item current_page_item"><a href="http://nathaliewinberg.com">Home</a></li>
    <li class="page_item"><a href="http://nathaliewinberg.com/?page_id=2" title="Studies">Studies</a></li>
    <li class="page_item"><a href="http://nathaliewinberg.com/?page_id=6" title="Paintings">Paintings</a></li>
    <li class="page_item"><a href="http://nathaliewinberg.com/?page_id=7" title="Watercolour/ink">Watercolour/ink</a></li>
    <li class="page_item"><a href="http://nathaliewinberg.com/?page_id=8" title="Drawings">Drawings</a></li>
    <li class="page_item"><a href="http://nathaliewinberg.com/?page_id=12" title="Sketchbook">Sketchbook</a></li>
    <li class="page_item"><a href="http://nathaliewinberg.com/?page_id=11" title="Photography">Photography</a></li>
    <li class="page_item"><a href="http://nathaliewinberg.com/?page_id=13" title="Misc media">Misc media</a></li>
    <li class="page_item"><a href="http://nathaliewinberg.com/?page_id=14" title="Written">Written</a></li>
    </ul>
    </div>
    The last three ones that is, photography, misc and written.
    Anyone have any idea how to fix this? I've worked weeks to redesign this theme and I really do not want to do it all again with some other theme. Thanks!

  • #2
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    You're correct, it is your CSS.
    Code:
    #menu {
    	width: 100%;
    	height: 31px;
    	background: #CCCCCC url(img/menu_bg.jpg) repeat-x;
    	margin-top: 7px;
    }
    
    #menu ul {
    	list-style: none;
    	font-size: 70%;
    }
    
    #menu ul li {
    	display: inline;
    }
    
    #menu ul li a {
    	font-weight: bold;
    	display: block;
    	float: left;
    	margin-top: 3px;
    	padding:7px 25px 8px 25px;
    	border-right: 1px solid #CCCCCC;
    	background: #CCCCCC;
    }
    First try removing the height restriction or increasing it. IE7 may be shoving the second line underneath because there's not enough room to display below.

    Second, I would float the list item rather than the anchor. So switch the float left to the li.

    Hopefully one or both of those fixes get you up and running in IE7.

    -Shane

  • #3
    New Coder
    Join Date
    Oct 2005
    Location
    Sweden
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great, thanks Shane!
    Unfortunately it's still not as good looking as in firefox, but yay it's resolved at least!

    Awesome. Thanks again.

  • #4
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    Np But you can fix it still so it looks more like Fx. Take out the background from #menu.
    Code:
    #menu {
    	width: 100%;
    	background: #CCCCCC url(img/menu_bg.jpg) repeat-x;
    	margin-top: 7px;
    }
    The background color is not needed since you specify this in your links and thus the 3px margin in between your two lines of your menu will then be white instead of gray. Plus, the background image doesn't even exist, so it's not needed.

    -Shane

  • #5
    New Coder
    Join Date
    Oct 2005
    Location
    Sweden
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    very logical... You're a star Shane, thank you. I realize things like these when they are pointed out to me but it takes me weeks to find it. I code too seldom to get the language to stick properly I suppose


  •  

    Posting Permissions

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