8

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

Improve this question
2
  • 6
    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. Commented Jan 1, 2011 at 21:57
  • 1
    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. Commented Jun 12, 2012 at 16:06

3 Answers 3

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

7

I solved this by adding:

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

Comments

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

Improve this answer

6 Comments

Whenever anyone requires browser specific CSS, I always question their abilities. IE is the only browser that needs such things.
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.
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: 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
Right now, I need a Firefox-targeted CSS due to this 11-years-old not fixed bug related to textarea padding (I need padding: 0px only for Firefox, as every other browser just renders it as expected. Look: bugzilla.mozilla.org/attachment.cgi?id=784647
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.