

Css Tasarım Yaparken Tarayıcılar Arasındaki Fark Sorunu
-
kutu.css
.kutu{width:600px; overflow:hidden;} .kutuust{width:600px; background: url("images/kutu_01.gif") no-repeat; height:35px; } .kutuust h1{font-size:15px; color: white; padding:12px;} .kutuorta{width:600px; background: url("images/kutu_02.gif") repeat-y; padding-right:20px; padding-top:20px;padding-left:20px; padding-bottom:20px;} .kutualt{width:600px; background: url("images/kutu_04.gif") no-repeat; height:30px;}
kutu.php<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>kutu</title> <link href="kutu.css" rel="stylesheet" type="text/css" /> </head> <body> <div> <div class="kutuust"><h1>Lorem Ipsum</h1></div> <div class="kutuorta">em Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> <div class="kutualt"></div> </div> </body> </html>
opera,firefox, chrome daki görüntü
ie deki görüntü

-
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css" />
şunu entepeye eklemeyi denermisin -
sadece kutunun yeri degisti biraz daha uste ve sola yaslandı , ie de baslık ve alt kutu arasındaki bosluk biraz azaldi , hala yani sorun devam ediyor ama
-
bir de şunları denermisin?
.kutular{ border:1px solid blue; width:600px; overflow:hidden;} .kutuust{ background: url("images/kutu_01.gif") no-repeat; height:35px;} .kutuust h1{font-size:15px; color: white; padding:5px;} .kutuorta{ background: url("images/kutu_02.gif") repeat-y; padding:20px;} .kutualt{ background: url("images/kutu_04.gif") no-repeat; height:30px;}<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>kutu</title> <link href="kutu.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="kutular"> <div class="kutuust"><h1>Lorem Ipsum</h1></div> <div class="kutuorta">em Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> <div class="kutualt"></div> </div> </body> </html> -
.kutuust h1{font-size:15px; color: white; margin-top:10px; margin-left:15px;}
simdi burada o başlık kısmını konumlandırırken hata alıyorum sadece ie de yukardaki kod işe yarıyor fakat digerlerinde margin-top u gormezden geliyor sanki.
-
aLsanCaK bunu yazdı:
-----------------------------.kutuust h1{font-size:15px; color: white; margin-top:10px; margin-left:15px;}
simdi burada o başlık kısmını konumlandırırken hata alıyorum sadece ie de yukardaki kod işe yarıyor fakat digerlerinde margin-top u gormezden geliyor sanki.
-----------------------------.kutuust{background:url("images/kutu_01.gif")no-repeat;height:35px;}satırını.kutuust{background:url("images/kutu_01.gif")no-repeat;}yapıp bi denermisin
-
olmadı bu kutu_01.gif 35px yuksekliginde 35px i silince baslıgın arkaplanı eksik gorunuyor
-
o zaman
.kutuust{background:url("images/kutu_01.gif")no-repeat;height:35px;}satırını
.kutuust{background:url("images/kutu_01.gif")no-repeat;height:35px; overflow:hidden;} yap :D -
Meyer amcanın reset.css ini sayfana ekle istersen. Yahoo nunki çalışmıyor.
-
peki hocalar su altta takvim iconun yanındaki tarihi nasıl o iconla ayni hizada ortalayabiliriz ?

.kutualt{ background: url("images/kutu_04.gif") no-repeat; height:48px; text-align:left;} .kutualt a{margin-top:10px; font-size:15px; margin-left:5px; vertical-align: middle; } .kutualt img{margin-top:10px; margin-left:20px; vertical-align: middle; float:left;} -
<div style="margin-top:10px">14.11.2011</div>