‘input’ etiketi için sonuçlar

IE8 Açılır Menü İçindeki Input Alanı Üzerince Gelince Menü Kapanma Sorunu

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

26 Mayıs 2008 web’den seçme haberler

  • CSS ile düzenlenmiş tablolar. Bağlantı
  • input ve button arasında farklılıklar. Bağlantı
  • CSS ile mesaj kutuları hazırlamak. Bağlantı
  • jQuery ile yapılmış güzel bir tarih aralığı seçimi. Bağlantı
  • CSS ve Jquery ile yapılmış güzel bir menü örneği. Bağlantı
  • jQuery yeni sürümü çıkmış 1.2.5 bazı sorunlar giderilmiş. Bağlantı
  • “Tek bir bilgisayarda birden fazla Internet Explorer” – eburhan.com Bağlantı
  • Basite indirgenmiş güzel bir yatay akordiyon menü örneği. Bağlantı
  • HTML5 ile birlikte gelen sıralı listeleri tersten sıralama özelliği. Bağlantı
  • Firefox3 1 ay içerisinde çıkması bekleniyor. Firefox3′ün gizli özellikleri Bağlantı
  • Dışa link için css ile ikon koymak. Bağlantı
  • jquery ile ilgili farklı bir büyük resim uygulaması. Bağlantı
  • Tarayıcı Uyumluluğu İçin CSS Sıfırlama – yakuter.com Bağlantı
  • 30 dakikada jQuery giriş yapmak. Bağlantı
  • jQuery ile animasyon geçişli içerikler. Bağlantı

Kategoriler

Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.