IMG-LOGO

IE interpret padding differently compare to chrome and firefox

andy - 05 Jul, 2013 2498 Views 0 Comment

You may wonder why your div style padding is displayed differently in IE and compare to firefox or chrome. This is because when you specify a padding and width in a div, IE will sum up the padding pixel into the width dimension. While the other browsers like chrome or firefox will keep the width dimension as it is.

To overcome this issue, you can just include the following style inside your div. See below css style example:

.box{
    padding:10px 13px;
    width:163px;
    background:#eaeaea;
    box-sizing: border-box; /** IE **/
    -moz-box-sizing: border-box; /* Firefox, Chrome */
    -webkit-box-sizing: border-box; /* Safari */ 
}
Note the box-sizing is only supported from IE 8+

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.

Related Articles

How to style pagination links with CSS?

Do you need to create a beautiful, simple and elegant pagination links with css? Simply follow our easy and quick tutorial on how to create the pagination links easily with CSS.

Optimizing your site for printing

The easy way to optimize your site for printing is to create a separated external css targeting a media to print only When a printing action is being executed the browser will send over the information from your page to ...