Firefox CSS bug NOT

Posted
9:25 PM 3 September 2005
Updated
8:51 PM 29 May 2011

The Gecko HTML layout engine used in Firefox has excellent CSS support. Not perfect of course, but excellent at least. This post started its life as an announcement of what I thought (at the time) might be a bug in Firefox’s CSS handling. The ‘bug’ turned out to be an oversight on my part and it’s accompanying blog entry an embarrassment. I have since transformed my mistake into something hopefully useful to you dear Googler.

Your problem with CSS in Firefox is probably a problem with CSS. The Gecko compatibility handbook on the Mozilla developer centre site outlines some differences with other browsers that commonly cause problems for web developers.

If you are still convinced there is something buggy happening first try validating your HTML then validate your CSS. Install the very useful Web Developer extension for Firefox. It allows you to validate HTML pages which are not yet to accessible on the web with the W3C Markup Validation Service. This will ensure you don’t make my mistake.

Finally, if your valid code is still causing you grief, the best listing of Bug Reports for Mozilla I could find. Personally I’m yet to encounter any of the issues listed here, it’s Internet Explorer that generally causes my headaches.

Further thoughts

Update 22 February 2006

I have completely rewritten this post. There was no bug. That will teach me for not checking for odd invisible characters. I guess I could have hesitated a little longer.

Some further investigation has bought me a step closer to the source of these little gremlins. Every abbreviation that I recently imported from TypeIt4Me into my new installation of Textpander has one hiding at the end of the resulting inserted string. Retyping the content in Textpander preferences fixes the problem.

Version of 1.1 of Textpander addresses this.

Comments

  1. Commented
    9:25 PM 8 September 2005

    I tried to understand, but i really don’t :)

  2. Commented
    9:25 PM 8 September 2005

    Basically, the problem was a strange character at the end of a line in my CSS. Not the CSS or the browser’s interpretation of it.

  3. Commented
    9:25 PM 29 July 2006

    Help! I feel like I have tried everything, but know that there is an answer somewhere. I just went live with our site, http://www.directnet.us, and in Firefox, my h1 tag and class=”nav5” are still being read wrong. IE reads it fine. Can someone take a look at it for me and offer any suggestions, possibly some answers. Here is the link to my css page, www.directnet.us/directnet.css.

  4. Commented
    9:25 PM 29 July 2006

    I think I can see what your problem is. Try removing the “quotes” from some of colour definitions, eg #fff instead of “#fff”.

    Internet Explorer is at fault for accepting this and letting you believe there was no problem.

    You’ve caught me at a rare helpful moment - for further help I suggest you join this email group - some very knowledgeable people contribute to it.

    Before you post problems there I suggest you try validating your HTML/CSS against an automated checker. The easiest way to do that is with the Web Developer Firefox extension - available free from here

    The Tools menu in it has options for Validate HTML and Validate CSS which I recommend you do in that order. I expect resolving the problems it highlights will often sort out all sorts of browser inconsistencies.

    Good luck!

Oliver Boermans is a design geek in Adelaide, South Australia: ollicle.com is a place for Ollie to rant, reflect and share. Feed

Previous entry
15 August 2005
NetNewsWire feed ad blocking with CSS
Next entry
9 October 2005
Another NetNewsWire style