hi,

I have a intermittent firefox CSS issue with my site and I can`t figure it out.

The menu keep showing below the content when it should be to the side.

This is how its meant to look:

Click for screenshot (http://www.carpfishinguk.net/shouldbe.jpg)

And this is the intermittent problem:

Click for screenshot (http://www.carpfishinguk.net/problem.jpg)

This is the css for the page

body{
margin:0;
background-color:#333;
}

a,
a:active,
a:visited{
color:#000;
text-decoration:none;
}

a:hover{
color:#090;
text-decoration:none;
}

#page {
width: 700px;
padding-bottom:5px;
background-color:#CFC;
margin: 0 auto;
border-top: 8px #6C6 solid;
border-bottom: 8px #6C6 solid;
display:table;
}

#header h1 {
font-size:32px;
font-family:"Trebuchet MS", Verdana, SansSerif;
color:#090;
letter-spacing:-3px;
padding-left: 10px;
}

.h1_emp {
font-size:30px;
color:#6C6;
font-weight:bolder;
letter-spacing:-2px;
}

#header_img{
width:700px;
height:248px;
background-image:url(../images/home_img.jpg);
}

#left{
width:480px;
float:left;
border-right: 1px #390 dashed;
margin-top:5px;
}

.content {
width: 460px;
padding-left:10px;
margin-top: 5px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}

.content h2 {
font-size:24px;
color:#090;
font-family:Tahoma, Arial, Helvetica, sans-serif;
}

.content h3 {
font-size:20px;
color:#090;
font-family:"Trebuchet MS", Verdana, SansSerif;
text-align: center;
font-weight: 900;
}

.content h4 {
font-size:14px;
color:#090;
font-family:Arial, Helvetica, sans-serif;
text-align: left;
}

.content p {
color:#333;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}

.content div {
color:#333;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
text-align: center;
}

.title_h4 {
font-size:14px;
color:#090;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
font-weight: bold;
}

#sidebar {
float:left;
margin: 5px 0 0 10px;
width: 200px;
}

#sidebar .sidebar_item{
margin-top: 5px;
}

#sidebar .sidebar_item h3{
margin-bottom: 0;
color:#090;
font-size:15px;
font-family:"Trebuchet MS", Verdana, SansSerif;
}

#sidebar .sidebar_item ul{
padding: 0;
margin: 0;
}

#sidebar .sidebar_item li{
list-style-type:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#333;
font-size:10px;
padding-top: 6px;
}

#sidebar .sidebar_item li a{
text-decoration:none;
border-left: 1px #090 solid;
color:#333;
padding-left: 4px;
display:block;
width: 100%;
}

#sidebar .sidebar_item li a:hover{
background-color:#6C6;
color:#000;
text-align:left;
padding-right: 8px;
width:98%;
}

#footer {
background-color:#090;
width: 700px;
margin: 0 auto;
}

#footer p{
margin:0;
padding: 5px 16px;
font-size:12px;
color:#6C6;
font-family:"Trebuchet MS", Verdana, SansSerif;
font-weight:bolder;
text-align: center;
}

#footer p a{
color:#6C6;
text-decoration:none;
}

#footer p a:hover{
color:#FFF;
}

.thddr{
color:#333;
border:#090 1px solid;
font-size:12px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}

.thddr2{
color:#333;
border:#090 1px solid;
font-size:12px;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
padding: 5px;
}

.thddr3{
color:#333;
border:#090 1px solid;
font-size:12px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
padding: 5px;
}

.thddr div {
color:#333;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
text-align: center;
}

.thddr a:hover {
color:#090;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}

.alinks {
color:#000;
font-size:10px;
font-family:Arial, Helvetica, sans-serif;
}

.pagelink{
background: #EEE;
border: 1px solid #090;
padding: 1px 3px 1px 3px;
color:#000;
}

.pagecurrent{
background: #EEE;
border: 1px solid #090;
padding: 1px 3px 1px 3px;
color:#090;
font-weight:bold;
}

.pagecurrent a:active,
.pagecurrent a:visited,
.pagecurrent a:link{
text-decoration: none;
color: #090;
}

.pagelink a:active,
.pagelink a:visited,
.pagelink a:link{
text-decoration: none;
color: #090;
}

.button{
background-color:#EEE;
border:1px solid #090;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#090;
}

.textfield{
background-color:#EEE;
border:1px solid #090;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#090;
}

.bgsolid{
border:#090 1px solid;
background-color:#090;
padding: 1px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color:#EEE;
}

Had to split the posts as the 5000 char limit

<!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>
<title>Carp Fishing UK</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-language" content="EN" />
<meta name="robots" content="index,follow" />
<style type="text/css">
@import "style.css";
</style>
<script type="text/javascript" language="javascript" src="script.js"></script>
</head>
<body>
<div id="page">
<div id="header">
<h1><span class="h1_emp">Welcome to</span> Carp Fishing UK</h1>
<div id="header_img"> </div>
</div>
<div id="left">
<div class="content">
<!-- PAGE CONTENT GOES HERE -->
</div>
</div>
<div id="sidebar">
<div class="sidebar_item">
<h3>Site Navigation</h3>
<ul>
<li><a href="index.php?p=index">Home</a></li>
<li><a href="index.php?p=news">Angling News</a></li>
<li><a href="forum/index.php">Community Forums</a></li>
<li><a href="articles/index.php">Angling Articles</a></li>
<li><a href="reviews/index.php">Tackle Reviews</a></li>
<li><a href="venues/index.php">UK Venues</a></li>
<li><a href="world/index.php">Foreign Venues</a></li>
<li><a href="glossary/index.php">Angling Glossary</a></li>
<li><a href="shop/index.php">C*** Shop</a></li>
<li><a href="index.php?p=rigs">Rigs & End Tackle</a></li>
<li><a href="index.php?p=poetry">Angling Poetry</a></li>
<li><a href="index.php?p=events">Site & Angling Events</a></li>
<li><a href="index.php?p=art">Angling Art</a></li>
<li><a href="index.php?p=scenic">Scenic Gallery</a></li>
<li><a href="index.php?p=terms">Terms & Conditions</a></li>
<li><a href="index.php?p=privacy">Privacy Policy</a></li>
<li><a href="contact/index.php">Contact Us</a></li>
<li><a href="links/index.php">Links Directory</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<p><a href="http://www.carpfishinguk.net">Copyright © Carp Fishing UK 2002-2006</a></p>
</div>
</body>
</html>


Can anyone have a look and let me know the problem... Thanks

Everything looks the way it should when viewing your source verbatim in Firefox 2.0, with the exception of the header image's absence.

What do you mean by intermittent? Do you not experience the problem consistently?

No, it happens at random times when browsing the site.

One page its fine, next 5 pages the menu is at the bottom of the page, but after a refresh the menu will be in the correct position.

Its a weird error I know, and it only happens in Firefox and not IE

I`ve added a short .wmv file of the problem (35 seconds, 890KB)

Click here to view/download (http://www.carpfishinguk.net/cfuk.wmv)

Hmm. I'm honestly not sure what causes that. It seems to happen consistently on your UK Venues page, but doesn't happen at all if the cache is disabled. If it were solely a cache problem, it also shouldn't happen again after the page is refreshed.

Does it make a difference if you serve the page as static HTML instead of generating it from PHP? If you remove any of the meta elements? If you remove the Google ad scripts?

In moving below the content, it's displaying the same behaviour that a float would if it were too wide to fit next to a certain element, so that might be worth looking into, but I can think of no reason for the width to be changing as you're referencing a static style sheet.