İki farklı "padding" yöntemi (Yardım) IE ve FF'de farklı hatalar

08-10-2010, 18:50:31

Merhabalar,
Yeni yeni CSS çözüyorum. İçerik gövdesi oluşturuyorum. İki farklı yöntem deniyorum. Biri Firefox'ta fazla bırakıyor diğeri de IE8'de. Diğerlerini denemedim.

Hata 1, Firefox'ta fazla boşluk gösteriyor.
http://www.bozkirmyo.net/hata1/

<html>
<head>
<Title>Bozkır Meslek Yüksek Okulu</Title>
<link rel="stylesheet" href="stil.css" type="text/css"/>
</head>
<body>
<div id="icerik">
<div class="icerik-baslik"><a href="#">Başlık</a></div>
<div class="icerik-orta">
deneme<br>
deneme<br>
deneme<br>
deneme<br>
deneme<br>
deneme<br>
</div>
<div class="icerik-alt"></div>
</div>
</body>
</html>

#icerik{width:686px;}
.icerik-baslik{background: url(icerik-ust.png) no-repeat; height:40px; font-size:18px; padding-left:15px; padding-top:10px;}
.icerik-baslik a{background: url(mavi-yildiz.png) no-repeat; padding-left:25px; display:block;}
.icerik-orta{background: url(icerik-icerik.png) repeat-y; padding:10px 10px 10px 10px;}
.icerik-alt{background: url(icerik-alt.png) no-repeat; height:15px;}

Hata 2, IE8'de fazla boşluk gösteriyor.
http://www.bozkirmyo.net/hata2/

<html>
<head>
<Title>Bozkır Meslek Yüksek Okulu</Title>
<link rel="stylesheet" href="stil.css" type="text/css"/>
</head>
<body>
<div id="icerik">
<div class="icerik-baslik"><h2 class="baslik"><a href="#">Başlık</a></h2></div>
<div class="icerik-orta">
deneme<br>
deneme<br>
deneme<br>
deneme<br>
deneme<br>
deneme
</div>

</div>
</body>
</html>

#icerik{width:686px;}
.icerik-baslik{background: url(icerik-ust.png) no-repeat; height:40px;}
.icerik-orta{background: url(icerik-icerik.png) repeat-y; padding:10px 10px 10px 10px;}
h2.baslik{font-size:18px; padding-left:15px; padding-top:10px;}
h2.baslik a{background: url(mavi-yildiz.png) no-repeat; padding-left:25px;}

Bir türlü ortasını bulamadım.

09-10-2010, 02:22:28

#2

se7en

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>

09-10-2010, 17:03:43

#3

SeoSarp

Yine farklı gözüküyor.

12-10-2010, 15:53:17

#4

SeoSarp

Sorunu kendim deneme yanılma yöntemiyle çözdüm.

Büyük ihtimal akşam çözüm yolumu paylaşırım.