Sporadic/random page display problems

Question

This is for a website written in PHP (with very minimal JS, only used for a drop-down menu), using CSS, and a mySQL DB.

95 percent of the time my pages display fine. But occasionally as I click back and forth between pages, the page I've just clicked to does not display properly. It's always the same pattern of non-display when it happens: the top 10 pixels of the header (which is a 220-pixel high jpg) will be displayed, then immediately below that the footer division of my page displays. The rest of the header image and header division are missing, as is the content division -- so I end up with a page that's about 60 pixels tall and is missing the entire middle portion of its content.

If you hit the refresh button, the "bad" page will immediately display properly.

This happens randomly, as far as I can tell; it might happen on any page in my site. Sometimes it doesn't happen for thirty or forty or more page views, and then it will pop up again. Sometimes it might happen two or three times in a row.

I've tried making sure all my img tags have height and width specified, tried using PHP's flush function after right before the tag, adding a flush right before the function that access the database. Nothing I can think of has helped.

This problem has also occurred (in a similar random and only very occasional fashion) for the three other people who are helping me test this site, so the issue is not my particular computer or browser (although it may be Firefox related, since that's the browser we all seem most likely to stumble on the problem with).

Any suggestions would be deeply appreciated. This is frustrating as all get out. I'm still pretty new at web programming, and I can't find anything that explains this strange problem.

Thanks!!!

Answer 1

Sounds like a server problem to me as everything else seems to be random. I would check for errors in the log files and if you have the opportunity, check the site on another server.

Answer 2

Without knowing anything else about your site, I'm going to go out on a limb and suggest you're embedding a block level element inside an inline element.

Maybe something like

<span id="header">
  <div id="content">...</div>
</span>

I say this because

1. Googling for sporadic layout failures returns very little

2. I've just fixed an issue that sounds similar. I was accidentally embedding a few floating divs inside an anchor tag. Most of the time, Firefox would treat the anchor as a block level element. But occasionally, it wouldn't, and the divs inside the anchor would be spewed all over the page.