cssのborderについて

質問

現在、外部スタイルシートを作っています。

○cssファイル

html {
background-color: black
}

.title {
background-color: pink;
border-bottom: 1px dashed white;
margin :0px;
padding : 5px
}

.body {
background-color: pink;
margin :0px;
padding : 5px
}

○htmlファイル

<div class="title">
ここにタイトル
</div>
<div class="body">
ここに内容
</div>

一部端折っていますがおおまかには、こんな風に記述しています。
上記のhtmlの部分を数回繰り返しで入れてページを構成しています。
NNやFireFox(最新ver)の最新版で確認していると
行によって、</div>の区切りのところで
背景の黒が見えたり見えなかったりします。
IE(最新ver)では大丈夫です。

cssはこの記述も含めて、だいたい350行ぐらいのものです。
これは重すぎて、そのせいだったりしますか？
NN等では起こってしまう現象なのか
各ファイルの記述が悪いのか、教えてください。よろしくお願いします。
スタイルシートの知識の程度は、まだまだ駆け出しです。
文法をチェックするHPでhtmlを見てみましたが
特に問題はありませんでした。
HTML 4.01 Transitional EN　です。

回答No.3

koutarou504 · ベストアンサー

いろいろ検証してみました。
やはりバグというか・・・。
尚、ボーダーの問題でなくマージンの方の問題の様な気がします。（断定は出来ませんが、隣接する要素でのマージンの処理あたりが・・・。）

尚、検証環境は Win XP SP2 のみですが
ＩＥ６，Ｓｌｅｐｎｉｒ２，Ｏｐｅｒａ８．５，Ｆｉｒｅｆｏｘ１．５　などはやはり問題なしで背景が覗く事はありませんでしたが、

Ｍｏｚｉｌｌａ１．７．１２，　Ｎｅｔｓｃａｐｅ７．１，　Ｆｉｒｅｆｏｘ１．０．７　などは、何故か背景が覗く箇所が現れます。
また、その記述をその後に同じく追記してもその部分では再現されません・・・。違う処で現れたりして・・・。規則性が不明で、描画位置がなんかしら関係していそうな・・・。まぁトップからの位置が偶数値，奇数値などどいう単純ではないでしょうがぁ～？？？

まぁ背景が覗くだけなので、困る処をグループ化というかＤＩＶで纏めるなどしてそこに背景色を指定する事で対処はできますが・・・。

お礼

マージンの方が問題なのですか。
理屈はわかっていても、たまに使い分けに失敗していることがあるので、もう一度、全部一からよく確かめてみようと思います。

最終手段としてDIVで囲うつもりでしたが、解らない事を解らないまま放置するのは引っかかるので質問してみました。
わざわざ色んな環境で検証して下さって、ありがとうございます。

回答No.2

Kuppycat

Firefox 1.5でサンプルを確認した限りでは、現象は再発しませんでした。
背景が見えてしまう部分で、文法的にあっていても何か違いがあったりするかもしれません。
あと、キャッシュをクリアして確認してみては。

お礼

キャッシュですが、一番最初にクリアしてみましたが
やはり背景の黒い線が消えませんでした。
一度機会を作って、他のパソコンから確認しようと思います。
どうもありがとうございました。

回答No.1

partita

>、</div>の区切りのところで
背景の黒が見えたり見えなかったりします。

この区切りはclass="title"、class="body"どちらですか？
推測するに（「勘」ですが）
border-bottom: 1px dashed white;
に原因があるか、
</div>の最後に画像を使用しているため…
と思います。

CSSの記述をひとつずつ減らしていって、変化が現れたときにそれが原因だということになりますので、試してみては？

お礼

</div>の区切りは
class="title"、class="body"のどちらの区切り目にも
現れたり現れなかったりします。

作っているHPとは別に、質問に書いたサンプルで
画像等使用せず試してみましたが、やはり出てしまいました。
border-bottom: 1px dashed white;
を中心に、記述を減らしたり線の太さや種類を変えたりを試みましたが変化せず、原因がつかめずにいます。

お手上げ状態なのですが、もう少し頑張ってみることにします。
ありがとうございました！