Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Pedro Lucas Da Silva Cunha
Pedro Lucas Da Silva Cunha
5,276 Points
Posted by Pedro Lucas Da Silva Cunha
Pedro Lucas Da Silva Cunha
5,276 Points

Targeting firefox only with CSS

I had a few issues with my website when viewed on firefox and I've been trying to incorporate some css that targets only that specific browser because IE and Chrome seem to be working just fine. Eventually I found this code and decided to try it but I was disappointed when it didn't work. Maybe there's something I did wrong? 

  @-moz-document url-prefix() {
                        .logo {
                        width:486px;
                    }
                    }

2 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

TL;DR Use this CSS hack instead -

body:not(:-moz-handler-blocked) .logo {
    width:486px;
  }

This worked for me in the most recent version of Firefox: http://codepen.io/jamesbarnett/pen/wctaA

Browser hacks are rarely needed outside of legacy IE (8 & below).

Usually it's case HTML/CSS not validating, not using normalize.css, or not using the correct vendor prefix for something.

However there are cases where you need a browser hack, I tried the one you had and it didn't work for me either remember TMTOWTDI (There's More that One Way to Do It), that's what browserhacks.com is for.

Hayden Taylor
Hayden Taylor
5,076 Points
Hayden Taylor
Hayden Taylor
5,076 Points

Most likely not the answer you want... But you should build your website IN Firefox. I pretty much only use Firefox and rarely do other browsers give me problems besides IE.

Are you using a css reset?

Here is a framework that also solves your problem --> http://rafael.adm.br/css_browser_selector/

Here is another alternative:

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

Clearly the code above can be optimized, but you get the point.

Hope this helps