Dealing with cross browser functionality using javascript

Question

I have a JavaScript file that detects which browser is being used. I'm not sure if this is isn't a proper way to compensate for different browsers, but I'd like to use a different div based on which browser is being used.

I have a very basic page and I'd like to use something like this, but both of my "main" divs are showing up. Is there a way to do this using javascript?

<script> 
 if(BrowserDetect.browser == "Firefox"){
 </script>
 <div id="main_Firefox">
 </div>
 <script>
 }
 else{
 </script>
 <div id="main">
 </div>
 <script>
 }
</script>

• Steven: What exactly are you trying to do, could you expand a bit more?
• Thomas C. G. de Vilhena: Take a look at this: How to display browser specific HTML?. Basically it is not a good idea to do what you described.
• user1406951: I'd like to use a different div based on which browser is being used. Firefox is rendering one of my divs lower than other browsers. I was told by @Steven to check out conditional tags.

Answer 1

You never want to have something like this, you should use one HTML system for everything. And use CSS and conditional tags in CSS to solve any cross browser issues.

Also you shouldn't rely on user agent strings to determine a browser.

• user1406951: So, you suggest I investigate CSS conditional tags? Sorry, I'm new to this.
• Kai Qing: You could also look into something like modernizr, which adds css classes to your body tag based on features available. Anymore these days people are suggesting detecting features and not browsers for a vast number of reasons.
• Steven: Well I suggest you take a look at quirksmode.org/css/condcom.html but really it depends on what you need.