Sorun şu ki ie7’de(ki ie6’yı öldürdük ama ie sorunlarından kurtulamadık) uyguladığım filtre: uygulanmıyor. http://www.colorzilla.com/gradient-editor/ sitesindeki aracı kullanarak renk geçişi kodlarımı oluşturuyorum.

div{
    background: #f6e6b4; /* Old browsers */
    background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#ed9017)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* IE10+ */
    background: linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */
    padding:5px 10px;
}

Şöyle bir kodumuz olsun uygulamaya ie7’de baktığımızda background: #ffd65e; /* Old browsers */ satırının sonucunu görüyoruz, halbuki ie7 doğrusal renk geçişini destekliyor, ancak hasLayout sorunu nedeni ile bu özelliği uygulamıyor. Bir yükseklik veya genişlik tanımı yapınca düzeliyor, ancak bu benim işime yaramıyor. Gerçek çözüm ise hasLayout sorunlarının kahramanı zoom:1 tanımı

div{
    background: #f6e6b4; /* Old browsers */
    background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#ed9017)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* IE10+ */
    background: linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */
    padding:5px 10px;
    zoom:1;
}

Kaynaklar

• http://stackoverflow.com/questions/3268834/css-gradient-height-for-ie
• http://stackoverflow.com/questions/213750/gradient-colors-in-internet-explorer

Çözümü çok basit olan bir sorun ama bu sorunu anlatmamın nedenlerinden biriside sorunların olacağı, ama bizim bu sorunları görüp çözmemiz gerektiğini anlatmaktır. İyi bir arayüz geliştirici ve hatta iyi bir programcı hataları bulup üzerine gidip çözebilendir.

Soruna gelirsek; Sorun Bitişik Kardeş Seçicileri kullandığımız elemanlar arasında eğer HTML yorum satırı eklersek ie7 bitişik kardeş seçicisi ile tanımladığımız bildirimleri yorumlamıyor.

<h2>Başlık</h2>
<!-- html yorumu -->
<p>Paragraf</p>

CSS kodu

  h2 + p { background-color: #fc0; }

Uygulaması bütün tarayıcılarda sorunsuz çalışırken ie7’de sonuç vermeyecektir. DOM’daki öğelerin konumuna göre çalışan bu seçicinin çalışmasında ie7 aradaki yorum satırlarınıda dikkate alarak istenen sonucunu vermediğini göreceğiz.

Çözüm için yorum satırını kullanmaya ne gerek var silelim demek ve yorumları silmek bir çözümdür. Ama ben ie ile sorun yaşıyorum diye yorum satırımı silmek istemem. Çözüm ie6 sorunları ile uğraşırken bulduğumuz şekilde olacaktır. Şartlı yorumları kullanarak çözüme ulaşmakta mümkündür.

<h2>Başlık</h2>
<!--[if !IE]>Başlık yaz <![endif]-->
<p>Paragraf</p>
<p>Paragraf 2</p>

Şeklinde bir çözüm işimizi görecektir.

Kaynaklar

• http://oncemade.com/adjacent-sibling-selector-bug-ie7/
• http://www.fatihhayrioglu.com/ie6un-tekrarlayan-karakter-sorunu/

Hayatımız İnternet Explorer ile uğraşmak ile geçiyor. Allah bizi gerçek hayatımızda para sıkıntısı ile, aile sorunları vb.sorunlar ile sınarken; sanal alemde de İnternet Explorer ile sınıyor galiba:D Ne yapalım başa gelen çekilir diyeceğiz ve çözüm arayıp düzeltmeye çalışacağız.

Bir örnek yapalım.

HTML Kodu(Tabloya verilen border ve bordercolor tanımları örneğe görsellik kazandırmak için eklenmiştir, sorun ile alakalı kodlar değildir.)

<div id="kapsul">
  <table width="100%" cellspacing="0" cellpadding="0" border="1" bordercolor="#0000FF">
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  </td>
    <td>Mauris facilisis elementum ipsum nec semper. </td>
    <td>Vestibulum nec turpis at lectus pulvinar consequat nec in lectus. </td>
  </tr>
  <tr>
    <td>Aliquam sit amet est ac est eleifend. </td>
    <td>Vivamus imperdiet.</td>
    <td>Pellentesque sagittis ultrices laoreet.</td>
  </tr>
  <tr>
    <td>In hac habitasse platea dictumst.</td>
    <td>Sed sed leo elit, eu ultricies metus.  </td>
    <td>Aenean massa nulla.</td>
  </tr>
  <tr>
    <td>In hac habitasse platea dictumst.</td>
    <td>Sed sed leo elit, eu ultricies metus.  </td>
    <td>Aenean massa nulla.</td>
  </tr>
  </table>
</div>

CSS Kodu

#kapsul{ width:40%; height:150px; overflow:auto}

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

Üstte ie7 altta Firefox görüntüsünü görüyoruz.

Bu sorun ile belli bir yükseklikteki içeriği overflow:auto ile otomatik kaydırma çubuğu çıkarmak için oluşturduğumuz bir alan içinde eğer yüzde yüz genişlikte bir tablo var ise karşılaşıyoruz. Kaydırma çubuğu yok iken sorun yok, ancak içerik uzayınca normalde sadece dikeyde çıkması gereken kaydırma çubuğu yatayda da çıkıyor.

Çözüm;

Çözüm için kapsayıcı katman içine bir katman daha açıyoruz ve hem dışta overflow:auto verdiğimiz katmana, hemde yeni oluşturduğumuz katmana zoom:1 özelliği atıyoruz.

<div id="kapsul">
  <div id="kapsulIci">
    <table width="100%" cellspacing="0" cellpadding="0" border="1" bordercolor="#0000FF">
    <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  </td>
    <td>Mauris facilisis elementum ipsum nec semper. </td>
    <td>Vestibulum nec turpis at lectus pulvinar consequat nec in lectus. </td>
    </tr>
    <tr>
    <td>Aliquam sit amet est ac est eleifend. </td>
    <td>Vivamus imperdiet.</td>
    <td>Pellentesque sagittis ultrices laoreet.</td>
    </tr>
    <tr>
    <td>In hac habitasse platea dictumst.</td>
    <td>Sed sed leo elit, eu ultricies metus.  </td>
    <td>Aenean massa nulla.</td>
    </tr>
    <tr>
    <td>In hac habitasse platea dictumst.</td>
    <td>Sed sed leo elit, eu ultricies metus.  </td>
    <td>Aenean massa nulla.</td>
    </tr>
    </table>
  </div>
</div>

CSS kodu

#kapsul{ width:40%; height:150px; zoom:1; overflow:auto;}
	#kapsulIci{zoom:1; }

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

Ayrıca yukarıdaki çözüm ie6 bazen sorun çıkarıyor, bu gibi durumlarda

<!--[if lt IE 7]><style> #kapsulIci { overflow: auto; } </style><![endif]-->

Eklememiz gerekiyor.

Hayatımızda(gerek gerçek, gerek sanal) sorunlar olacaktır. Sorunlardan kaçmamalıyız, üzerine gidip çözüm aramalıyız. Bir arayüz geliştiricinin kemale ermesi(Senior Front-End Developer) için sorunları ile baş etmesi şart. Çok mu hayat dersi verdim. Başınızı ağrıttı isem af ola.

Kalın sağlıcakla.

Kaynaklar

• http://stackoverflow.com/questions/139000/div-with-overflowauto-and-a-100-wide-table-problem
• http://bytes.com/topic/html-css/answers/100751-overflow-auto-problem-ie
• http://www.sitepoint.com/forums/showthread.php?t=661150
• http://forums.mozillazine.org/viewtopic.php?t=538190

Sorun

Sorunumuz tam olarak anlamak için daha önce anlattığım CSS ile buton yapmak adlı makaledeki görselliği arttırılmış esnek butonu örneğini incelememiz yeterli.

Genelde esnek yapılı bu tip resimli menüler veya butonları oluştururken bir elemana iki background-image atayamadığımız için iç içe iki eleman koyarız. (Sliding Door) esnek yapılar olarak adlandırılan yöntem kullandığımızda başımıza geliyor.

a {
    display:block;
    float:left;
    width:auto; background:url(cancanli_butonlar_ard.gif) 0 0 no-repeat;
    text-decoration:none;
    font-size:14px;
    font-weight:bold
}
a span {
    display:block;
    float:left; background:url(cancanli_butonlar_ard.gif) right -36px no-repeat;
    height:28px;
    width:150px;
    padding:0 20px;
    line-height:28px;
    color:#363636
}

HTML kodu

<a href="#"><span>Örnek Buton Metni</span></a>

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

Diğer tarayıcılarda sorun olmazken ie6 ve ie7’de el işareti yerine normal fare imleci görünüyor.

Aşağıda ie7 ve Firefox görüntüleri yanyana görünmektedir.

IE7 de buton üzerinde normal imleç görünürken Firefox ve diğer tarayıcılarda normal olarak el işareti görüntülenecektir.

Çözüm

Çözümü çok basit tabi

a span {
    display:block;
    float:left; background:url(cancanli_butonlar_ard.gif) right -36px no-repeat;
    height:28px;
    width:150px;
    padding:0 20px;
    line-height:28px;
    color:#363636;
    cursor:pointer
}

cursor:pointer özelliğini eklemek yeterli oluyor.

Bu sorunu niye yazdım? Benim gibi kod yazarken unutuyorsanız hatırlayalım diye. İşin ilginç yanı internette ufak bir araştırma yaptım ama hiç bu sorun ile karşılaşanı görmedim, belki ben tam anahtar kelimeleri bulamadım

border-radius özelliği CSS3 ile birlikte geldi ve HTML elemanlarına yuvarlak kenar özelliği verme işine yarıyor. Web 2.0 ve yeni stiller ile birlikte bir çok sitede yerini alan yuvarlak kenarlı yapılar kullanılıyor, buda bu özelliği önemli kılıyor.

Köşeli yapılardan kaçan bir çok tasarımcı artık yuvarlak köşeli tasarımları tercih ediyor. Bu arada şunuda söylemeden geçemeyeceğim bazı sitelerde hiç hoş durmuyor yuvarlak kenar, her şeyi yerinde ve göz zevkine uygun kullanmak en iyisi.

Yapısı : <border-radius>{1,4} [ / <border-radius>{1,4}]?
Aldığı Değerler : [ <uzunluk> | <yüzde> ] [ <uzunluk> | <yüzde> ]? 
Başlangıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler ve tabiki tablo elementine border-collapse değeri collapse olarak atalı ise uygulanır
Kalıtsallık: Yok

Tek değer atanmış ise, dört köşeyede aynı değer uygulanır.
İki değer atanmış ise, ilk değer sol üst ve sağ alt köşeye; ikinci değer sağ üst ve sol alt köşeye uygulanır.
Dört değer atanmış ise, sırası ile sol üst, sağ üst, sağ alt ve sol alt köşelere uygulanır.
Üç değer atanmış ise, ikinci değer sağ üst ve sol alt köşeye uygulanır.

Tarayıcı Uyumu:
Internet Explorer desteklemiyor (İE9 da gelecek) 
Firefox 2+
Safari 3+ (kısmen)
Opera 10.50+
W3C’s CSS Level 3+
CSS Profile 3.0

- Safari yüzde değerleri desteklemiyor.
- Safari/Webkit tabanlı tarayıcılar her 4 köşeye sadece bir tanımı kabul ediyor.
- Safari/webkit tarayıcıları (/) ile ayrılan değerleri kabul etmiyor. Bu gibi değerleri kullanmak için aşağıdaki gibi bir atama yapmalıyız. Elips şeklinde sonuçlar elde etmke için (/) ayracı kullanılır.

	-webkit-border-radius:  40px 10px;
	-moz-border-radius:  40px/10px;
	border-radius:  40px/10px;

Uygulama

Bugünkü durumda border-radius tanımı tek bir tanımlama olarak atanmamaktadır, farklı tarayıcılar ön ek kullanarak bu özelliği desteklemektedir. Webkit tabanlı tarayıcılar(Safari ve Google Chrome) için -webkit, Gecko tabanlı(Firefox) tarayıcılar için -moz ön ekleri kullanılmaktadır. 

Bu durum bazen çok uzun kodlar üretmemize neden oluyor. İleride umarım bu durum düzelir. 

İlk örneğimizi yapalım

div#kutu {
    width: 400px;
    padding: 20px;
    border-radius: 10px; /* Standart */
    -moz-border-radius: 10px; /* Firefox */
    -webkit-border-radius: 10px; /* Safari ve Chrome */
    background: #F00;
    margin-bottom: 10px;
}

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

İkinci örnek

div#kutu{
    width: 400px;
    padding: 20px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    background: #F00;
    white-space:pre
 }

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

http://muddledramblings.com/table-of-css3-border-radius-compliance  ve http://shapeshed.com/examples/border-radius/ adresindeki örnekler inceleyerek bu özellik ile neler yapabileceğimizi görebiliriz.

İnternet Explorer Desteği

Yukarıda anlattığımız tanımları maalesef İnternet Explorer desteklememektedir, daha ön görünümü yayınlanan ie9′da desteklediğini açıkladı.

İnternet explorer için çözüm üreten bir çok javascript kodu mevcut, ben burada sizlere belli başlılarının linklerini vereceğim ve ufak bilgiler vereceğim.

DD roundies

Bu script güzel çalışıyor. Bir çok farklı durumlar için güzel bir çözüm üretiyor. Herhangi bir javascript kütüphanesine ihtiyacı yoktur. CSS3 border-radius özelliğini destekleyenler için bu özelliği desteklemeyenler için ise javascript kodunu ekleyerek bize güzel bir çözüm üretir. Köşe yumuşatması güzel

Curvy Corners ve jQuery Plugin Curvy Corners

Diğer güzel çözüm önerilerinden ikiside bu scriptlerdir. Köşe yumuşatması güzel. Background resimleri ile iyi çalışıyor, ancak CSS3 ile olan uygulamalarda sorun çıkarıyor. CSS3 border-radius destekleyen tarayıcı kontrolü yapmıyorlar ve fazladan yüklenmeye neden oluyorlar.

Nifty Corners ve jquery Corner

Köşe yumuşatması güzel değil. Yuvarlak kenar için üretilen kodda gereksiz bir çok eleman var. Pek önerilebilecek bir çözüm değil.

HTML Remix

Bu çözümün en güzel yanı yuvarlak kenar için ekstra kod yazmaya gerek olmaması. Yazdığımız border-radius değerini alıp desteklemeyen tarayıcılara göre kod yazıyor. Script tanımını css kodu içerisinden yapıyoruz.

.curved {
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    behavior:url(border-radius.htc);
}

Köşe yumuşatması güzeldir. 4.8 kb’lık dosya boyutu ile çok cazip boyuta sahip.

css3pie

CSS 3′ü desteklemeyen tarayıcılar için komple bir çözüm üreten bu script İnternet Explorer için üretilen çözümlerden birisidir. Tek sorunu bütünleşik bir çözüm sunduğu için dosya boyutunun biraz büyük olmasıdır. Köşe yumuşaklığı güzel. CSS3′ü destekleyen tarayıcılar için css kodunu desteklemeyen tarayıcılar için ise script kodunu uyguluyor olması güzel.

Sonuç

border-radius tanımını destekleyen tarayıcılar açısından bir sorunumuz yoktur. Sorunumuz desteği sağlamayan ie ile dir. 

Javascript ile ürettiğimiz çözümler normal tanımın yerini tutmayacaktır hiç bir zaman. Sayfa içerisinden bir çok elemana yuvarlak kenar uygulandığında ie için üretilen çözüm sayfanın fazladan yavaşlamasına neden olacaktır. 

Bir elemana yuvarlak kenar ve gölge uygulandığında ie için üretilen bir çok çözümde bazı sorunlar ile karşılaşılabilir. Bu gibi durumlarda resim ile çözüm üretmeniz tavsiye olunur. 

İE için üretilen çözümler için yukarıda yazdıklarım kendi gördüklerim ve internette araştırıp gördüklerim bilgilerden derlemedir. Bu değerlendirmelere sizin kendi uygulamalarınızdaki sonuçlarıda ekleyerek bir scripti seçmenizi öneririm. 

Bence en güzeli eğer tercih imkanınız varsa destekleyen tarayıcılar için kodu yazmak desteklemeyenler için olduğu gibi bırakmak(twitter.com sitesinde olduğu gibi.)

Kaynaklar

• http://webdesignernotebook.com/css/an-ode-to-border-radius/
• http://leaverou.me/2009/02/css3-border-radius-today/
• http://www.the-art-of-web.com/css/border-radius/ (border-radius)
• http://www.css3.info/preview/rounded-border/
• http://24ways.org/2006/rounded-corner-boxes-the-css3-way
• http://www.css3.info/border-radius-apple-vs-mozilla/
• http://woork.blogspot.com/2009/08/css3-rounded-corners-for-every-browser.html
• http://www.smileycat.com/miaow/archives/000044.php (tüm makalelerin listesi)
• http://www.netzgesta.de/corner/ (javascript)
• http://www.curvycorners.net/demos/ (javascript)
• http://www.html.it/articoli/niftycube/index.html (javascript)
• http://www.dillerdesign.com/experiment/DD_roundies/#animation (javascript)
• http://www.w3.org/TR/css3-background/#border-radius
• http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser (javascript)
• http://doctype.com/having-trouble-styling-cross-browser-buttons-input-submit (sorunlar)
• http://muddledramblings.com/table-of-css3-border-radius-compliance (taraycı destek tablosu)
• http://stackoverflow.com/questions/2687804/emulating-css3-border-radius-and-box-shadow-in-ie7-8

Sorunu şöyle tanımlayabilirim; overflow kullandığım bir eleman içindeki bir elemana position:relative tanımladığımda relative verdiğim eleman overflow uyguladığım elemanın dışına çıkıyor ve scroll olmuyor.

Şöyle küçük bir örnek durumu daha iyi gösterecektir.

<div id="icerikAlani">
    <p>İlk paragaraf</p>
    <p class="relative">position:relative uygulanan kısım</p>
</div>

CSS kodu da şöyle

#icerikAlani{
    height:80px;
    overflow:auto;
    width:200px;
    height:80px;
    background-color:#ccc
}
.relative{
    position:relative;
    background-color:lightblue;
    width:150px;
}

Sonuca ie 6 ve 7 ile baktığımızda aşağıdaki gibi bir sorun ile karşılaşacağız.

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

Sorunun çözümü ise çok basit. overflow uyguladığımız elemana position:relative tanımı yaparak sorunu giderebilirsiniz.

#icerikAlani{
    height:80px;
    overflow:auto;
    width:200px;
    height:80px;
    background-color:#ccc;
    position:relative;
}
.relative{
    position:relative;
    background-color:lightblue;
    width:150px;
}

Kaynaklar

• http://snook.ca/archives/html_and_css/position_relative_overflow_ie/
• http://www.rowanw.com/bugs/overflow_relative.htm
• http://dustyreagan.com/workaround-to-ies-overflow-auto-and/

Sorunumuzu tam olarak şöyle tanımlayabiliriz; Dikey olarak listelediğimiz menülerde ie’de fazladan boşluk gözüküyor. Bu durum bazen ie6′da bazense ie6 ve ie7′de oluyor.

Bir örnek verelim

<ul id="menu">
  <li><a href="#">Menu Bir</a></li>
  <li><a href="#">Menu İki</a></li>
  <li><a href="#">Menu Üç</a></li>
  <li><a href="#">Menu Dört</a> </li>
</ul>

CSS kodumuzda da

ul#menu li a{ display:block}

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

kodumuz olsun. Diğer tarayıcılarda normal bir görünüt alırken ie6′da liste öğeleri arasında fazladan boşluk görürüz.

Sorun İnternet Explorer’un hasLayout sorunudur. Aşağıdaki tanımlardan biri yapılması durumunda bu sorun düzelecektir.

display: inline-block
height: herhangi bir değeri
float: left veya right
*max-height: herhangi bir değeri
*max-width: herhangi bir değeri
*min-height: herhangi bir değeri
*min-width: herhangi bir değeri
*overflow: not visible
position: absolute
width: herhangi bir değeri
writing-mode: tb-rl
zoom: herhangi bir değeri

* ie7 de geçerli.

Biz bir tanesini seçelim.

* html ul#menu li a {height: 1px;}

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

Bu kodu yazdıktan sonra sayfa aşağıdaki gibi görünecektir.

Kaynaklar

• http://www.brunildo.org/test/IEWlispace.php
• http://www.hicksdesign.co.uk/journal/ie-whitespace-bug
• http://www.cssnewbie.com/fixing-ie6-whitespace-bug/
• http://orlandodefrias.com/2008/11/23/ie-unordered-list-extra-space-bug/
• http://archivist.incutio.com/viewlist/css-discuss/34926
• http://gtwebdev.com/workshop/gaps/white-space-bug.php

Sorunu açıklamaya çalışayım; postion:relative uyguladığımız elemanların(li) içinde postion:absolute kullanarak eklediğimiz elemanlar sıralı elemanlarının altında kalıyor.

Genelde bu durumla liste(li) elemanı içinde üzerine gelince açılan bir alan(menü) açtırmak istediğimizde karşılaşıyoruz.

Basit bir örnek ile durumu gösterelim.

.anaKatman {
    position: relative;
    width: 300px;
    border: 1px solid black;
}

.acilanBolum {
    position:absolute;
    left:0;
    width: 150px;
    border: 1px solid red;
    background: gray;
    z-index: 1000;
}

HTML kısmı

<div class="anaKatman">
    <div class="acilanBolum">
        Curabitur dapibus lacus elit. Maecenas nec ligula ipsum. Vivamus accumsan sollicitudin augue, vel sollicitudin mi varius sed. Proin in erat sit amet dolor tincidunt scelerisque eget nec felis. Curabitur dapibus lacus elit. Maecenas nec ligula ipsum.
    </div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non diam sit amet erat facilisis ultrices id vel turpis. Etiam pulvinar arcu ac felis pretium mollis. Etiam augue orci, iaculis non mollis et, venenatis vel ipsum.
</div>

<div class="anaKatman">
	Pellentesque sodales vehicula dictum. Nulla facilisi. Integer eget lectus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer imperdiet dictum interdum.
</div>
<div class="anaKatman">
	Pellentesque sodales vehicula dictum. Nulla facilisi. Integer eget lectus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer imperdiet dictum interdum.
</div>

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

Firefox’da yukarıdaki gibi sorunsuz görünüyor.

Üstte kalmasını istediğimiz katmana(acilanBolum) z-index:1000 değeri vermemize rağmen alttaki katmanın altında kalmaktadır İnternet explorer 6 ve 7 sürümlerinde. 

Çözüm için aşağıdan yukarı doğru artan z-index değerleri yazılmalıdır. Ben ardışık z-index değerleri atayarak yapıyorum bunu. Sırası ile z-index:1, z-index:2 ve z-index:3 değerlerini atıyorum aşağıdan yukarı doğru. Eğer araya bir eleman girme ihtimali varsa aralıklı verin değerleri 10, 20, 30 gibi.

HTMl kodunu aşağıdaki gibi değiştirince sorun çözüldü.

<div class="anaKatman" style="z-index:3">
<div class="acilanBolum">
	Curabitur dapibus lacus elit. Maecenas nec ligula ipsum. Vivamus accumsan sollicitudin augue, vel sollicitudin mi varius sed. Proin in erat sit amet dolor tincidunt scelerisque eget nec felis. Curabitur dapibus lacus elit. Maecenas nec ligula ipsum.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non diam sit amet erat facilisis ultrices id vel turpis. Etiam pulvinar arcu ac felis pretium mollis. Etiam augue orci, iaculis non mollis et, venenatis vel ipsum.
</div>

<div class="anaKatman" style="z-index:2">
Pellentesque sodales vehicula dictum. Nulla facilisi. Integer eget lectus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer imperdiet dictum interdum.
</div>
<div class="anaKatman" style="z-index:1">
Pellentesque sodales vehicula dictum. Nulla facilisi. Integer eget lectus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer imperdiet dictum interdum.
</div>

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

Kaynaklar

• Beginning CSS: Cascading Style Sheets for Web Design
• http://benhollis.net/experiments/ie7_tests/zindex.html

İlk harfi büyük paragraflar oluşturma işi aslında dergilerde sık uygulanan bir yöntemdir. Genelde dergilerin başlangıç paragrafının ilk harfi 2 veya daha fazla satır yüksekliğinde oluşturarak farklı ve güzel bir görünüm kazandırırlar. Bu durumu biz css ile yapabiliyoruz. 

Biz bu görüntüyü first-letter seçicisi ile elde edebiliyoruz. Hatta bu seçicinin adı drop caps-ilk harfi büyük harf seçicisi diyede geçiyor. Bizim için en büyük avantajı ie6 dahil tüm tarayıcıların bu özelliği desteklemesi.

:first-letter seçicisini tanımlanabilen özellikler listesi;

• font özellikleri
• color özellikleri
• background özellikleri
• text-decoration
• vertical-align (float değeri none ise)
• text-transform
• line-height
• margin özellikleri
• padding özellikleri
• border özellikleri
• float
• text-shadow
• clear

İlk Denememiz

HTML kodlarımız

<p class="introduction">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

CSS kodlarımız

p{
    width:350px;
    background-color:#272722;
    padding:10px;
    color:#fff;
}

p.introduction:first-letter {
    font-size: 4.2em;
    float: left;
    line-height: 1em;
    margin: 0.13em 0.13em 0.13em 0;
}

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

Firefox’da yukarıdaki görüntüyü elde ederken

İnternet Explorer’da yukarıdaki gibi bir görüntü elde ederiz. Dikkat ederseniz bir explorerda L harfi yukarıya daha yakın.

Sorunu gidermek için line-height değerini 1em olarak atıyoruz. Farklı line-height değerleri ile padding uygulamalarında ie 6 ve 7′de sorun çıkıyor, line-height değerini 1 em’de tutmak mantık en azından ie için 1em yapmak gerekiyor.

Fark stillerde uygulamalar yapabiliriz.

İlk harfi font-face ile özel bir yazı tipi ile oluşturarak güzel bir görüntü elde edebiliriz. Yazı tipini(PaladinFLF) http://www.fontsquirrel.com/fontface sitesinden aldım.

@font-face {
	font-family: 'PaladinFLFRegular';
	src: url('PaladinFLF.eot');
	src: local('☺'), url('PaladinFLF.ttf') format('truetype'), url('PaladinFLF.svg#webfont') format('svg');
}

p{width:350px; background-color:#272722; padding:10px; color:#fff;}
p.introduction:first-letter {
	font: 4.2em/1em 'PaladinFLFRegular', Arial, sans-serif;
    float: left;
    margin: 0.13em 0.13em 0.13em 0;
}

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

İşe Biraz daha renk katalım

İlk harfin etrafına kenar çizgisi atayıp ardalan rengini değiştirelim.

@font-face {
	font-family: 'PaladinFLFRegular';
	src: url('PaladinFLF.eot');
	src: local('☺'), url('PaladinFLF.ttf') format('truetype'), url('PaladinFLF.svg#webfont') format('svg');
}

p{
	width:350px;
	background-color:#272722;
	padding:10px;
	color:#fff;
}

p.introduction:first-letter {
	font: 4.2em/0.6em 'PaladinFLFRegular', Arial, sans-serif;
    float: left;
    margin: 0.13em 0.13em 0 0;
	border:3px solid #fff;
	padding:0.13em;
	background-color:#F30;
	line-height:1em;
}

HTML kodları

<p class="introduction">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

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

Ardalan Resmi ile

Harfin ardalanına bir resim koyup üzerine harfi koymayı deniyorum.

  @font-face {
	font-family: 'PaladinFLFRegular';
	src: url('PaladinFLF.eot');
	src: local('☺'), url('PaladinFLF.ttf') format('truetype'), url('PaladinFLF.svg#webfont') format('svg');
}

p{
	width:350px;
	background-color:#272722;
	padding:10px;
	color:#fff;
}

p.introduction:first-letter {
	font: 4em/1em 'PaladinFLFRegular', Arial, sans-serif;
    float: left;
    margin: 0.13em 0.13em 0 0;
	padding:0.4em 0.5em 0.4em 0.3em ;
	background-color:#F30;
	background:url(t.jpg) 0 0 no-repeat;
	text-shadow:2px 2px 2px #999
}
  

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

Firefox ile yukarıdaki gibi güzel bir sonuç elde ediyoruz. Ancak İnternet Explorer’da sorun yaşıyoruz. 

Bu duruma çözüm üretmek için bir kaç yol var. İlki resmi direk içeriğe ekleyip float:left ile sola yaslayarak çözmek 

p{
	width:350px;
	background-color:#272722;
	padding:10px;
	color:#fff;
}

p.introduction img {
	float:left;
	margin-right:0.8em
}

HTML kodu

<p class="introduction"><img src="t1.jpg" width="93" height="100" />empor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Velit esse cillum dolore eu fugiat nulla pariatur</p>

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

Diğer bir yöntem bu harfi span içine alıp background olarak tanımlamaktır.

CSS3 ile ekstra kod kullanmadan

Sayfamızın ilk paragrafının ilk harfine uygulama yapıyoruz. first-child seçicisi bu imkanı bize sağlar. ancak bu özelliği ie < 9 desteklemiyor.

p:first-child:first-letter{
  font-size: 4.2em;  float: left;  line-height: 1em;  margin: 0.13em 0.13em 0.13em 0;
}

Kaynaklar

• http://www.sitepoint.com/blogs/2010/04/15/a-simple-css-drop-cap/
• http://safalra.com/web-design/typography/css-drop-caps/
• http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=111 özel fontlar ile 
• http://www.pauldruce.com/CSS%20DROP%20CAP (bazı sorunlar ve çözüm)
• http://www.learningjquery.com/2006/12/multiple-fancy-drop-caps (jquery ile)
• http://www.htmldog.com/articles/dropcaps/
• http://css-tricks.com/snippets/css/drop-caps/
• http://oncemade.com/css-tip-drop-caps/
• http://azizname.blogspot.com/2006/10/magazine-style-drop-caps.html
• http://dailydropcap.com/ (günlük örnekler)
• http://jackosborne.co.uk/articles/pseudo-drop-caps/
• http://www.akxl.net/labs/articles/text-wrapped-drop-caps-in-css-using-the-first-letter-selector/
• http://www.users.globalnet.co.uk/~arcus/html/dropcaps.html

Ben genelde bu sorun ile özel textbox alanlarını kodlarken karşılaşıyorum.

yukarıdaki gibi bir tasarımı koda çevirirken

<div class="dis">
    <div class="ic"><input type="text" value="Arama" /></div>
</div>

CSS kodu

div.dis{
	margin-left:65px;
}
div.ic{
    width:241px;
    height:25px;
    background:url(arama_ardalan.gif) 0 0 no-repeat
}
div.ic input{
    border:0;
    background:none;
    width:204px;
    margin:4px 0 0 5px;
    font-size:11px;
    color:#534013;
}

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

Böyle bir kod yazıyorum. Dıştaki div(div.dis) herhangi bir kapsayıcı div olarak düşünün. Sayfanın diğer bir öğesi yani bu arama kısmı ile alakası yok. Bu kapsayıcı katmandaki margin tanımı ie’de sorun çıkarıyor.

Firefox’da yukarıdaki gibi bir görüntü alırken

İnternet Explore 6 ve 7 sürümlerinde yukarıdaki gibi bir görüntü ile karşılaşıyorum. En dıştaki katmana atadığım margin-left değeri içerideki elemanımı etkiliyor. Kalıtsal olarak bu değeri alıyor. Sorunu ilk önce "IE’da İkikat görülen Margin Problemi ve Çözümü" anlattığım gibi bir sorun olduğunu düşündüm ama değildi. Bu sefer ki farklı bir sorun. positioniseverything.net sitesinde aynı sorunu görünce anca adını koyabildim.

Sorun; input alanını kapsayan ebeveyn elemanda hasLayout ve margin tanımı var ise oluyor. Kaynak kısmında verdiğim sitede bir kaç çözüm önerisi var. Ancak ben hasLayout sorunlarının en kolay çözüm yolu olan zoom:1 tanımı ile bu sorunu aştım. Margin tanımı olan elemana zoom:1 tanımı yapınca sorun çözüldü

div.dis{ margin-left:65px; zoom:1}

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

Bu sorun tüm input çeşitlerinde(text, checkbox, radyo buton ve resim) meydana geliyor, ayrıca textarea’da yaşanıyor bu sorun, ancak select elemanında bu sorun ile karşılaşılmıyor.

Kaynak

• http://www.positioniseverything.net/explorer/inherited_margin.html