スタイルシートに関して
最近、スタイルシートの勉強を始めました。
下記の様なCSS,HTMLを作成しブラウザーで表示するとIEは意図通りに
IE以外(FireFox,Opera等)ではIEと違う（意図と異なる）表示になり
悩んでいます。
表示したい内容
黒いベース(300px,300px)の上に紫の四角(200px,200px)、さらにその上に緑の四角(100px,100px)を配置したい。
配置は、ブラウザーの左上隅より中心を上から150px,左から150pxとし３つ共に中心を合わせる。
IEでは、意図通りに表示
IE以外では、上にスペースが空き、各boxの表示位置が上にずれている
CSS
.box0 {
width:300px;
height:300px;
background-color:#000000;
}
.box1 {
margin-top:50px;
margin-left:50px;
width:200px;
height:200px;
background-color:#ff00ff;
}
.box2 {
margin-top:50px;
margin-left:50px;
width:100px;
height:100px;
background-color:#00ff00;
}
HTML
<BODY>
<div class="box0">
<div class="box1">
<div class="box2">
</div>
</div>
</div>
</body>
＊内容が悪いよとかCSSではできないよなどご意見・アドバイス頂ければ幸いです。
お礼
ありがとうございます /* */ だけなのですね