こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

この場合のCSSの記述を教えてください!

現在コーディング中なのですがIE6,7では問題ないのですが、Firefox,OPERA,netscapeにてずれて表示されてしまいます。
鯨飲がさっぱり分からない状態で・・どなたかお分かりになる方いましたらご教授願います(泣)

■html
<div id="aaa">
<div id="bbb">コンテンツ</div>
<div class="ccc">コンテンツ</div>
</div>
■css
#aaa {
width: 640px;
height: 300px;
float: left;
}
#bbb {
width: 640px;
height: 150px;
background-image: url(images/背景画像.gif);
background-repeat: no-repeat;
}
.ccc {
width: 640px;
height: 150px;
}
■状況
640px×300px(aaa)の枠の中に(bbb,cccを)収めたいのに300を超えて(bbbの上部に約100px程度のが出来る)表示されてしまう。
(bbbの背景画像サイズは640px×150px)
■いじってみて
bbbに「border: 1px #000000 solid;」を追加するとスペースはなくなる。

以上が状況です。よろしくお願いいたします!

投稿日時 - 2007-05-08 14:15:13

QNo.2983231

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(5)

ANo.5

div aaaの中身、上のほうに背景と同じ色の文字とか、空白のスペースとか,<br>の改行とかありませんか?たとえばこんな。

//以下例示ソース
<html>
<head>
<style type="text/css"><!--
(略)

</style>
</head>
<body>
<div id="aaa">&nbsp;<br><br><br>【←この部分】
<div id="bbb">コンテンツ</div>
<div class="ccc">コンテンツ</div>
</div>
</body>
</html>

//以上、例示ソース

・・・IE6,7で問題ないあたりは解決してない気もしますが。エディタの設定にも何かあるかもしれませんね。tabとかスペースをどう扱うかなんて項目ないでしょうか??

投稿日時 - 2007-05-15 14:23:22

ANo.4

FirefoxとOpera、IE7で確認しましたが、#3さんと同様、問題なく表示されました。
外部cssかお示しになられてないHTMLで矛盾があるのかもしれませんね。。。

投稿日時 - 2007-05-08 22:31:33

ANo.3

Firefoxで試してみましたが、別におかしい所は無かったですけれど。
ただし、画像だけはこちらのあり物で代用しましたが。

ここに書かれているのはコピーした物ですか?
なら間違いは無さそうですけれど。

投稿日時 - 2007-05-08 21:05:53

ANo.2

#bbb {
width: 640px;
height: 150px;
background-image: url(images/背景画像.gif);
background-repeat: no-repeat;
clear:both;
}

にしてみるとか。

投稿日時 - 2007-05-08 15:10:04

補足

ご回答ありがとうございます!

試してみたのですがやはりダメでした。
原因不明で困り果てています・・

投稿日時 - 2007-05-08 15:22:37

ANo.1

marginとpaddingが継承になってるからじゃない?

#bbb{
width: 640px;
height: 150px;
background-image: url(images/背景画像.gif);
background-repeat: no-repeat;
margin:0;padding:0;
}

aaaの方にも要るかも(padding)

投稿日時 - 2007-05-08 14:19:42

補足

早速の回答ありがとうございます!

marginとpaddingはcssの初期設定として
* {
margin: 0px;
padding: 0px;
font-size: 12px;
font-family: "MS Pゴシック", Osaka;
}
の記載をしているのですが、それとは別に個別に設定が必要という事でしょうか?

投稿日時 - 2007-05-08 14:22:43

あなたにオススメの質問