Internet Explorer display:inline-table ?

PrOgRaMmeR

Arkadaşlar merhaba...

Divler ile table sistemi yapmaya çalışıyorum fakat internet explorer de sorun yaşıyorum.

Yapmaya çalıştığım fotoğraf albümü için thumbnail olarak .photo adında bi class kullandım bu class display:inline-table değerine sahip. Bu şekilde internet explorer dışında sıkıntısız istediğim çıktıyı aldım. Fakat internet explorer sorun yapıyor. Internet te de bu konuyla ilgili pek bi döküman bulamadım :s Bu konuda yardımcı olurmusunuz ?

NOT: Float ile yapmak istemiyorum çünkü bozulmalar oluyor.
Div ile yapmak istememin sebebi brpwser penceresinin boyutuna göre stun sayısının değişmesini istiyorum....

SAYGILAR.

SS lar...

Firefox ve Diğer browserler....

Internet Explorer...

yagmayok · 13 Ekim 2008

Css ile çalışmaya yeni başladım ama float ile şu şekilde yapınca düzgün görünmesi gerekmez mi ? Çünkü her resimin tablo genişliği (width, height) aynı gibi görünüyor. O zaman

#pohoto {
float:center;
width:800px;
}

#photo .listele {
float:left;
width:160px;
height:80px;
text-align:center;
}

şeklide yapınca düzgün çıkması gerekmez mi ? Burada 800 ana tablo genişliği olarak aldım ve 800/5=160 olarak da listele aldım... Margin, padding vs... kendinize göre düzenlersiniz..

PrOgRaMmeR · 13 Ekim 2008

haklısın float istediğim görüntüyü veriyor fakat floating container div i bozuyor .... float ile çok denedim fakat olmadı :S

floatlanmış hali için:

internet explorer neden her zaman her yerde arıza anlamam

yagmayok · 13 Ekim 2008

Bu sorunu da clear ile halledebilirsin sanırım.

Onun için

.temizle {clear: both}

css'ye ekleyip istediğin yere

<div class="temizle"></div>

ekleyerek, sorunu halledebilirsin diye düşünüyorum...

Bir dene istersen...

PrOgRaMmeR · 13 Ekim 2008

clear da işe yaramıyor :S

yagmayok · 14 Ekim 2008

o bölümün css kodlarını ve div aralıklarını kısaltılmış olarak yazar mısın ?

Belki çzöüm üretebiliriz...

PrOgRaMmeR · 14 Ekim 2008

HTML:
------

HTML:

<div class="divlabel divlabelnarrow">Başlık - 1</div>
<div id="pofday">
<div class="photo"><img src="ortak/photos/thumbs/01.jpg" alt="Thumbnail Test" /></div>
.
.
.
.
.
<div class="photo"><img src="ortak/photos/thumbs/20.jpg" alt="Thumbnail Test" /></div>
</div>
<div class="divlabel divlabelnarrow">Başlık - 2</div>
<div id="lastrandom">
<div class="photo"><img src="ortak/photos/thumbs/14.jpg" alt="Thumbnail Test" /></div>
.
.
.
.
<div class="photo"><img src="ortak/photos/thumbs/20.jpg" alt="Thumbnail Test" /></div>
</div>

CSS
-------

Kod:

#main #pofday, #main #lastrandom {
	border-bottom:1px solid #999999;
	border-left:1px solid #999999;
	border-right:1px solid #999999;
	margin:10px 0px 0px 0px;
	padding:5px 5px 5px 20px;
	background-color:#c8c8c8;
	text-align:center;
}

#main #pofday .photo, #main #lastrandom .photo {
	width: 150px;
	min-height: 150px;
	min-width: 150px;
	display:inline-table;
	margin-bottom:15px;
	margin-right:20px;
	text-align:center;
	vertical-align:middle;
}

divlabel olan class lar div başlıkları olduğundan css pek konu ile alakalı değil o yüzden yazmıyorum......

PrOgRaMmeR · 14 Ekim 2008

arkadaşlar 2. bi clear div i koyunca sorun ortadan kalktı...
Yani .photo class larının baş ve sonuna koyunca düzeldi...
Teşekkürler...

yagmayok · 14 Ekim 2008

clear ile halledebilirsin demiştim

Sorunu çözdüğünüze sevindim...