Firefox does not render CSS correctly until refresh

Hi I am running Firefox (PC), and I am experiencing some weird outcomes with ff rendering the CSS.

I have setup a test page here;

and this is the CSS;

      width: 460px;
      margin-bottom: 5px;      /* For IE */

.recipeContainer a{
      float: left;
      border: 1px solid;
      border-color: #CCCCCC;
      margin-bottom: 5px; /* For Firefox */

.recipeContainer a:hover{
      float: left;
      border: 1px solid;

.recipeContainer #text{
      float: left;
      width: 240px;      
      height: 80px;
      padding: 5px;

.recipeContainer #thumb{
      float: left;
      width: 190px;
      padding-right: 5px;
      padding-top: 4px;
      padding-bottom: 4px;

You can see on the test page, if you click recipes on the left, it sometimes does not render the CSS, i.e. a border around the whole recipe. A browser refresh will fix this.

It is only in FF, I have tested Safari and IE, and they both work as expected.

This is quite urgent, so any help is much appreciated.
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Works for me in version (clicked several times).
Maybe a bug in your version, or a cache / http problem : maybe the css is not loaded sometimes.
If the browser encounters an error while loading the css for the first time (for example, a http timeout), it could render the page this way.
What's your firefox version ?
jset_expertAuthor Commented:
Ben, I am running the same version a you.

I tried to clear the cache but that did not work. It seems to occur every time I click the recipe link on the left hand side.

Thanks for you prompt response.
Idiot comment, but did you try to reboot your computer ?
I'm having for years such unbelievable problems under windows xp (several windows, several computers, same problem ...), when I run the computer for a too long time or open too many windows at a time, it refuses some memory allocations (although there IS free memory in the tasks manager), and some programs stop to respond, refuse to open a menu, or do things like that :)

If this doesn't work - it probably won't :) could you please upload a screenshot when the problem appears ?
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

jset_expertAuthor Commented:
I gave the refresh a go, it just so happens that my PC has been on for about 1 week now, so it was definitely worth a try.....Unfortunately it didn't help.

I have attached a screenshot of what is happening.
Try adding a 1px white border around the menu DIVs.  I think the issue might be to do with the collapsable margin issue that I've read elsewhere.

You could also try declare the hyperlinks as a display:block with specific height and width.

It does work fine for me in FF2 though...
jset_expertAuthor Commented:
Thanks Rouchie for you suggestions but again, they were unsuccessful.

There must be a reason why this is occurring.

Has anyone encountered the same problem before???????
Ok I had a look at the DOM inspector, when this error is visible, the <div> just around the <span> is not present in the DOM tree, whereas we can see it in the source.
First thought it was a FF bug, but probably not.

I passed your source code to the w3 validator, and it raised a lot of errors. Some are minor, but there is at least one that may cause FF not to render it correctly :

A <div> can NOT be placed inside a <a>.

Also, you use several times the same id for different <div> tags.
Consider using class="text" instead of id="text".
An id must be unique.
(in your css file, just replace #text by .text)

Last (just a notice as it is probably not related to your problem) , take care to encode ampersands in your href attributes :
<a href="/members_test.php?mode=recipes&rid=1">
becomes :
<a href="/members_test.php?mode=recipes&amp;rid=1">

You can check your page here :

I think that if you correct all the important errors, your page will render the same way at each call.
It is still a good idea to try to validate a page at w3 ;)

Keep us updated.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
I agree with ben; there's 68 html warnings and at least the same with the css. Clean up the code and all should be fine.

Try installing the web developer extension for FF along with firebug and HTML Tidy. If you keep an eye on these warnings as your coding you'll reduce the changes of it happening again.
jset_expertAuthor Commented:
OK I'll start cleaning up the code and let you know I how go.

Thanks for the help again!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.