How to check if browser is Firefox in CSS

Question

I was reading how to do this,... but have not come up with a good answer for this

the thing is that, in eclipse's internal browser this css looks weird because of the margin

#tabs {
    margin-top:-50px;
    float:left;
    font-size:100%;
    line-height:10px;
    vertical-align:top;
    }

but in firefox it works fine.. so i am tring to say something like if firefox use margin otherwise do that read the margin-top.. i saw something like this but is not working (and again new to this :) ) thank you for your help

#tabs {
    [if Gecko] margin-top:-50px;   (not working)
    float:left;
    font-size:100%;
    line-height:10px;
    vertical-align:top;
    }

Check these out: http://stackoverflow.com/questions/3715964/stylesheet-for-firefox-only http://stackoverflow.com/questions/952861/targeting-only-firefox-with-css — Anis Abboud, Sep 05 '11 at 21:52
@Anis Abboud I would say that browser detection in CSS, especially teaching it to someone who is new to the language, is a bad thing. Styles should be standard compliant whenever possible, and browser detection often involves quirky hacks or tricks to get things to work right when there are much better techniques to learn. — LoveAndCoding, Sep 05 '11 at 21:56

score 1 · Accepted Answer · answered Sep 05 '11 at 21:51

CSS has no way to detect which browser or what engine is used to render the given item. I don't know anything about the eclipse internal browser, but standards compliant browsers should render it all roughly the same. I'd recommend using a CSS Reset to reset all default styling for all elements, which will normalize as much as possible, and go from there.

score 0 · Answer 2 · answered Sep 05 '11 at 21:51

This isn't possible with CSS alone; you'd have to use a little bit of JavaScript. Providing the Eclipse browser doesn't run JS, you could just do this:

document.getElementById("tabs").style.marginTop = "-50px";

If the Eclipse browser does run JS, you'll have to detect it either by finding the user agent, or doing some functionality testing (I forget what it's called).

How to check if browser is Firefox in CSS

2 Answers2