Detecting if Firefox 3.5, or Firefox 3.0 or lower

Question

I have to admit I never had to worry about Firefox versions before when it came to CSS, but for some reason, FF 3.5 is not positioning some of my elements properly as compared to how FF2 and FF3.0 do.

Now I am faced with having to detect if its FF 3.5.

Here is what I do now for handling CSS across FF and IE:

<!-- MAIN STYLESHEET -->
<link rel=stylesheet href="./inc/style.css" type="text/css">

<!-- IE STYLE SHEET -->
<!--[if IE]> <style type="text/css">@import "./inc/style.ie.css";</style> 
<![endif]-->

Now I need to add a 3rd option I suppose, but how? Is there a way to do this, or am I faced with having to implement some sort of JavaScript solution?

Thanks -

Answer 1

There is no conditional comments for Firefox. You might have to check User Agent and include stylesheets on the result of that.

Answer 2

There is no way to do it using browser tags. You'll have to use browser sniffing (using JavaScript to detect the browser), to load the correct style sheets.

If you are using a JavaScript library like Mootools or jQuery, then there are some functions to do that.

You could also, as another solution, detect it on the server and then send an alternate stylesheet.

Answer 3

The first thing I'd do would be to try to solve the problem without a browser-specific CSS fix. Usually it just takes a little bit more thought to come up with a cross-browser solution. Post your CSS problem here, and then we can try and fix it :)

But to directly answer your question, unfortunately you're going to have to use Javascript for this one. But fortunately, there is a really simple solution.

Load this JavaScript file, and then you can use these properties:

• BrowserDetect.browser
• BrowserDetect.version
• BrowserDetect.OS

Then you can do something like:

if (BrowserDetect.browser == 'Firefox' && BrowserDetect.version == '3.5')
{
  // Load CSS file
}

http://www.quirksmode.org/js/detect.html

Answer 4

you can check the userAgent using JavaScript

Answer 5

My (short-term) solution was to use jQuery like this:

$(document).ready ( 
  function() {
    if ( $.browser.mozilla == true && $.browser.version == '1.9.1' ) {
      // modify css here
    }
  }
);

Note the $.browser.version is not 3.5 like you might think (but instead it returns the rendering engine version). Also, the $.browser does not have a firefox value apparently, it just returns mozilla for all mozilla-based browsers.

Assuming this will meet my short-term needs. Thanks -