CODEWITHSUNDEEP
javascripthtmlcsscross-browser
Sirojan Gnanaretnam
Sirojan Gnanaretnam

Reputation: 611

How can I define a different padding value for IE?

I need to assign a different padding value in Internet Explorer, because when I declare the height for a <div> it calculates it as height + padding (it's working fine in both Firefox and Chrome).

Here is my CSS:

#payment{
    width: 265px;
    border: 1px solid #cecece;
    border-radius: 8px;
    -webkit-box-shadow: 0 2px 7px rgba(50,50,50,0.46);
    -moz-box-shadow: 0 2px 7px rgba(50,50,50,0.46);
    box-shadow: 0 2px 7px rgba(50,50,50,0.46);
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    /*display: block;*/
    position: absolute;
    /*float: right;*/
    height: 230px;
    padding: 10px;
    left: 549px;
}

Upvotes: 0

Views: 235

Answers (2)

ferne97
ferne97

Reputation: 1073

You can add IE conditionals to the html element and assign classes to specific IE versions.

<!--[if lt IE 7]>      <html lang="en-us" class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en-us" class="lt-ie9 lt-ie8 ie7"> <![endif]-->
<!--[if IE 8]>         <html lang="en-us" class="lt-ie9 ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us"> <!--<![endif]-->

Then you can target your selector with the IE class prepended.

.lt-ie8 #payment { /* IE7 & below */
    padding: 5px;
}

or

.ie7 #payment { /* IE7 only */
    padding: 5px;
}

Upvotes: 3

Surinder ツ
Surinder ツ

Reputation: 1788

You should use like this :

#payment{
    padding: 10px; /* standard */
    padding: 17px\9; /* IE 8 and below */
    *padding: 15px\9; /* IE 7 and below */
    _padding: 16px\9; /* IE 6 */
}

reference link 1

reference link 2

Upvotes: 1

Related Questions