Hatanın çözümü çok basit arkadaşım. Sana çözümün mantığını bahsettiğim vakit kendi hatanı da görmüş olacaksın. Bir örnek vererek açıklamaya çalışayım. Konu cross browser yorum farkında meydana geliyor. Şöyle ki;
Bir kutu modeliniz var 150x150 şeklinde ve siz bu kutuya 10px şeklinde padding vermek istiyorsunuz. Ve kodlarınız şu şekilde:
<style>
.kutu_modelim {
width: 150px;
height: 150px;
background-color: #000;
}
</style><div class="kutu_modelim">Lorem ipsum dolor sit amet</div>
Bu şekilde bir kullanımdan sonra Firefox'ta ve IE'de incelediğinizde top, left, right, bottom pozisyonlarında 10'ar piksel fazlalık göreceksiniz bu fazlalık IE'de olacak. Bunun olmasının sebebi IE kutu modelinizi yorumlarken genişliği 150px+10px+10px şeklinde padding değerlerini katarak hesaplayacaktır ve genişlik 170px olacak. Ama sizin kutunuz 150px. Firefox ise padding değerini genişliğe katmayarak kutu modelinizin doğru halini yorumlayacaktır. Bu sorunu ancak şöyle aşabilirsiniz;
<style>
.kutu_modelim {
padding: 10px;
height: 130px;
width: 130px;
}
</style>