Apply a different CSS width property based on brow

Question

I have to apply width to a div. The width value is need to be varied across browser. I cant apply conditional css . So can there be any hack for doing this.

FF

.apply{
    width: 720px; 
}

IE8

.apply{
    width: 690px; 
}

Can these be combined using some hack so that the respective properties will be applied automaticaly as per the browser.

Answer 1

For Firefox and IE specifically:

In CSS:

@-moz-document url-prefix() {
    //Firefox-specific CSS here.
}

In HTML:

<!--[if IE 8]>
    <style type="text/css">
        //IE8-specific CSS here.
    </style>
<![endif]-->

Answer 2

Apply CSS Classes based on Browsers like FF and IE & IE Edge. Use below sample css code.

/* This is for Firefox Browser */
  @-moz-document url-prefix() {    
    .divColor {
            color: red;
    }
} 

/* This is for IE Browser  */
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {    
    .divColor {
            color: blue;
    }  
} 

/* This is for IE Edge Browser */
@supports (-ms-ime-align:auto) {
    .divColor {
            color: green;
    }  
}

Answer 3

For IE8 and below:

.apply{
    width: 690px\9; 
}

I found this link, hope its useful to you.

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/

Answer 4

Is the width for FF different from other browsers? (except for IE of course). If not, then set your CSS to:

.apply {width: 720px;}

For IE8, use conditional statements in HTML.

<!--[if IE 8]><style type=text/css>.apply {width: 690px;}</style><![endif]-->