asked on

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;
http://www.slimmm.com.au/members_test.php?mode=recipes

and this is the CSS;

.recipeContainer{
      width: 460px;
      margin-bottom: 5px;      /* For IE */
}

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

.recipeContainer a:hover{
      float: left;
      border: 1px solid;
      border-color:#009FDA;
      cursor:pointer;
}

.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.

BenMorel

Works for me in version 2.0.0.11 (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 ?
Regards,
Ben

jset_expert

ASKER

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.

BenMorel

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 ?
Thanks.

jset_expert

ASKER

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.
firefox-CSS-problem.JPG

Rouchie

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_expert

ASKER

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???????

ASKER CERTIFIED SOLUTION

BenMorel

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

v2Media

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_expert

ASKER

OK I'll start cleaning up the code and let you know I how go.

Thanks for the help again!