Since you posted PHP, I’m posting the HTML for everyone else.
<div class="menu_wrapper">
<ul>
<li class="page_item page-item-5"><a href="http://crossfithill.com/?page_id=5" title="Classes"><span>Classes</span></a></li>
<li class="page_item page-item-9"><a href="http://crossfithill.com/?page_id=9" title="Contact"><span>Contact</span></a></li>
<li class="page_item page-item-2"><a href="http://crossfithill.com/?page_id=2" title="Hill Sports Academy"><span>Hill Sports Academy</span></a></li>
<li class="page_item page-item-3"><a href="http://crossfithill.com/?page_id=3" title="What Is CrossFit"><span>What Is CrossFit</span></a></li>
</ul>
</div>
<div style="clear: both"></div>
And the CSS currently on the page is
.menu_wrapper {
float:right;
background:#1b2023 ;
height:65px;
margin1-left:10px;
overflow:hidden;
padding-top:0px;
}
.menu_wrapper ul {
margin:0;
padding:8px 10px 8px;
list-style:none;
}
.menu_wrapper li {
display:inline;
margin:0;
padding:0;
font-family:"Calibri",Arial, Helvetica, sans-serif;
font-size:20px;
color:#fff;
}
* html .menu_wrapper li{
float:left;
}
.menu_wrapper a {
float:left;
margin:0;
padding:0 0 0 6px;
text-decoration:none;
}
.menu_wrapper a span {
float:left;
display:block;
padding:15px 11px 16px 6px;
margin-right:3px;
color:#FFF;
}
* html .menu_wrapper a span {
padding: 15px 11px 16px 6px;
}
/* Commented Backslash Hack hides rule from IE5-Mac \\*/
.menu_wrapper a span {float:none;}
/* End IE5-Mac hack */
.menu_wrapper a:hover span {
}
.menu_wrapper a:hover {
background:url("images/left_cor.jpg") no-repeat left top;
}
.menu_wrapper a:hover span {
background:url("images/right_cor.jpg") no-repeat right top;
}
.clear{
clear:both;
}
yeah, there’s a “margin1” typo in there, that’s not causing anything major though.
Thing is, looking between a Modern Browser and IE7, it looks like IE7 is trying to do it right.
In my Firefox, the logo is left and the menu is right, but the menu isn’t on the same line as the logo. There’s not enough room, so the menu has dropped down.
in IE7, the menu hasn’t but i think it’s scrunched trying to fit in there, making the floated anchors inside all jumbled.
I don’t see the point in floating the spans.
The menu itself doesn’t have Haslayout but the div wrapping it does, but it’s a widthless float filled with floats.
The display: inline etc for the li’s is ok, with the anchors floated… and you don’t need the li’s floated for IE6, you can do this for everyone (I won’t comment on IE/Mac).
All you really need, markup-wise, is this:
<body>
<div id="canvas">
<div id="header">
<p id="logo"><a href="url"><img src="theurl/crossfit_logo.gif" alt="[b]Crossfit Hill[/b]" /></a></p>
<ul id="menu">
<li><a href="url"><span>Classes</span></a></li>
<li><a href="url"><span>Contact</span></a></li>
<li><a href="url"><span>Hill Sports Academy</span></a></li>
<li><a href="url"><span>What Is CrossFit</span></a></li>
</ul>
</div>
<div class="main_contanier" id="main_contanier">
<!-- this div will have [b]clear: both;[/b] on it in the CSS-->
And, to tell the truth, you dont’ need the #header in there at all, but I dunno if you’ll be adding some other bg or whatever to that. If #header isn’t going to hold a bg colour or image, lose it. It’s not doing anything the other boxes can’t just do for you.
Container? You have contanier, which is ok if you spelled it that way in your CSS, but I could assume at some point you’ll spell it correctly by accident and then they won’t match. Careful.
The CSS would be (and this is pseudo-code to show an idea)
#header {
don’t set a static height, that’s asking for trouble when someone does a text-enlarge… your menu is popping out in Firefox!
}
#logo {
float: left;
set a width!! and make sure this width fits with the menu in the header!!!
}
#menu {
float: right;
set a width!!! and make sure this width fits in the header!!
any padding you want, for making more black area visible but padding adds to height and width!
background-color: #000;
overflow: hidden;
}
#menu li {
display: inline;
this statement is only to make IE happy and to stop staircasing;
}
#menu a {
float: left; <– widthless floats means you need to check what width you actually end up with on the screen!
you may want something like whitespace: nowrap OR a min-width to stop any wrapping of text in IE;
your typographic styles etc;
}
#menu a span {
they only need to be set as blocks here, no need to float them.
}
Though actually I’d see if the anchors themselves could hold the bg image. I think they could.
I think your IE7 problem is that you have a widthless float filled with floats scrunched up inside a box that doesn’t actually have enough room for everyone, making them jumbled. Modern browsers are simply dealing with this in a different way. But your code just needs a bit of cleaning up and more careful measurements to ensure everyone actually fits correctly.
When doing this, give the menu the black background and the logo some other obvious background colour (or comment out the logo entirely and give the p (or div if you still want to use a div) a background colour) so you can see where boxes don’t have room.
but could you post (or better yet, put it on your page so we can see it right away) how the page is SUPPOSED to look? I could give it a go. But right now while FF seems to have specifically the black menu area in-line, the whole header looks goofy so I don’t think I’m seeing it in my FF the way you want either.