‘sorun’ etiketi için sonuçlar
overflow ve position:relative kullanımında ie sorunu
Haziran 30th, 2010 • 3 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 »
IE’de Liste elemanları arasındaki boşluk sorunu
Mayıs 31st, 2010 • 4 yorum CSS
Etiketler: hasLayout, ie, ie6, ie7, liste boşluk sorunu, sorun
Bu sorun ile çok karşılaştım. Bir çok insanda bu sorun nedeni ile bana mesaj attı. Son mesajdan sonra konuyu yazmalıyım dedim.
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
İE6 sorunu: Bağlantı içi elemanlarda hover sorunu
Mayıs 11th, 2010 • 6 yorum CSS
Etiketler: :hover, bağlantı içi, ie6, sorun
Yine bir ie6 sorunu ile karşı karşıyayız. Evet proje biraz dallı budaklı olunca ie6 sorunları başa bela olmaya başladı. Normal standart site tasarımında sorunlar belli idi, ona göre kod yazıyordum, ancak şimdi proje normal site şablonlarından farklı olunca sorunlarda çalışmadığımız yerleden glemeye başladı.
Gelelim sorunun ne olduğuna; sorun şudur ki zemininden resim olan genişleyebilir alanlarda kullandığımız bir yöntem olan Sliding Doors(aynı yöntemi şurada da kullandım) yaptığım bir alanda hover efekti vermeye çalıştığımda karşılaştığım bir sorun. Daha kolay anlaşılmasıması ve benim içinde anlatması kolay olduğu için kaynaklardaki bir örneği vereceğim burada size ben.
HTML kodu
<div> <a href="#">foo<span>bar</span></a> </div>
CSS Kodu
span {
display: none;
}
a:hover span {
display: inline;
}
Örneği görmek için tıklayınız.
Burada yapılan çok basit bir iştir. Bağlantı üzerine gelince span içindeki bar yazısını gösteriyoruz. Ancak ie6′da bu sayfaya baktığımızda bar görüntülenmeyecektir.
Peki çözüm nedir?
Sorun hasLayout sorunu gibi görünsede genel hasLayout çözümleri pek işe yaramıyor. Haslayout sorunları ie6 ve ie7 de görülür, ancak Microsoft bu sorunu ie7 çözmüş görünüşe göre.
friendlybit.com sitesindeki çözüm yolu şöyle; a:hover elemanına padding-top:0 değeri atayıp sonrada a:hover span seçicisinede padding-top:0 değeri atayınca oluyor.
a:hover{
padding-top:0;
}
span {
display: none;
}
a:hover span {
display: inline;
padding-top:0;
}
Örneği görmek için tıklayınız.
Kaynaklar
IE8 Açılır Menü İçindeki Input Alanı Üzerince Gelince Menü Kapanma Sorunu
Şubat 26th, 2010 • CSS, XHTML, jquery
Etiketler: ie8, input, menü, sorun
Sorun tam olarak şu; açılır bir menü eğer bir resim üzerinde ise menü içindeki input alanı üzerine gelince menü istem dışı olarak kapanıyor. Diğer hiç bir tarayıcıda sorun yokken ie8 bu durumda sorun oluşturuyor.
İnternet Explorer’ın sorunlarına alışmış bu bünye Microsoft’un bu yeni nesil eskimiş tarayıcısından böyle bir sorun olmasını yadırgamadı açıkçası. Soruna ie7 gibi yorumlama kodunu ekleyerek çözmek istedim ama kod sitenin dinamik kısımlarında çalışırken statik kısımlarında çalışmadı.
Bu iş ile bir projede karşılaştım, proje ismini açıklamak sakıncalı olabilir diye ben size benzer bir örnek kodunu vereceğim.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a').hover(function(){
$(this).children(':last').show();
},
function(){
$(this).children(':last').hide();
});
});
</script>
<style type="text/css">
a{ position:relative;}
a div{display:none; padding:20px; background-color:#999; width:250px; position:absolute; top:18px; left:0}
a div input{ background:transparent}
</style>
</head>
<body>
<a href="javascript:;">menu aç
<div><input type="text" /></div>
</a>
<p><img src="http://www.fatihhayrioglu.com/wp-content/ie7_kaydirma_cubugu.jpg" width="450" height="398" /></p>
</body>
</html>
Örneği görmek için tıklayınız.
Bende sorunu araştırmaya başladım ve sonunda buldum. Sorun input‘a atanan background:none veya background:transparent tanımlamalarından kaynaklanıyor. backgorund’a renk veya resim tanımı yapınca sorun çözülüyor.
Ben tasarıma uymak için background’a resim tanımlayarak sorunu aştım.
Kaynak
CSS Yorumlarında Türkçe Karakter Kullandığımızda İE6′da Sorun Çıkarıyor
Kasım 12th, 2009 • 10 yorum CSS
Etiketler: ie6, sorun, Türkçe-karakter, yorum-satırı
Bu durumla bir kaç defa karşılaştım ve sonuncusunda FirendFeed‘de yazdım, hatta benden önce Burak Dönertaş‘da yazmış konuyu. Konuyu biraz daha ayrıntısı ile burada paylaşmak istedim.
Sorunu başlıkta açıklayıcı bir şekilde anlattım sanırım. Biraz daha açarsam; css kodlarımızı yazarken çeşitli notlar alırız, örneğin sayfa yapısını oluşturan alanların isimleri(ustAlan), farklı tarayıcılar için yaptığımız düzeltmeler için tuttuğumuz notlar(kapsayamamaSorunu) vb.
CSS yorum satırları /* yorum */ işaretleri içinde yazıyoruz ve tarayıcılar bunları görmezden geliyor.
İnternet Explorer 6 eğer dosyanız UTF-8 ile kaydedilmemiş ise sorun çıkarıyor. Burada dosyayı utf-8 ve utf-8 BOM’suz kaydetmek arasında bir fark olmadı. Örnek dosyamı utf-8 ve utf-8 BOM’suz kaydettiğimde bu sorun düzeldi. Utf-8 ile kaydedince Türkçe karakterler bozuldu ancak tekrar yazıp kaydedince bir sorun olmadı.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
@import url("stil.css");
</style>
</head>
<body>
<p class="deneme1 deneme2">Fatih Hayrioğlu burada yorum yazmış sanane ie6, sen niye sorun yapıyorsun ki bu olayı.</p>
</body>
</html>
Bir paragraf yazı yazdık. Daha sonra
.deneme1{ font:12px Arial, Helvetica, sans-serif}
/*Türkçe katakter içermeyecek miş*/
.deneme2{ color:#f00}
Css dosyasının içine yukarıdaki kodları yazdım. CSS dosyasını eğer ANSI formatında kayıtlı ise ie6 css kodlarımı görmüyor.
Firefox ve diğer tarayıcılar ansi olmuş utf-8 olmuş fark etmiyor. Ama
İE6′da ise yukarıdaki gibi Türkçe karakter içeren yorum sonrasındaki sınıfı görmüyor. Daha sonra css dosyasını utf-8 olarak kaydedince sorun ortadan kalktı.
Eğer html ve css aynı karakter kodunda ise sorun olmuyor mesela ikiside iso-8859-9 ise sorun olmuyor. Ama ne zaman html utf-8 css iso-8859-9 olursa sorun oluyor.
Not: Karakter kodu değişiklikleri için NotePad++ kullandım.
Tablo Satırına Verilen Ardalan Resminin Tekrarlama Sorunu
Nisan 13th, 2009 • 4 yorum CSS, Web Standartları, XHTML
Etiketler: hata, internet explorer, sorun, tablo, tablo-satırı, tr, WebKit
Tablo satırına ardalan resmi tanımladığımızda Firefox ve Opera’da sorun yok iken Internet Explorer ve Webkit tabanlı tarayıcılarda(Safari ve Google Chrome) sorun çıkarıyor. Biz burada Internet Explorer için nasıl bir çözüm üretebiliriz onu göstereceğiz. Webkit tabanlı tarayıcılar için çözüm bulamadım üzgünüm.
table tr{
background:url(images/southpark.gif) 0 0 no-repeat;
height:130px;
}
Örneği görmek için tıklayınız.
tanımlaması Firefox ve Opera da sorunsuz çalışırken IE ve Webkit tabanlı tarayıcılarda sorun çıkaracaktır.
Çözüm için
table tr{
background:url(images/southpark.gif) 0 0 no-repeat;
height:130px;
position:relative;
}
table tr td{
color:#fff;
font:12px Arial, Helvetica, sans-serif;
background:none;
}
tanımlamaları yeterlidir. Örneği görmek için tıklayınız.
