Detect if Firefox 3.5 or Firefox 3.0 or lower

Question

I have to admit that I never had to worry about versions of Firefox before it appeared in CSS, but for some reason FF 3.5 does not correctly position some of my elements compared to how FF2 and FF3.0 do.

Now I have to find out if there is its FF 3.5.

Here is what I am doing now to handle CSS through 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 third option, I suppose, but how? Is there a way to do this, or do I have to deal with the need to implement some kind of JavaScript solution?

Thanks -

Answer 1

My (short-term) solution was to use jQuery as follows:

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

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

Assuming this will satisfy my short term needs. Thanks -

Answer 2

Unable to do this with browser tags. To load the correct stylesheets, you will need to use browser bypass (using JavaScript to detect the browser).

If you are using a JavaScript library such as Mootools or jQuery, then there are some functions for this.

You can also, as another solution, discover it on the server and then send an alternative stylesheet.

Answer 3

The first thing I would do is try to solve the problem without fixing the CSS defined by the browser. It usually takes a little thought to come up with a cross-browser solution. Submit your CSS problem here and we can try to fix it :)

But for a direct answer to your question, unfortunately, you have to use Javascript for this. But, fortunately, there is a really simple solution.

Download this JavaScript file and then you can use the following 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

it looks like there is a CSS solution, try this

  @-moz-document url-prefix() { .selector { color:lime; } } 

Answer 5

No comments for Firefox. You may need to check the User Agent and include style sheets in the result of this.

Answer 6

you can check userAgent using javascript