Fatih Hayrioğlu'nun not defteri » hata http://www.fatihhayrioglu.com { CSS, HTML ve Javascript } Thu, 09 Feb 2012 08:44:49 +0000 en hourly 1 http://wordpress.org/?v=2012 IE6′da Liste Ardalan Görmeme Sorunu http://www.fatihhayrioglu.com/ie6da-liste-ardalan-gormeme-sorunu/ http://www.fatihhayrioglu.com/ie6da-liste-ardalan-gormeme-sorunu/#comments Mon, 07 Dec 2009 14:55:38 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=1434 İE hatalar serisini devam ediyoruz, ben uğraşmaktan ve yazmaktan bıktım ama ie hata vermekten bıkmadı.

Bu seferki hataya menüde denk geldim. Menüme background-image ile bir ikon koydum, her şey güzel ama ie6 görmedi. Araştırdım ve sonuç ie sorunu çıktı tabiki. Sorunun tam tanımı şöyle; listeleri(ul, ol ve dl) kapsayan elemana eğer float ve position:relative tanımı yaptı iseniz, ie6 liste background özelliklerini(resim veya renk) görmüyor.

Bu durmu bir örnek ile gösterelim.

<!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>ie lsite ardalan sorunu</title>
<style>
#menuKapsul{
position:relative;
float:left;
}
ul li{
background:url(ikon.gif) 3px 9px no-repeat;
list-style:none;
padding-left:12px;
}
</style>
</head>
<body>
<div id="menuKapsul">
	<ul>
    	<li>Liste 1</li>
        <li>Liste 2</li>
        <li>Liste 3</li>
    </ul>
</div>
</body>
</html>

Yukarı görülen basit bir listenin ardalanına resim yerleştiriyoruz. Kapsayıcı elemanada position:relative; ve float:left; tanımları atanmış olsun. Aktif tarayıcıların tümünde sorunsuz çalışan kodumuz, ie6′da sorunlu görünecektir. Sorun liste ardalan resminin görünmemesidir. Sorunu çözerken bayağı bir cebelleşmiştim. Sonunda çözümü bulunca ve bu çözümde çok basit olunca sevineyim mi üzüleyim mi şaşırdım.

Çözüm ise çok basit. Ardalan resmi uyguladığımız liste öğesine postion:relative tanımı yapıyoruz ve bu kadar düzeliyor. 

ul li{
	background:url(ikon.gif) 3px 9px no-repeat;
    list-style:none;
    padding-left:12px;
    position:relative
}

bu kadar bu kod bizim sorunlarımızı gideriyor.

Bir başka çözüm yoluda kapsayıcı bir eleman daha ekleyerek bu elemana farklı konumlandırma değeri atayıp çözebiliriz, ama bu pek mantıklı değil, fazladan kod eklememiz gerektiği için. En iyi position:relative ekleyip sonuca gitmek.

Örnek kodu görmek için tıklayınız.

Bir ie6 sorununun daha üstesinden geldik bir başka ie6 sorunu ile daha karşınızda olana dek hoşça kalın.(Bu ie6 oldukça nasıl hoş kalacağız oda ayrı bir konu.)

]]> http://www.fatihhayrioglu.com/ie6da-liste-ardalan-gormeme-sorunu/feed/ 8 İE 6 iki CSS seçicisi Sorunu ve Çözümü http://www.fatihhayrioglu.com/ie-6-iki-css-secicisi-sorunu-ve-cozumu/ http://www.fatihhayrioglu.com/ie-6-iki-css-secicisi-sorunu-ve-cozumu/#comments Fri, 02 Oct 2009 12:42:39 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=1336 Yine bir ie6 sorunu ile karşınızdayız. Microsoft ie6 kullananları düşünerek 2014′e kadar ie6 desteğini sürdüreceğini söylemiş, peki bizi kim düşünüyor, Microsoft’un düşünmediği kesin. Neyse biz konumuza gelelim.

Sorunumuz tam olarak şöyle; id atadığım bir elemana sınıf tanımladığımda ve id ve sınıf tanımlarında aynı özellik tanımlamış isem diğer tarayıcılar sorusuz çalışırken ie6 sorun çıkarıyor. Aynı şey iki adet sınıf tanımladığımızdada yaşıyoruz. 

Uygulama olarak şöyle bir uygulama yaptım. Bir elemana bir id verip bu id’li elemanın ardalan resmi olarak genel bir resim tanımladım. Daha sonra farklı bölümler için bu elemena farklı resimler atamam gerektiğinde aynı elemana .bolumA, .bolumB, vd. gibi sınıflar atadım. Bir bölümü olmayan sayfalarda ana resmimi görünecek bölümü olan sayfalarda ise ilgili resim görünecekti. 

#tanitimAlani{
    background:transparent url(../images/genel.jpg) no-repeat scroll center top;
    text-align:center;
    width:100%;
}

#tanitimAlani.bolumA {
	background:transparent url(../images/bolumA.jpg) no-repeat scroll center top;
}

#tanitimAlani.bolumB {
	background:transparent url(../images/bolumB.jpg) no-repeat scroll center top;
}

Tanımı ile yapıyordum. Bu düşüncem tüm tarayıcılarda sorunsuz çalışırken ie6 sorun çıkardı. İlk atanan genel resmini gösterdi sadece, bölüm resimlerini göstermedi.

Çözüm

id ile atadığım genel ardalan resmi tanımı kaldırıp genel içinde bir sınıf(.bolumGenel) tanımladım ve bu sorunu aştım. Yani kodumu şöyle değiştirdim.

#tanitimalani{
    text-align:center;
    width:100%;
}

.bolumA {
	background:transparent url(../images/bolumA.jpg) no-repeat scroll center top;
}

.bolumB {
	background:transparent url(../images/bolumB.jpg) no-repeat scroll center top;
}

.bolumGenel {
	background:transparent url(../images/genel.jpg) no-repeat scroll center top;
}

hribar.info’nun yaptığı örnek güzel inceleyin.

http://hribar.info/static/projects/multi-class_ie6_bug/error.html

 Kaynaklar

]]> http://www.fatihhayrioglu.com/ie-6-iki-css-secicisi-sorunu-ve-cozumu/feed/ 9 VMware Kurarken “Setup failed to write data to the registry” hatası aldım http://www.fatihhayrioglu.com/vmware-kurarken-setup-failed-to-write-data-to-the-registry-hatasi-aldimi/ http://www.fatihhayrioglu.com/vmware-kurarken-setup-failed-to-write-data-to-the-registry-hatasi-aldimi/#comments Tue, 01 Sep 2009 14:18:28 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=1324 VMware güzel bir program. Bilgisayarıma kurarken bi yerde takılıyor ve kuramıyorda ve kendini kaldırıyordu ve sonrada aşağıdaki hatayı veriyor.

“Setup failed to write data to the registry”

C:\Users\Administrator\AppData\Local\Temp Bu yol sizin bilgisayarınıza göre değişebilir.

vminst.log dokümanında aşağıdaki bilgiler vardı. 

VMInst: 01/19/08 19:41:29 Setting up registry
VMInst: 01/19/08 19:41:29 Writing entries to HKEY_LOCAL_MACHINE\SOFTWARE\VMware, Inc.\VMware Workstation
VMInst: 01/19/08 19:41:29 Getting Property CustomActionData = VMware Player;C:\Program Files\VMware\VMware Player\
VMInst: 01/19/08 19:41:29 Failed to create key SOFTWARE\VMware, Inc.\VMware Workstation: 5
VMInst: 01/19/08 19:41:29 Cannot add installation path to registry.
VMInst: 01/19/08 19:41:29 Attaching to window with title "VMware Player"
VMInst: 01/19/08 19:41:34 End Logging

Çözüm

Sorunun çözümü ise

Çalıştırı açıp(ctrl + R )

regedit

Yazıyoruz ve HKEY_LOCAL_MACHINE\SOFTWARE de

“VMware, Inc.”

ve daha sonrada bunun altında

“VMware Workstation”

diye alanlar oluşturup. Kurulumu yapalım.

Kaynak: http://communities.vmware.com/message/843711

]]> http://www.fatihhayrioglu.com/vmware-kurarken-setup-failed-to-write-data-to-the-registry-hatasi-aldimi/feed/ 7 Tablo Satırına Verilen Ardalan Resminin Tekrarlama Sorunu http://www.fatihhayrioglu.com/tablo-satirina-verilen-ardalan-resminin-tekrarlama-sorunu/ http://www.fatihhayrioglu.com/tablo-satirina-verilen-ardalan-resminin-tekrarlama-sorunu/#comments Mon, 13 Apr 2009 11:29:41 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=1037 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/

]]> http://www.fatihhayrioglu.com/tablo-satirina-verilen-ardalan-resminin-tekrarlama-sorunu/feed/ 4 Genelde Karşılaşılan Javascript Hataları http://www.fatihhayrioglu.com/genelde-karsilasilan-javascript-hatalari/ http://www.fatihhayrioglu.com/genelde-karsilasilan-javascript-hatalari/#comments Fri, 20 Jun 2008 08:25:03 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=536 Genelde javascript yazımına ara verdiğimde veya program yazıp sonra javascript yazmaya başladığımda bazı sorunlarla karşılaşıyorum. Geriye baktığımda ise bu hataların %80-90′ının aynı hatalar olduğunu gördüm, bunları siteye yazmayı düşündüm ve biraz araştırınca aynı dertten muzdarip olan bir çok insan olduğunu gördüm. Genelde hatayı bulup düzelttiğimizde bunu nasıl görememişim değimiz(yuh artık buda olamaz!) hatalardır bunlar.

Kendi sorunlarım ve araştırıp bulduğu genel sorunlar:

= ve == operatörleri

= tanımlama operatörü, == iki değeri eşitlemek için kullanılır. Genelde bir karışık oluyor

var nDeger = deneme.gif ;

== örnek verecek olursak;

if(nDeger == fatih.gif){
	alert("Fatih geldi");
}

genelde karşılaştığım hata

if(MyVar = "xyz")

Tırnak İşaretleri

Dizgiler(string) tırnak işareti içinde olmalıdır. Tek tırnak veya çift tırnak. Genelde çift tırnak ile başlayan tek tırnak ile kapattığımızda veya tek tırnak ile başlayanı çift tırnak ile kapattığımızda sorun yaşıyoruz. Yada dizgileri tırnak içine almayı unutuyoruz.

Parantezler

Parantezlerde de açılan parantezi kapanmamasından kaynaklana sorunlarda en çok karşılaştığımız sorunlardan biridir. if, for ve do while gibi işlemler için kullandığımız parantezleri kapatmadığımızda hata yaşıyoruz. Kod yazım formatımızı düzenli yaparsak bu sorunu çözebiliriz.

Hiyerarşi sorunları

Çoğu zaman karşılaştığımız sorunlardan bir taneside doküman hiyerarşisine göre daha oluşturulmamış bir nesneye erişmek istediğimizde “abs has no properties” gibi bir hata ile karşılaşırız. Genelde javascript dosyalarını <head> etiketi içinde tanımlarız ve sayfa yüklenirken bir işlev yapılmasını istediğimizde böyle bir hata alırız. Eğer sayfa ilk yüklendiğinde bir şey yapmak istiyorsak bu kodu sayfa sonuna koymalıyız, yada yapmak istediğimiz işi sayfadaki bir nesne ile tetikleyerekte bu sorunu çözebiliriz.

Programın kullandığı Değişkenleri Kullanmak

Çok azda olsa böyle bir sorunla karşılaşabiliriz. Javascript programının kendi değişkenlerini biz kullanmaya çalıştığımızda hata verir. Tam listesini rezerver edilmiş kelimeler linkinden bulabilirsiniz.

Küçük büyük karakter karışımı

Javascript ile kod yazarken küçük büyük harflere dikkat etmeliyiz. Küçük büyük harf bir çok hataya neden olur.

var adSoyad = "Fatih Hayrioğlu";
If (adSoyad == "fatih hayrioğlu")

Yukarıdaki kodda iki adet hata var. İlk hata If kullanımı. Javascript bize If konusunda sorun olduğunu söylemez, ama IE “Object expected” hatası verir, Firefox ise “If is not defined.” hatasını verir. İkinci hata ise ilk tanımda “Fatih Hayrioğlu” tanımına karşın sorguda “fatih hayrioğlu” eşleşmesi bize false değeri gönderecektir.

Ayrıca belirtmek istediğim bir yer daha var. OnMouseOver ile onMouseOver aynı şey değildir.

‘+’ Kullanımını

Javascript’te +(artı) işareti hem sayısal toplama hemde string birleştirmek için kullanılır. Karıştırmamak lazım. 

1 + 1 = 2

ve

'1' + '1' = '11'

Ayrıca string birleştirirken tırnak işareti ile kullanılmalıdır.

myString = myName + " ekle " + myString ;

Javascript: sözde protokolünün kullanımı

Javascript: sözde protokolü onClick gibi olay tetikleyicileri ile kullanılmaz. Bu kullanım URL’lerde olur Örneğin <a> etiketin href özelliğinde ve <form> etiketinin action özelliğinde

<a href="javascript:pencereAc();">Pencere Ac</a>

document.write

document.write sayfa tamamen yüklendikten sonra işler ve içeriğin üzerine yazar.

Sonuç

Gerek javascript yazarken gerekse diğer programları yazarken bir çok hata ile karşılaşıyoruz. Hataları en aza indirmek ve çözmek için bir çok yöntem var. İlk olarak yaptığımız hataları tanırsak ona göre tedbir alırız. Firefox’un FireBug aracı bence hata ayıklamak için bir numaralı araç.

Kaynaklar

]]> http://www.fatihhayrioglu.com/genelde-karsilasilan-javascript-hatalari/feed/ 6 Firefox’da satıriçi(inline) elemanların padding-right sorunu http://www.fatihhayrioglu.com/firefoxda-satiriciinline-elemanlarin-padding-right-sorunu/ http://www.fatihhayrioglu.com/firefoxda-satiriciinline-elemanlarin-padding-right-sorunu/#comments Tue, 12 Feb 2008 22:07:39 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=456 Şimdiye kadar hep Internet Explorer ile ilgili sorunlara değindim. Şimdi ise size en çok sevdiğim tarayıcı Firefox’un küçük bir sorununu aktarmaya çalışacağım. Amaç sorunu bilip ona göre kod yazmak.

Birden fazla satır içeren satıriçi(inline) elemanlara padding-right değeri atandığında, satıriçi elemanın sonuna padding-right değeri eklenir. Firefox 2 ve alt sürümlerinde pading-right değeri uygulandığı satıriçi elemanın tümüne uygulanacaktır. Bu problem Padding-left’de yoktur.

<!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>
<style>
div#kapsul { width: 260px; border: 1px dotted #999; margin: 40px }
span#metin { background: red; padding: 0 3em 0 0;}
</style>
</head>
<body>
<div id="kapsul">
<span id="metin">This is a longer line with some more text to see how the line will wrap in container</span>
</div>
</body>
</html>

Örnek sayfayı görmak için tıklayınız.


Internet Explorer 7(sorunusuz)


Firefox (sorunlu)

Ben hala Firefox’u çok seviyorum :D

Kaynak: https://bugzilla.mozilla.org/show_bug.cgi?id=122795

]]> http://www.fatihhayrioglu.com/firefoxda-satiriciinline-elemanlarin-padding-right-sorunu/feed/ 15 Internet Explorer İşaret kutularının(checkbox) onchange tetiklemesindeki sorun ve çözüm önerisi http://www.fatihhayrioglu.com/internet-explorer-isaret-kutularinincheckbox-onchange-tetiklemesindeki-sorun-ve-cozum-onerisi/ http://www.fatihhayrioglu.com/internet-explorer-isaret-kutularinincheckbox-onchange-tetiklemesindeki-sorun-ve-cozum-onerisi/#comments Thu, 09 Aug 2007 07:45:39 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=366 Aslında konuyu başlıkta anlattım. İşaret kutularına onchange ekleyip tetiklemeye çalışınca çalışmıyor. Firefox’da çalışıyor sorunun çözümü 

<p>
    <input type="checkbox" onchange="document.getElementById('spDegistir').innerHTML = 'Checked: ' + this.checked;" id="change">
    <label for="change">Using onchange</label>
    <span id="spDegistir"></span>
</p>

Bu kod Internet Explorer’da çalışmayacaktır. Bizde bunun yerine onclick tetiklemesini kullanacağız.

<p>
    <input type="checkbox" onclick="document.getElementById('spDegistir').innerHTML = 'Checked: ' + this.checked;" id="change">
    <label for="change">Using <code>onchange</code></label>
    <span id="spDegistir"></span>
</p>

kaynak: http://krijnhoetmer.nl/stuff/javascript/checkbox-onchange/

]]> http://www.fatihhayrioglu.com/internet-explorer-isaret-kutularinincheckbox-onchange-tetiklemesindeki-sorun-ve-cozum-onerisi/feed/ 6 IE’de Hata Ayıklamak için şartlı Yorumlar Kullanmak http://www.fatihhayrioglu.com/iede-hata-ayiklamak-icin-sartli-yorumlar-kullanmak/ http://www.fatihhayrioglu.com/iede-hata-ayiklamak-icin-sartli-yorumlar-kullanmak/#comments Sun, 17 Dec 2006 14:03:58 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=236 CSS ile web sitesi kodlamanın en büyük sorunu CSS’in özelliklerini yorumlayamayan veya yanlış yorumlayan web tarayıcılarıdır. Bu nedenle CSS ile web sitesi kodlarken bu tip hataları ayıklamamız gerekiyor. CSS ile hata ayıklama web tarayıcı gruplarının veya bir kısım web tarayıcısı için kuralları veya bildirimleri gizlemek veya göstermek şeklinde uygulanır.

CSS kuralları ve bildirimlerini gizlemek için bazı yöntemler mevcuttur. Biz bunlardan şartlı Yorumların kullanımını öğreneceğiz. şartlı Yorumlar Internet Explorer 5 versiyonu ile birlikte kullanılmaya başlanmıştır. şartlı Yorumlar xhtml kodunun yorumlanıp yorumlanmayacağını belirler. 

<!--[if IE]>
Bu kod Interner Explorer 5 ve üzeri versiyonlarda çalışır.
<![endif]-->

Bu kodlama bizim bir çok hatayı ayıklamamız için biçilmiş kaftandır. Ayrıca şartlı komutlar bize versiyon farklılıklarına göre kod yazmamızıda sağlar

<!--[if IE 6]>
<style type='text/css'>
a:link, a:visited, a:active { text-decoration: none; }
</style>
<![endif]-->

Bu kod ile sadece IE 6 versiyonunda linklerin altının çizilmesini engellemiş oluyoruz.

Eğer bir kuralı yugulamka istiyor isek ve bu kuralı belli bir web tarayıcısından gizlemek istediğimiz durumlarda şartlı Komuta (!) operatörünü ekleyerek bunu sağlayabiliriz.

<!--[if !IE 6]>
<style type='text/css'>
a:link, a:visited, a:active { text-decoration: none; }
</style>
<![endif]-->

Bu kod ile sadece IE6′da bu kodun uygulanmasını engelledik.

Bunun gibi başka işlevsel operatörlerde mevcuttur.

Operatör Açıklama Örnek
gt - den büyük <!–[if IE gt 5.5]>
gte - den büyük veya eşit <!–[if IE gte 5.5]>
lt - den küçük <!–[if IE lt 5.5]>
lte - den küçük veya eşit <!–[if IE lte 5.5]>
! değilse <!–[if !IE 5.5]>

 

<!--[if lt IE 6]>
<style type="text/css">
@import ("ie.css");
</style>
<![endif]–>

Birçok hata ayıklama metodunda şartlı Komutlar kullanılabilir.

]]> http://www.fatihhayrioglu.com/iede-hata-ayiklamak-icin-sartli-yorumlar-kullanmak/feed/ 37 IE6′da CEE-EEE(peek-a-boo) Hatası http://www.fatihhayrioglu.com/ie6da-cee-eeepeek-a-boo-hatasi/ http://www.fatihhayrioglu.com/ie6da-cee-eeepeek-a-boo-hatasi/#comments Wed, 13 Dec 2006 12:56:37 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=235 Bir diğer garip ve bizi sinirden çatlatan IE sorunu benim CEE-EEE(web de ise peek-a-boo namıyla gezinen; bu ismin verilmesinin nedeni içeriğin bir orataya çıkıp bir kaybolmasıdır, hani bizim bebekleri eğlendirmek için yüzmüzü ellerimizle kapatıp cee-eee diye birden açarak bebeleri eğlendirdiğimiz oyun varya işte o oyundan geliyor bu isim.) adı ile tanımladığım hatadır.

Hata uzun içeriği olan ve float elementi içeren likit kutularda meydana gelir. Sadece IE6 versiyonunda karşılaşılır. Kaydırma çubuğu ile aşağı yukarı gidince veya programlar arasında geçiş yapınca (alt+tab kısayolu ile mesela)düzelir. Ama bu düzelme geçicidir sayfa ilk yüklendiğinde veya yenileme yapıldığında hata yine çıkar.

Örnek sayfayı görüntülemek için tıklayınız. (Hatayı görebilmek için IE6 versiyonun ile açın)

Sorunlu Ekran Görüntüsü

Sorunsuz Ekran Görüntüsü

Bu hata float elementini takip eden float uygulanmamış elementler ve devamında clear uyugulanmamış elementler olduğu durumlarda tüm kapsayıcının içindeki zemin-resmi ve zemin-rengi uygulanmış alt elementlerde meydan gelir. Eğer clear uygulanmış element float uygulanmış elemente temas ediyorsa float uygulanmamış elemetlerin arasındaki zemin resim ve zemin rengi uygulanan alt elemetnleri gizlenecektir, yanlız sayfa yenilendiğinde yeniden ortaya çıkabilir.

Bu hatanın giderilmesi için bir çok yöntem mevcuttur. En kısa yol zemin resmi veya zemin rengini kaldırarak çözmektir. Diğer bir yöntem de float uygulana elemente temasdan önce clear uygulanan elementi kapatmaktır. Elementlere herhangi bir boyut tanımlandığında bu hata çözülecektir. Ayrıca bu hata içerik alanına yükseklik tanımlaması yağıldığında da görülmeyecektir. Son yöntem float uygulanan elementin ve içerik alanının konumunu göreceli olarak belirlediğimizde de bu sorun görülmeyecektir.

Kaynak

]]> http://www.fatihhayrioglu.com/ie6da-cee-eeepeek-a-boo-hatasi/feed/ 3