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

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 –