<ul>
  <li>deneme</li>
  <li>olarak</li>
  <li>bir örnek </li>
</ul>

Yatay bir menü olacağı için

  ul li{display:inline;}

eklemesini yaptım, daha sonra da padding değerleri ekleyince fark ortaya çıktı.

  ul li{ padding:0 12px; background-color:#999}

İşin aslı İnternet Explorer 6 ve 7’de istediğim gibi olurken yeni nesil tarayıcılarda arada fazladan boşluklar atanmış gördüm. margin:0 değeri atadım ama olmadı biraz araştırınca gördüm ki display:inline elemanlar(display:inline-block’ta da oluyor) arasında kod kısmında boşluk varsa bu boşluklar yorumlanan sayfada da görünüyor.

Aradaki boşlukları kaldırmak için bir kaç yöntem var. Yatay menü oluşturmak için diğer bir yöntem olan float yöntemini denemek bunlardan biri

  ul li{ float:left}

Diğer bir çözüm yolu ise aradaki boşlukları kaldırmak.

<ul>
 <li>deneme</li><li>olarak</li><li>bir örnek </li>
</ul>

İnternet Explorer 8 yayıldıkça sorunları ortay çıkmaya başladı, yani test potamıza girmeye başladı. Her ne kadar uyumluluk kodu ile İnternet Explorer 7 gibi yorumlamasını sağlayıp test tarayıcı sayısını bire düşürme imkanımız olsada yeniliklerinden yararlanmak için bu kodu kullanmamak gerekebilir. Ayrıca makaleyi geç yazmamızın bir avantajı oldu o da ie8 sorunlarınıda görmeye başladık. 

İnternet Explorer 8 ile birlikte CSS2.1 standartlarını tam desteklediğini açıkladı.

İnternet Explorer 8 ile gelen CSS özellikleri listesi;

Float

Float uygulamalarındaki hasLayout‘dan kaynaklanan bir çok sorunun giderildiği söyleniyor. İşin aslı hasLayout işleyişi tamamen kaldırılmış ie8′de. Bu sürümdeki en büyük gelişme budur.

Margin Çökme Sorunu

Margin çökme sorunu giderilmiş.

:focus Sözde Sınıfı

Klavyeden elementlere odaklanmamızı sağlayan ve erişebilirlik için önemli olan bu özellik İnternet Exploerer 8 ile geldi

a:focus {
	border: solid 1px red;
}

:before and :after Sözde Elementleri

Bir elemanın öncesine ve sonrasına content özelliği ile birlikte içerik eklememizi sağlayan bu özellik ie8 ile birlikte geldi.

#box:before {
	content: "Not:";
}

#box:after {
	content: "son";
}

:lang() Sözde sınıfı

Sayfa içeriğinde farklı dilde kullanılan içeriği yakalamak için kullanılan bir seçicidir.

:lang(fr) {
	tanimlar
}

:active Sözde sınıfı işlevselliği arttı

Eskiden sadece a bağlantıya verilen özellikleri tanımlayan ie8 şimdi tüm HTML elementlerini kapsıyor artık.

list-style-type Özelliğine ek değerler eklenmiş

list-style-type özelliğinin bir çok değeri var. İnternet Explorer 8 öncesi bunların yarısını destekliyordu 8 ile birlikte hepsini destekliyor.

content özellikleri destekliyor

• content
• counter-increment
• counter-reset
• quotes

:after, :before sözde seçicileri ile birlikte content özelliklerini destekliyor artık ie8

Tablo Özelliklerinin tamamını destekliyor artık

• caption-side 
• border-spacing

özelliklerini destekliyor. Ayrıca

• border-collapse
• border-style
• empty-cells

özelliklerinide tam destekliyor, yani bu özelliklerin tüm değerlerini destekliyor. Eskiden kısmen desteklediği bu özellikleri şimdi tammen destekliyor.

Yazı ve Metin Özellikleri

• font-weight
• white-space (pre-wrap ve pre-line değerleri destekleniyor)
• word-spacing

Ayrıca text-decoration özelliğinin overline değeride destekleniyor.

Yazdırma Özellikleri

@page özellikleri tam olarak destekleniyor.

• page-break-inside
• widows
• orphans

Dış Hat çizgisi(Outline) Özellikleri

Dış hat çizgisi özellikleri desteği geldi.

• outline
• outline-color
• outline-style
• outline-width

Data URI Desteği

Internet Explorer 8 ile birlikte DATA URI desteği geliyor. DATA URI kısaca html dosyasından ayrı yapıların yani resimlerin html içine gömme imkanı verir bize. internet Explorer 8 sadece css dosyalarına eklenmesine izin veriyor ayrıca bir kısıtlama var ie8 en fazla 32kb boyutuna kadar destekliyor.

Özel uzantılar ile yeni özellik desteği

Firefox, webkit ve Opera’dan sonra Microsoft’da özel uzantılar ile yeni özellik desteğini getirdi. Aşağıda özellikler listelendi;

• -ms-accelerator
• -ms-background-position-x
• -ms-background-position-y
• -ms-behavior
• -ms-filter
• -ms-ime-mode
• -ms-layout-flow
• -ms-layout-grid
• -ms-layout-grid-char
• -ms-layout-grid-line
• -ms-layout-grid-mode
• -ms-layout-grid-type
• -ms-overflow-x
• -ms-overflow-y
• -ms-scrollbar-3dlight-color
• -ms-scrollbar-arrow-color
• -ms-scrollbar-base-color
• -ms-scrollbar-darkshadow-color
• -ms-scrollbar-face-color
• -ms-scrollbar-highlight-color
• -ms-scrollbar-shadow-color
• -ms-scrollbar-track-color
• -ms-text-align-last
• -ms-text-autospace
• -ms-text-justify
• -ms-text-kashida-space
• -ms-text-overflow
• -ms-text-underline-position
• -ms-word-break
• -ms-word-wrap
• -ms-writing-mode
• -ms-zoom

Sonuç

Tüm bu özellikleri sıraladıktan sonra beni sevindiren üç özellik var. Birincisi hasLayout’un kaldırılması, ikincisi DATA URI desteğinin gelmesi ve display:inline-block özelliğinin tam desteğidir.

Ayrıca ie8 sorunları hakkında bilgi edinmek isteyenler kaynaklar kısmında hata linklerinden gerekli bilgiyi alabilirler. Ben sorunlarla karşılaştıkça sitemde yayınlayacağım hataları.

Hoşçakalın.

Kaynaklar

• http://msdn.microsoft.com/en-us/library/cc304082%28VS.85%29.aspx
• http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/
• http://www.howtocreate.co.uk/ie8.html
• http://reference.sitepoint.com/css
• http://www.evotech.net/blog/2009/03/ie8-css-support/
• http://css-discuss.incutio.com/wiki/IE8#CSS3_selectors (ie8 sorunları)
• http://jhop.me/ie8-bugs (ie8 hataları)
• http://www.gtalbot.org/BrowserBugsSection/
• http://techblog.procurios.nl/k/news/view/33224/14863/Testing-Internet-Explorer-8-CSS3-for-Web-Design.html (CSS3 desteği)

display:inline-block tanımı yapılmış elemanlar satır için akış içinde satır içi eleman gibi davranırken, elemente genişlik, yükseklik ve dikey margin değerleri tanımlanırsa satır içinde blok-level özelliğine bürünür.

display:inline-block elementler çevresindeki elementlere ve satır içi kutu içeriklerine göre farklı davranışlar gösterir.

Durumu daha iyi anlamak için genel bir örnek yapalım. 3 paraftan oluşan bir içeriğimiz olsun ve bu içerikteki belli bir kısmı paragraf etiketi içine alalım ve bunlara sırası ile display:block, display:inline ve display:inline-block tanımları atayalım

<div id="denemeBir"> Lorem ipsum dolor sit amet... <p>Praesent id nunc eros. Integer mauris orci, venenatis ac tempor ut, gravida ac diam. </p> Pellentesque...</div>
<div id="denemeIki">Quisque at venenatis nulla...<p>Nam fermentum porttitor hendrerit.</p> Mauris ante nulla..</div>
<div id="denemeUc"> Sed urna neque...<p>Sed est lacus, laoreet at malesuada quis, convallis ut nibh.</p> Sed dapibus...</div>

CSS kodu

div {margin: 10px 0; border: 1px solid #000;}
p {border: 1px dotted #000;}
    div#denemeBir p {display: block; width: 50px; text-align: center; background-color:#FF0}
    div#denemeIki p {display: inline; width: 50px; text-align: center; background-color:#0FF}
    div#denemeUc p {display: inline-block; width: 50px; text-align: center; background-color:#F0F}

Örneği görmek için tıklayınız.

Aynı yapıdaki elemanların display özelliğine sırası ile block, inline ve inline-block tanımlarını atadık.

display:block uygulanan paragraf kendisine atanan width, text-align:center özelliğini yorumlamış ve blok-level bir element olarak sonrasına bir boşluk bırakmıştır.

display:inline tanımı yapılmış paragraf kendisine atanan width, text-align:center tanımlarını görmemiştir.

display:inline-block uygulanmış paragraf ise kendisine uygulanan width ve text-align:center tanımlarını görmüş ama bir blok-level element gibi sonrasına bir boşluk bırakmamıştır. Tam bir hibrit özellik göstermiştir.

display:inline-block tanımını daha iyi anlamak için nerelerde kullanırız neler yapabiliriz buna bakalım.

Float kullanmadan display:inline-block ile elemanları yan yana dizmek

<div id="menu">
<a href="">Ana Sayfa</a>
 <a href="">Ürünler</a>
<a href="">İletişim</a>
</div>

CSS kodumuzu yazalım;

#menu a{
  width:150px;
  height:50px;
  display: inline-block;
  margin:0;
  padding:5px;
  color: #1B1B1B;
  background-color: #E2E2E2;
  text-decoration: none;
  border-top:5px solid #999
}

Örneği görmek için tıklayınız.

Bu kod ile biz öğeleri yan yana dizeriz. Normalde hiç bir tanım yapmasak da bu elemanlar yan yana dizilecekti, ancak bu elemanlar arasındaki mesafeyi ayarlıyamıyacaktık. Hem satır içi eleman gibi yan yana dursun hemde genişlik, yükseklik ve margin tanımlarını uygulayalım istersek display:inline-block tanımı yapmalıyız.

Dikeyde ortalama

Float uygulanmış elemanların dikeyde ortalamak çok zordur, aksine display:inline-block uyguladığımız elemanları sadece vertical-align özelliği kullanarak dikey ortalama yaparız. Dikeyde ortalama aynı seviyedeki elemanlar arasında olduğunu unutmamak lazım.

Bir örnek yapalım. Yan yana dizilmiş üç kutu hazırlayalım ve bunları kapsayıcı katmana göre dikey olarak üstte, ortada ve altta hizalayalım.

<div class="anaKapsul">
    <div class="solKutu">Sol</div>
    <div class="ortaKutu">Orta</div>
    <div class="sagKutu">Sağ</div>
</div>

CSS kodumuzu yazalım.

.anaKapsul { border: 1px gray solid; padding: 5px; text-align: center; }
    .solKutu { display: inline-block; background-color: lightblue; vertical-align: middle; width: 200px; height: 200px; }
    .ortaKutu { display: inline-block; background-color: yellow; vertical-align: middle; width: 200px; height: 150px; }
    .sagKutu { display: inline-block; background-color: gray; vertical-align: bottom; width: 200px; height: 100px; }

Örneği görmek için tıklayınız.

Firefox, Safari, Google Chrome, Opera ve İE8′de bu görüntüyü elde ederiz. Ancak ie7 ve ie6′da durum böyle değildir.

Bu tarayıcılarda aynı sonucu elde etmek için bu tarayıcılar için bu elemnalara display:inline ve zoom:1 tanımı yapmalıyız. Bunun için tüm tarayıcılar için düzeltmeler kısmındaki kodlardan yararlanacağım.

*:first-child+html div.anaKapsul div{display:inline; zoom: 1;}
* html div.anaKapsul div{display:inline; zoom: 1;}

Bu kodları ekledikten sonra sorunumuz düzeldi.

Kaynaklar

• http://www.search-this.com/2008/08/28/lets-all-get-inline-in-a-block-in-a-block/
• http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
• http://helephant.com/2009/08/a-great-big-welcome-to-inline-block/
• http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
• http://kempwire.com/browsers/firefox-2-does-not-support-inline-block.html
• http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
• http://www.quirksmode.org/css/display.html#t03
• http://blog.ternstyle.us/blog/float-vs-inline-block
• http://www.sitepoint.com/forums/showthread.php?t=596130 (sorun )