Forum Moderators: not2easy
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.
<No URLs, thanks. See TOS [webmasterworld.com] & Forum Charter [webmasterworld.com]>
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">
</div>
<div id="header">
</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.
Would appreciate some guidenace in this lonely and dark quest.
TIA
[edited by: DrDoc at 4:16 pm (utc) on June 30, 2004]
My suggestion would be to restructure the html and re-style. There are more div's and floats than are absolutely needed. Too many divs make it hard to see what's going on; too many floats are asking for cross-browser nightmares. Try something like this:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>float menu test</title>
<style type="text/css" media="all">
html, body { /* to get rid of opera/mozilla defaults */
margin: 0;
padding: 0;
}
body {
text-align: center;
font: 11px Verdana, Arial, Helvetica, san-serif;
background: #DFE4DB;
}
#wrapper {
position: relative;
text-align: left;
width: 760px;
margin: 0 auto;
}
#logo { /* logo is nested inside static header now */
background: #bed;
width: 254px;
height: 125px;
float: left;
}
#header {
background: #9BBA51;
height: 125px;
border: 1px solid #557532;
}
ul.menu {
color: #fff;
background: #557532;
height: 28px;
margin: 0;
padding: 0 0 0 10px;
list-style: none;
}
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;
}
ul.menu li.last{
border: none;
}
</style>
</head>
<body>
<div id="wrapper">
<!--BEGIN HEADER TABLE-->
<div id="header">
<div id="logo"> </div> </div>
<ul class="menu">
<li><a>link</a></li><li><a>link</a></li>
<li><a>link</a></li><li><a>link</a></li>
</ul></div></body></html>
Thanks for your suggestions.
Huge thanks; much appreciated.
