...

View Full Version : Menu bug in IE7 (WP theme's CSS broken?)



Aludien
05-18-2007, 10:15 PM
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 (http://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.


<!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.


<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! :)

TheShaner
05-18-2007, 10:46 PM
You're correct, it is your CSS.

#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

Aludien
05-18-2007, 10:57 PM
Great, thanks Shane!
Unfortunately it's still not as good looking as in firefox, but yay it's resolved at least!

Awesome. Thanks again.

TheShaner
05-18-2007, 11:08 PM
Np :) But you can fix it still so it looks more like Fx. Take out the background from #menu.

#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

Aludien
05-18-2007, 11:24 PM
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 ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum