CSS - Padding in IE issue?

Question

I'm having trouble width some padding. In Chrome/Firefox it looks different than in Internet Explorer. In Internet Explorer it is much bigger. It is the

.menu ul li{
    display:inline;
    padding-right:60px;
    margin:0;
} 

Why?

.menu{
    background-color:#000;
    height:35px;
    padding-top:15px;
    color:#fff;
    font-size:18px;
}

.menu ul{
    padding:0; 
    margin:0;
    list-style-type:none;
}

.menu ul li{
    display:inline;
    padding-right:60px;
    margin:0;
}

.menu a:link{
    color:#fff;
}

.menu a:active{
    color:#fff;
}

.menu a:hover{
    color:#fff;
}

.menu a:visited{
    color:#fff;
}

I really hope someone can help :)

Answer 1

Because the different browser have different font styling even though you set the font-styling. Similarly ie have different front size. so you can write the code for IE.

Here the link to help how to specific css in ie only.

http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Answer 2

if you want to unify the box model of ie with those of other browsers you can always use the box-sizing CSS3 property. it is not supported in older version of ie, so it's best to use border-box in chrome, ff, etc. than to use content-box for ie. for further reading look here - http://www.css3.info/preview/box-sizing/

Answer 3

IE calculates padding as part of height/width, other browsers interpret it height/width plus padding. So try to give only height/width or padding/margin.