borderが消える？
-
0 名前： 涼子 ： 2005/07/31 13:48
- はじめまして。
今CSSでサイトを作ってるのですが、IEとFireFoxでの見え方違うので困っています。
以下ソースです
：CSS
body {
margin: 0 0 0 30px;
height: 100%;
}
#aaa {
width: 600px;
height: 100%;
border: 1px #000 solid;
border-top-style: hidden;
border-bottom-style: hidden;
}
#bbb {
margin-top: 50px;
background-color: #EEE;
width: 600px;
height: 200px;
border: 1px #000 solid;
border-left-style: hidden;
border-right-style: hidden;
}
：HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<link rel="stylesheet" href="test.css" type="text/css">
<title></title>
</head>
<body>
<div id="aaa">
<div id="bbb"></div>
</div>
</body>
</html>
IEではid="aaa"（上下borderなし、高さ100%）の中に
グレー背景のid="bbb"のボックスが表示されるのですが
FireFoxだとid="bbb"の上にあるはずの左右のborderが表示されず
１００％指定なのになぜかスクロールバーが出てしまいます。
イメージ
│ │←ここの左右のborder
├──┤
├──┤
│ │
分かりづらくてごめんなさい。
ソースが間違っていると思うのですが、どのあたりがマズイのか分かりません。
どなたかご教授願います。
-
1 名前： tk ： 2005/07/31 13:48
- <style type="text/css">
<!--
* {margin:0 ;padding:0;}
body {
margin-left:30px;
height: 100%;
}
#aaa {
padding-top:50px;
width: 600px;
height: 100%;
border: 1px #000 solid;
border-top-style: hidden;
border-bottom-style: hidden;
}
#bbb {
background-color: #EEE;
width: 600px;
height: 200px;
border: 1px #000 solid;
border-left-style: hidden;
border-right-style: hidden;
}
-->
</style>
bbbのmarginの代わりにaaaでpadding
