• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2223
  • Last Modified:

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.
1 Solution
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 ?
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

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.
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!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now