conditional css statement for firefox

Question

I'm having problems with css in firefox, therefore I want to import a css file only if the browser is FF

Actually, I need to import this styles:

.searchbutton{
    position:absolute; right:3px;  width:25px;  
    top:3px;
}

#buscarmain{ bottom:12px;

}

EDIT:

Many have argued that I shouldn't use a special statement for FF, since FF is most probably to be correct, compared to other browsers.

However, in this case all browsers print the same page (IE, Chrome, Opera, Safari) and FF displays it in another way. I must achieve the same visualization for all browsers, therefore I need a special FF statement

Problems with Firefox only or other browsers, too? If you are comparing to IE then your markup is wrong. There's a reason conditional comments are only needed in IE. — Rob, Jan 01 '11 at 21:57
I have a thing that looks right in IE, Safari, Chrome, but not firefox. I do not care if my markup is "wrong", as if there is such a thing in a non-xml structure. I just want to know how to apply a style to firefox only. I am guessing the asker does as well. — MrBoJangles, Jun 12 '12 at 16:06

score 13 · Answer 1 · edited May 23 '17 at 12:34

13

Here is how we can target CSS styles only for Firefox:

<style type="text/css">
@-moz-document url-prefix() {
    h1 {
        color: red;
    }
}
</style>

Source: Targeting only Firefox with CSS

edited May 23 '17 at 12:34

Community

1
1

answered Oct 07 '13 at 23:26

J. Bruni

20,322
12
75
92

score 12 · Answer 2 · answered Jan 01 '11 at 21:15

12

You might try the css browser selector

answered Jan 01 '11 at 21:15

Xuni

604
3
13

original link is down, can you try to update the answer? (I know it's beed 3 years) – Mike Szyndel Nov 19 '14 at 17:37

score 7 · Accepted Answer · answered Jan 01 '11 at 20:56

7

solved the problem

just added:

    <script type="text/javascript">
    if ( $.browser.mozilla == true ) {
      document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"FF.css\">");
    }
</script>

answered Jan 01 '11 at 20:56

Dan Stern

2,155
8
26
38

You do realize it is highly improbable for Firefox to have a "bug" while other browsers do not, right? As was already said, please check your markup and css again, and make sure you're not comparing firefox to IE only – pwseo Jan 02 '11 at 02:14
4

People of earth, stop canonizing firefox (which is my browser of choice by the way), clown shoes are not a fashion statement. Firefox got bugs like Apple products and anything else. – MrBoJangles Jun 12 '12 at 16:08
Dan, this is a good question and a good answer. I don't know what's wrong with people. – MrBoJangles Jun 12 '12 at 16:13
I switched from Firefox to Chrome because it seems less buggy – yitwail Sep 29 '12 at 20:06

score 4 · Answer 4 · answered Jan 01 '11 at 23:25

4

CSS Hacks for Different Versions of Firefox

answered Jan 01 '11 at 23:25

sdleihssirhc

42,000
6
53
67

score 1 · Answer 5 · answered Jan 01 '11 at 20:46

1

IE is the only browser with conditional comments. I've always felt that every browser should have their own, but alas.

I think the solution is to tweak your style sheet so that it displays properly in Firefox and then fix for IE.

A rough and very dirty solution would be to use JavaScript to detect the browser and add a class such as "ffonly" to the body tag if the browser is Firefox. Then always bring in your Firefox stylesheet but put ".ffonly " at the begining on all your style rules

answered Jan 01 '11 at 20:46

James Long

4,629
1
20
30

Whenever anyone requires browser specific CSS, I always question their abilities. IE is the only browser that needs such things. – Rob Jan 01 '11 at 22:02
1

I have to disagree. Various browsers have their own CSS prefixes and handle various things in their own way, CSS gradients, 2D rotations etc. I know that Firefox is the only browser that would read a -moz- prefixed rule, but somehow I feel it would be more graceful to only serve such rules to Firefox. Of course, it would start to get filled with lazy hacks and !important declarations so maybe the lack of non-IE conditional comments is a good thing. For the record: you're right, a good coder won't need them. – James Long Jan 01 '11 at 22:16
You are talking about vendor prefixes which are part of the W3C spec and allow for browsers to implement features specific to them. Typically this is for non-standard properties or unstable properties where the standard has not been finalized yet. Conditional comments themselves are non-standard which is why they only work in IE. – Rob Jan 01 '11 at 23:51
@Rob: vendor prefixes can themselves become a PITA ("stop forking CSS!") but I'll have to agree with you: IE is the only browser needing specific CSS, most of the times – pwseo Jan 02 '11 at 02:15
Right now, I need a Firefox-targeted CSS due to [this 11-years-old not fixed bug](https://bugzilla.mozilla.org/show_bug.cgi?id=157846) related to textarea padding (I need `padding: 0px` only for Firefox, as every other browser just renders it as expected. Look: https://bugzilla.mozilla.org/attachment.cgi?id=784647 – J. Bruni Oct 07 '13 at 23:20
It's 2018 and there's still font differences between Firefox, Chrome and Safari. Not everything is IE/edge-vs-all-other-browsers. – Kalnode Aug 05 '18 at 21:00

conditional css statement for firefox

5 Answers5