‘sorun’ etiketi için sonuçlar

CSS Yorumlarında Türkçe Karakter Kullandığımızda İE6′da Sorun Çıkarıyor

Kasım 12th, 2009 • 11 yorum CSS
Etiketler: , , ,

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.

ansi_ff

Firefox ve diğer tarayıcılar ansi olmuş utf-8 olmuş fark etmiyor. Ama

ansi_ie6

İ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ı.

utf8_ie6

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: , , , , , ,

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;
}

İE de hatalı resmi

Ö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;
}

İE düzeltişmiş görüntüsü

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

Kaynak

http://test.pixelbebop.com/test33/

Float Uygulanmış Elementleri Tam Kapsayamama Sorunu İpuçları

Şubat 9th, 2009 • 14 yorum CSS
Etiketler: , , ,

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: , , , , ,

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: , , , , , , , ,

  • 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ı

CSS İpucu 15:align=”absmiddle” yerine vertical-align:middle kullanmak

Mayıs 1st, 2008 • 4 yorum Haberler
Etiketler: , , , ,

Web sitemiz doğrularken(validation) aşağıdaki hatayı aldım.

Line 56, Column 151: value of attribute “align” cannot be “absmiddle”; must be one of “top”, “middle”, “bottom”, “left”, “right”

…:middle" alt="Tarih" align="absmiddle" /> Saat <em>09:13</em> | Katagori: <em

The value of the attribute is defined to be one of a list of possible values but in the document it contained something that is not allowed for that type of attribute. For instance, the “selected” attribute must be either minimized as “selected” or spelled out in full as “selected=”selected””; a value like “selected=”true”” is not allowed.

CSS İpucu 15:align=

Kullandığım align=”absmiddle” kodunu standart dışı bir tanım olduğunu söylüyor. Bu sorunla daha öncede karşılaştım, bir yer yazmadığım için tekrar arayıp bulmam gerekti. Bu nedenle bir daha aramamak için buraya yazıyorum.

vertical-align:middle; CSS kodu bu kodun yerini alıyor ve doğrulamadan geçiyor. Bunun için bir CSS sınıfı oluşturup gerekli yerlerde bu sınıfı eklersek sorunumuz çözülüyor. 

.absmiddle {
vertical-align:middle;
}

Küçük bir ipucu olarak akılda kalmasında yarar var.

« Önceki Yazılar

Sonraki yazılar »

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.