CSS Problem in Firefox

CSS elements do not show in Firefox

[arty_fowl]

I saw a topic like this, but it was buried under others, so I thought I should post a new one with a similar situation.

I am having a problem with my site. The CSS classes look fine in IE, but Firefox doesn't show many of the classes. It might just be a problem with some code in my site, I don't know. I also tried that W3C CSS Validator thing, but that was much too complicated for me...:P I don't know what the problem is; whether it be the CSS itself, or possible Doctype problems...Help please?

[tedster]

The first thing to understand is that IE does not support standards to the depth that Firefox does. In addition, it will forgive many errors that Firefox will not. For these reasons, it usually saves a lot of development time to first make sure that your pages look good in a more standards compliant browser (Firefox, Opera, Safari) and then fix whatever you need to to have IE look good.

Second thing -- cross browser rendering problems are best worked out by first making sure your mark-up has no errors. Yes, that does means wading into the complications of the W3C validator. We're glad to discuss any errors that you can't figur out after you make a good faith attmpt of your own.

A couple guidelines for working with the W3C validator:

1. Fix the earliest errors and then validate again. Sometimes what looks like hundreds of errors can be a "cascade" situation -- so fixing a critical error early in the mark-up will make lots of later errors vanish too.

2. You don't need to fix every "warning" about a deprecated attribute, missing alt attribute in an image, and so on. But definitely fix the true "Errors".

Trying to make non-valid mark-up work cross-browser can be frustrating and in some cases, even impossible. Here are some reference threads that may help you sort through the complications:

Quirks Mode and Standards Mode - an overview [webmasterworld.com]
FAQ: Choosing the best doctype for your site [webmasterworld.com]

[derek mcgilvray]

HI guys,

I too have been digging through old relevant threads regarding differences between firefox and ie display. From now on I will always start in firefox, but for the time being, could anyone help resolve my problem.

Display in firefox is all over the place. Here is some of my problem code:

Here is my html:

<div style="margin-left: 253px; margin-top: 370px; position: absolute">

<table class="coolbox2">
<tr><td>Comment 1</td></tr>
</table>

<table class="coolbox2">
<tr><td>Comment 2</td></tr>
</table>

</div>

here is my css code:

table.coolbox2 {margin: 8px; color: #FFFE99; font-family: Tahoma, Trebuchet MS, Verdana; background-color: #A5C369; font-weight: bold; width: 180px; text-align: left; z-index: 1; font-size: 17px}

The solution to this will probably fix the other probs too. Thanks in advance,

Derek

[moishe]

Interesting, I have just started seeing this in FF on a number of my sites, they behave like there is no CSS, IE working fine...

[SuzyUK]

the very first thing to check..

if using the validator it will show as a "Parse Error" , but what you're looking for is incorrect or missing punctuation in your CSS

make sure the colon ":" in the middle is a colon and that that there is a semi-colon ";" at the end of every rule

- the semi-colon at the end is not strictly necessary if it's the last property in a rule but it's good practice to put one there - as it's the cause of many a "blip" whenever adding a new rule ;)

If the punction is missing or incorrect FF will not read any more of the rules after the "parse error"

Suzy

[edited by: SuzyUK at 7:06 pm (utc) on Sep. 11, 2006]

[moishe]

In my case, it has to be a FF related bug, perhaps a caching issue. I went back to one site to validate and it was fine, ditto for the others..

M

[tedster]

[Firefox] behave like there is no CSS, IE working fine

I'll bet it's not a FF bug, I'll bet the server is sending the wrong mime type for a .css file. It should be sending text/css and NOT text/plain. You can either check your http headers as sent from the server, or try validating the online CSS file at the W3C [jigsaw.w3.org]. The validator will tell you if the mime type is incorrect.

More discussion in this thread:
[webmasterworld.com...]