Browser farklılıkları css reset dosyası
Hamza ERBAY // 1 Ağustos 2010 // 14 yorum // kategori: Css, Html
Web tasarımında en problemli kısım yaptığımız tasarımı browserlarda farklılık göstermeden yayınlanmasını isteriz. Fakat çoğu zamana tasarım uygulamada problemli olur. Bunun nedeni ise browserların (firefox,internet explorer,chrome,safari…) html dosyayı farklı şekilde yorumlamaları ve bazı tagların standart değerlerini farklı yorumlamalarıdır. Ben bunun için Fatih Hayrioğlu’ndan öğrendiğim css sıfırlama metodunu kullanıyorum ve yer yer ekleme yapıyorum en son css sıfırlama kodum u ekliyorum yer yer güncelliyeceğim. Tabi inernet explorer da sıfırlama metodu versiyonlara göre değişebiliyor ve bunun için browser versiyonlarına göre yeni style dosyalarını hazırlamanız gerekecektir.
/* Css Sifirlama */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, th {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; text-decoration:none;}
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
/* remember to define focus styles! */
:focus, a:focus, a:active{ outline: 0; }
/* remember to highlight inserts somehow! */
ins{ text-decoration: none; }
del{ text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse: collapse; border-spacing: 0;}
/* float uygulanan elemanlari kapsayamama sorunu */
.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 */
/* Css Sifirlama */
Bu nasıl kullanılıyor şimdi anlayamadım.
Ben şimdi bir css i firefox a göre yazdım ancak ie de dağılıyor tasarım. Bu css kodunu kullanarak bu sorunu çözebilirmiyim ve nasıl bu kodu kullanabilirim?
Bu kodu css dosyanızı oluşturduğunuzda en üste yazın sonra tasarımı kodlamaya başlayın firefox ve ie de tasarım genelde problemsiz olarak çıkacaktır. Bunun yanında ufak tefek kayma sorunları olacaktır ie versiyonları için özel css dosyası yazmanız gerekebilir. Yalnız varolan css dosyanıza eklediğinizde varsayılan değerleri değiştirdiğiniz için tasarımda kaymalar oluşabilir.
Bu nasıl kullanılıyor şimdi anlayamadım.
Ben şimdi bir css i firefox a göre yazdım ancak ie de dağılıyor tasarım. Bu css kodunu kullanarak bu sorunu çözebilirmiyim ve nasıl bu kodu kullanabilirim?
Bu kodu css dosyanızı oluşturduğunuzda en üste yazın sonra tasarımı kodlamaya başlayın firefox ve ie de tasarım genelde problemsiz olarak çıkacaktır. Bunun yanında ufak tefek kayma sorunları olacaktır ie versiyonları için özel css dosyası yazmanız gerekebilir. Yalnız varolan css dosyanıza eklediğinizde varsayılan değerleri değiştirdiğiniz için tasarımda kaymalar oluşabilir.
Daha yeni denedim ancak ie de pek işe yaramadı.
Ne tür problem yaşadınız. Browser farklarını minimuma indiriyor bu sıfırlama ile fakat yine de ie 6 7 için yeniden css yazmanız gerekebiliyor
Daha yeni denedim ancak ie de pek işe yaramadı.
Ne tür problem yaşadınız. Browser farklarını minimuma indiriyor bu sıfırlama ile fakat yine de ie 6 7 için yeniden css yazmanız gerekebiliyor
a div display none padding 20px background-color 999 width 250px position absolute top 18px left 0 . Sorun inputa atanan background none veya background transparent tanımlamalarından kaynaklanıyor.
a div display none padding 20px background-color 999 width 250px position absolute top 18px left 0 . Sorun inputa atanan background none veya background transparent tanımlamalarından kaynaklanıyor.
merhaba kolay gelsin ben reset css kullanmama rağmen divlerin içine attığım inputlar ie de farklı firefoxda farklı yerde gözüküyor yani inputlar farklı yerleşim yapıyor.
merhaba kolay gelsin ben reset css kullanmama rağmen divlerin içine attığım inputlar ie de farklı firefoxda farklı yerde gözüküyor yani inputlar farklı yerleşim yapıyor.
mail olarak gönderirmisiniz dosyanızı kontrol edeyim.
ben de denedim işe yaramadı