‘sorun’ etiketi için sonuçlar
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 • 9 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.
Kaynak
Float Uygulanmış Elementleri Tam Kapsayamama Sorunu İpuçları
Şubat 9th, 2009 • 10 yorum CSS
Etiketler: float, ipucu, kapsayamama-sorunu, sorun
1- Firefox 3′de form elemenalarının Tıklanamaması Sorunu
Daha önce bir kaç kez bahsettiğim ve web kod yazarlarının birçok zaman karşılaştığı ‘Float uygulanmış elementlerin kapsayamama sorunu’ bugün xpur(Gökhan)’un bir sorusu üzerine bu yazıyı yazma gereği duydum.
Kapsayamama sorunu yaşadığımız katman içinde eğer selectbox var ise Firefox 3′de bu selectbox tıklanabilir olmuyor. Açılmıyor yani
Kodumuz aşağıdaki gibi
.kapsayamamaSorunu: after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.kapsayamamaSorunu {display: inline-block;}
/*IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu {height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */
sorunu çözümü ise .kapsayamamaSorunu ile :after arasındaki boşluğu kapatmak .kapsayamamaSorunu:after
.kapsayamamaSorunu:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Küçük bir nokta olsa da zamanı gelince insanın çok zamanını alıyor.
2- Sorunun Kısayolu
Bu konuda hakkında bir başka ipucuda float’uygulanmış nesnelerde bu sorun ile çok fazla karşılaşıyoruz, ben eskiden her bir sorunlu eleman için bu kodu yazıyordum. Sonra bunu bir sınıfa atayıp gerekli yerlerde bu sınıfı kullanmanın daha avantajlı olacağını düşündüm.
.kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.kapsayamamaSorunu {display: inline-block;}
/*IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu {height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */
<div id="icerik" class="kapsayamamaSorunu">
<ul>
<li>
<select>
<option value="-1">Seçiniz</option>
<option value="1">Deneme1</option>
<option value="2">Deneme2</option>
</select>
</li>
</ul>
</div>
<div class="resimAlani kapsayamamaSorunu">
<img src="images/deneme.jpg" width="150" height="80" />
</div>
#icerik ve .resimAlani bu sorun ile karşılaştığımızı düşünelim. Tek tek bu kodu yazmaktansa .kapsayamamaSorunu isimli bir sınıf tanımlayıp sorunumuz ile karşılaştığımız her yerde bu sınıfı tanımlarız. Tek tanımla ile işimizi hallettik.
WordPress 2.7′ye geçtikten sonraki sorunlarım – 1
Ocak 23rd, 2009 • 1 yorum Haberler, WordPress
Etiketler: eklenti, Google Sitemap, sorun, WordPress, WordPress Eklentileri, wordpress2.7
WordPress 2.7 sürümünün çok güzel özellikleri var. Ancak yeni sürüme yükselttikten sonra bir kaç sorunumu oldu. Zamanım olmadığı için bu sorunlar uzunca bir süre devam etti ve etmekte. Bunlardan bir tanesi olan yazı veya yorum yazınca beyaz ekran gelip yönlendirme yapmaması idi. Bugün biraz araştırınca bunun bir kaç sebebi olabilir imiş. Benim sorunum çözümü ise Google SiteMap eklentimin eski sürümde olması imiş. Eskisini kaldırıp yenisini kurunca düzeldi.
Bu arada Google SiteMap eklentisi bayağı gelişmiş. Türkçe desteği de iyi olmuş.
http://wordpress.org/extend/plugins/google-sitemap-generator/installation/
Kaynak
21 Temmuz 2008′den seçme haberler
Temmuz 21st, 2008 • 7 yorum Haberler, Web Standartları
Etiketler: firebug, Firefox, HTML Form, internet explorer, jquery, saydam png, sorun, transparent png, WordPress
- jQuery’e başlamak için 15 adet makale. Bağlantı
- İnsanlar hala niçin Internet Explorer 6 kullanır. Bağlantı
- jQuery ile satıriçi grafik uygulaması yapmak. Bağlantı
- Mükemmel bir WordPress teması hemde ücretsiz. Bağlantı
- Gelecekte arama nasıl olacak, yakın gelecek. Bağlantı
- Firebug adlı FireFox Eklentisi – webdeneyimleri.com Bağlantı
- IE PNG Fix 2.0 Alfa 2 ile artık ie6 da ardalana tekrarı ve konumu belirleyebiliyoruz. Çok güzel bir gelişme bu. Denmek lazım Bağlantı
- Kitap sayfasındaki download için uyguladığım eklentide açık varmış, bende eklentiyi kaldırıp direk link verdim. s4l1h uyarısı için teşekkürler
- 20 adet CSS ile yapılmış güzel menü uygulaması. Bağlantı
- HTML form kullanımları için güzel ipuçları. Bağlantı
- 5 adet FireBug ekletisi. Eklentinin eklentisi olurmu demeyin. Bağlantı
- Garaj kapısı açılışı gibi menü yapmak. Bağlantı
- jQuery ipucu: metin dosyasından veri almak. Bağlantı
