IE6 İki div (katman) arasındaki boşluk

18 Aralık 2009, admin

Bir zamanlar beni de deli etmiş olan bu sorundan, burada kısaca bahsedeceğim. Diğer Browser’larda herhangi bir sorun çıkmazken ie6 burada da sorun çıkarmakta. Bir örnek verelim ve sorunu tanımlayalım daha sonra da çok basit olan çözümü yazalım.

Örnek olarak yuvarlak köşeleri olan bir kutu oluşturacağım. Bunu oluştururken 3 tane resim dosyası kullanacağım. şöyleki;

HTML yapı

<div id="top">

</div>

<div id="middle">

 içerik buraya geliyor.

</div>

<div id="bottom">

</div>

Yukarıda görüldüğü üzere 3 adet div kullnadım. Stil atayalım.

CSS Stil yapısı

#top {

 background:url(top.gif) no-repeat;

 height:15px;

}

#middle {

 background:url(middle.gif) repeat-y;

 height:100px;

}

#bottom {

 background:url(bottom.gif) no-repeat;

 height:15px;

}

Stilimizi de atadıktan sonra aşağıdaki görüntüyü elde ettim ancak ie6 da top elementinin altında bir boşluk görünüyor.

ie6-bosluk-problemi

Peki çözümü nedir?

top id’li katmanımızın stil yapısına overflow:hidden ekliyoyorum. Şöyleki;

CSS Stil yapısı

#top {

 background:url(top.gif) no-repeat;

 height:15px;

 overflow:hidden;

 }

ve sonuç olarak, sorunu çözüyorum.

NOT : Eğer diyorsanız ki; Ben resim kullanmadan köşeleri yuvarlak yapmak istiyorum. Onu da bu derste anlattım. Teşekkürler..

(1 votes, average: 5,00 out of 5)

Loading ...

:boşluk, CSS, css katman arası boşluk, div, ie6, katman

2 yorum var:

özgür
Kasım 11th, 2010 on 19:45
kardeş ALLAH(c.c) razı olsun çok işime yaradı
kadir doğrubakar
Nisan 6th, 2011 on 18:07
Harikasın dostum, bu kadar yalın bir dille direk sonuca giden bir anlatım. İnterneti ve ona gerçekten katkı sağlayan akıllı insanları seviyorum. Teşekkürler..