‘ie7’ etiketi için sonuçlar
ie7 Renk Geçişi Sorunu ve Çözümü
Ekim 20th, 2011 • 2 yorum CSS
Etiketler: css sorunları, filtre, ie7, renk geçişi
CSS3 artık bazı özellikleri ile hayatımıza giriyor, tabi kod yığını halinde girse de güzel sonuçları gördükçe kod yığını sorununu dert etmiyoruz. Tabi sorunlardan bir taneside İnternet Explorer desteklememesi. Daha önce İnternet Explorer için çözüm üretmiş olduğumuz box-shadow özelliğini anlatmıştık. Her şey buraya kadar güzel, ancak geçenlerde bir sorunla karşılaştım ve sizlerle paylaşmak istedim.
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
İE7 Bitişik Kardeş Seçicisi Sorunu
Eylül 6th, 2011 • 1 yorum CSS
Etiketler: bitişik kardeş seçiciler, ie7, sorun
Geçen hafta “IE6 Sonrası Kod Yazma Alışkanlıklarımızı Güncellemek” adlı makale ile ie6 ile vedalaştık. Tabi orada söylediğimiz gibi ie6’nın bitmiş olması sorunlarımızın bitmiş olduğu anlamına gelmiyor. İşte sizinle o makalede artık rahat rahat kullanabileceğimizi söylediğimizi Bitişik Kardeş Seçicisi ile ilgili bir sorunu burada sizlerle paylaşacağım.
Çö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
overflow:auto içinde %100 genişlikte tablo kullanımında ie7’de yatay kaydırma çubuğu sorunu
Ocak 13th, 2011 • 4 yorum CSS, XHTML
Etiketler: 0 genişlikte tablo, ie6, ie7, kaydırma çubuğu sorunu, overflow:auto
Başlığı açıklayıcı yazayım diye uzattım, yinede tam açıklamıyor sorunu. Tam metin şöyle olmalı “overflow:auto atanan eleman içinde %100 genişlikli tablo kullanımı ve bu tablonun ie7’de meydana getirdiği fazladan yatay kaydırma çubuğu sorunu ” Bu tanımı daha iyi yaparım deyipte başlık öneren varsa başlığı değiştirebilirim.
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
IE6 ve IE7′de bağlantılardaki cursor sorunu
Eylül 28th, 2010 • CSS, XHTML
Etiketler: cursor sorunu, esnek yapılı butonlar, ie6, ie7, sliding door, sorun
Aslında başlığı nasıl atacağımı şaşırdığım için kısa bir başlık attım.
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
Yuvarlak kenarlı kutular(border-radius) oluşturmak
Temmuz 20th, 2010 • 14 yorum CSS, XHTML
Etiketler: border-radius, css3, ie6, ie7, ie8, yuvarlak kenar, yuvarlak kenarlı kutular
Web tasarımcılarını tercih ettiği tekniklerden biridir yuvarlak köşeli alanlar oluşturmak. IE hariç css ile bu yapıyı kurmak çok basittir. Burada beraber yuvarlak kenarlı yapıları oluşturmayı göreceğiz. Ayrıca IE için javascript çözümlerini ele alacağız.
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. Okumaya devam edin »
overflow ve position:relative kullanımında ie sorunu
Haziran 30th, 2010 • 4 yorum CSS, XHTML
Etiketler: ie, ie6, ie7, overflow, position:relative, sorun
Bir sorun ile daha karşınızdayım. Evet yine ie ve yine sorun. Bir projeye başladığımda kodlamayı yaparken devamlı ie6 ile test ediyorum, ama bazı sorunları daha çözerim diye bırakıyorum, bunun güzel bir şey olduğunu biliyorum ama sorunlardan gına gelince kendimi rahatlatmak için böyle bir yola başvuruyorum. Daha sonra projenin sonlarına doğru bu sorunların üzerine eğiliyorum. İlk baktığımda bana çok zor gibi gelen bazı sorunları gidermek için bazen tek bir arama ile cevaba ulaşıyorum ve seviniyorum, korktuğum kadar beni uğraştırmadığı için.
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. Okumaya devam edin »
