I seem to have hit a stumbling block in my quest to convert my site (http://www.studiox.kxgard3.com) to XHTML and Pure CSS.

The header layout I have works perfectly in IE and Opera (which suits me fine as I only use Opera) but breaks completely for those wretched Firefox users.

Internet Explorer:
http://www.studiox.kxgard3.com/IE.png

Opera 7.51:
http://www.studiox.kxgard3.com/Opera.png

Firefox:
http://www.studiox.kxgard3.com/Firefox.png

As you can see, the menu has totally disappeared in Firefox.

The CSS being used:



BODY{
text-align:center;
margin:0px;
padding:0px;
font: normal 11px Verdana, Arial, Helvetica;
background-color: #DFE4DB;}

#logo{
background: url(../stximages/logo.png) #9BBA51 no-repeat top left;
width: 254px;
height: 125px;
padding: 0px;
margin:0;
border-bottom: 1px solid #557532;
border-left: 1px solid #557532;
border-top: 1px solid #557532;
float:left;
}

#header{
background: url(../stximages/bg-header.png) #9BBA51 repeat-x top left;
height: 125px;
width: 503px;
float: left;
padding: 0px;
margin:0;
border-bottom: 1px solid #557532;
border-right: 1px solid #557532;
border-top: 1px solid #557532;
}

#wrapper {
position:relative;
text-align:left;
width: 760px;
margin: 0 auto;
padding: 0px;
}

#headnav{
height: 28px;
text-align: left;
vertical-align: middle;
color: #FFFFFF;
padding-right: 10px;
width: 750px;
background: url(../stximages/bg-topnav.png) #557532 repeat-x top left;
}

.usermenu{
border: 1px solid #3A5021;
height: auto;
padding: 6px;
margin-top: 6px;
margin-bottom: 6px;
background-color: #FFFFFF;
}

ul.menu{
height: 28px;
width: auto;
margin: 0;
padding: 0;
list-style: none outside;
background: url(../stximages/bg-topnav.png) repeat-x top left;
}

ul.menu a:link, ul.menu a:visited, ul.menu a:active{
color: #F2F5EC;
}

ul.menu li{
float: left;
height: 15px;
width: auto;
margin: 6px 0;
padding: 0 6px 1px;
border-right: 1px solid #F3FFD4;
text-align: left;
}

ul.menu li.last{
border: none;
}


The calling code:

<div id="wrapper">
<!--BEGIN HEADER TABLE-->
<div id="logo">
&nbsp;
</div>
<div id="header">
&nbsp;
</div>
<div style="clear: both"></div>
<div id="headnav">
<ul class='menu'>
<? <EDITED>PHP CODE REMOVED FOR CLARITY</EDITED> ?>
</ul>
</div>


I'm getting pretty miffed with it now as, by my reckoning, it should be working. It's certainly valid XHTML.

Answers on a postcard to....

Many thanks in advance.

This issue has now been successfully resolved.