( TIP ) How to target different browsers with CSS

There are times when you're customizing your network that your CSS codes act differently in different browsers. These snippets of code will help you fix those types of problems.

Targets Chrome & Safari

/* Google Chrome & Safari CSS */
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* your CSS here */
}

Targets firefox

/* Firefox CSS */
@-moz-document url-prefix() {
/* your CSS here */
}

Targets IE 10 & 11

/* IE 10 & 11 CSS */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* your CSS here */
}

Targets IE 7, 8 & 9 - CSS stylesheet

Example

I wrote a neat little code to enhance the comment threads it looks perfect in IE9, 10, 11, Chrome & Safari with a left margin of 60px but in Firefox it pushes it 60 pixels too far left. So we'll use the Firefox query to fix this issue.

The original code no fix

/* Comment thread enhancement */
.comments-list.comments-level1 .comments-comment{
    border-bottom: 1px solid #aaa;
    margin-left:0px;
    left:0px;
    padding-left:0px!important;
    padding-top:5px; }
.comments-comment .comments-list .comments-comment DIV.comments-commentBody.media-frame{
    border: 1px solid #aaa;
    margin-bottom:5px;
    padding-top:10px!important;
    padding:5px;}
.comments-comment .comments-list .comments-comment DIV.comments-commentBody.media-frame:before{
    background:url("https://storage.ning.com/topology/rest/1.0/file/get/963872767?profile=original")
    no-repeat!important;
    background-position:left 0px top -0px!important;
    background-size: 20px 20px!important;
    content: ""!important;
    width:100%;
    color: transparent!important;
    margin-top:-25px!important;
    margin-left:60px!important;
    position:absolute!important;
    z-index:2!important;
    padding:10px;}

And the Firefox css fix.

/* firefox CSS */
@-moz-document url-prefix() {
.comments-comment .comments-list .comments-comment DIV.comments-commentBody.media-frame:before {
margin-left:0px!important;}
}

The completed code that looks the same in all browsers.

Replies

TJ @ jQueryHelp June 19, 2014 at 1:10pm

This is a helpful bit of information. Thanks for sharing it, George!
- George H. Compton IV > TJ @ jQueryHelp June 19, 2014 at 3:38pm
  
  You're welcome and thank you TJ.
  
  I like the smiley faces you're using in your comments.
dave June 25, 2014 at 3:50am

Nice work George
- George H. Compton IV > dave June 26, 2014 at 9:32am
  
  Thank you Dave.. Give me a call please.. :)
  - dave > George H. Compton IV June 27, 2014 at 2:53am
    
    will ring tomorrow :)
  - Jim Kinson > George H. Compton IV June 28, 2014 at 5:29am
    
    Looks great, George. Give me a ring when your not busy, please.
    
    Blessings.
    - George H. Compton IV > Jim Kinson June 28, 2014 at 8:29am
      
      Ok Jim talk soon. Blessings :)