CSSテクニックコミュのBOXのバグについて

はじめまして。
CSSを齧り立てで、未だBOXのバグに頭を
悩ませながらCSSレイアウトに苦心しています。

以下にあるのは、先日制作したページのHTMLのマークアップと
CSSのマークアップですが、皆さんにご教授頂ければと思います。

floatを使った単純なBOXレイアウトなのですが、【ネスケ7.1】
で表示させたら崩れてしまいました。

以下【HTMLによるマークアップ】

-----------------------------------------------------
<div id="content540">

<h2>モゲモゲ</h2>

<div class="best1Box">

<div class="leftCon">
<a href="moge.html"><img src="img/moge.jpg"
alt width="200" height="150" border="0" class="thumbnail"></a><img src="img/moge.gif"width="120" height="15">
</div>

<div class="rightCon">
<br>
<br>
<p>モゲ</p>
モゲモゲ
<br><br>
</div>

</div>
・
・
</div>

-----------------------------------------------------

以下が上記HTMLに読み込ませた【CSSファイル】です。

-----------------------------------------------------

#content540{
width:540px;
margin:0px;
text-align:left;
}

#content540 h2{
width:300px;
height:20px;
margin: 10px 0px 10px 0px;
display:block;
}

.best1Box {
font-family: "ＭＳゴシック", "Osaka－等幅";
font-size: 12px;
line-height: 15px;
background-color:#FFFFFF;
margin: 0px 0px 10px 0px;
padding:5px;
border: 1px solid #330000;
width:540px;
voice-family:"\"}\"";
voice-family:inherit;
width:528;
}

html>.best1Box{
width:528px;
}

.best1Box .leftCon{
margin:0px;
width:200px;
float:left;
}

.best1Box .leftCon .thumbnail{
display:block;
margin:0px 0px 2px;
}

.best1Box .rightCon{
margin-left:15px;
width:300px;
float:right;
}

.best1Box .rightCon p{
font-family: "ＭＳゴシック", "Osaka－等幅";
font-size: 14px;
line-height: 15px;
font-weight: bold;
}

-----------------------------------------------------

一応色々考えてみた結果、

.best1Box {
margin: 0px 0px 10px 0px;
padding:5px;
border: 1px solid #330000;
width:540px;
　　　　　height:185px;
voice-family:"\"}\"";
voice-family:inherit;
width:528px;
height:165;
}

と【height】のプロパティを指定したら回避できたのですが、
これは、IEに見られるBOXのバグと同じ現象が起こったので
しょうか？
結果として、うまくいったからいいじゃんと思うかもしれませ
んが、うまくいった理由を根本から理解したいので、質問させ
て頂きました。

どうぞ、よろしくお願いします。

コメント(4)

最初
全て
最新の40件

[1] mixiユーザー 10月30日 15:42

おそらくはTABLEタグでの記述がIEとネスケで異なるのと同じ理屈ですね。
IEは数値が記述されてない部分を｢多分こういうことがやりたかったんでしょ？｣みたいに勝手に解釈してくれます(pタグの閉じ忘れとかもわりと無視してくれる)が、ネスケ様は融通が利かないので｢知らん！表示して欲しかったらちゃんと指定して出直して来い！｣と見事につっぱねてくださりますので。
わかる限りの値はめんどくさがらずに定義すべきでしょう。

ワタシもまだまだ初心者でして、たった今blogのスキン作成をやっていて似たような現象を起こしていたところなのでなんだか他人事じゃないです。

[2] mixiユーザー 10月30日 18:21

＞ベッチさん
えっと、要するに div.best1Box が float になった
div.leftCon, div.rightCon を囲むようにしたい、
ということでしょうか?

float は通常のレイアウトの流れの外に出されてしまうので
div.best1Box が float のサイズを考慮せず、float が
div.best1Box の Box を跨ぐ形になるのは仕様です。
# IE の動作はバグ。

これを避けるには height を指定するのではなく(これは
見かけ上 float を囲んでいるだけですし、環境によっては
ずれてしまいます) div.best1Box の末尾に何か要素を一個
いれて、それに CSS で clear プロパティを設定します
(あるいは <br clear="all"> する)。
---
...
モゲモゲ
<br><br>
</div>

<p class="clear">
</div>
...
---
p.clear {
clear: both;
}
---
こんな感じでどうでしょう?

[3] mixiユーザー 10月30日 18:51

>rnaさん

…ワタシが如何にソースをまともに読まずレスしてたかが如実に現れてしまいました。わーい半可通丸出しだー。

そしてたったいま自分が組んでいるソースが如何に基本がなってないかも同時に見つけることができました。

一時の恥を糧に強めに生きていきます。横レスまことに失礼しました。ベッチさんも引き続き頑張ってください。

[4] mixiユーザー 10月30日 18:54

> 空条HYO太郎ヲさん
ありがとうございます。blogの普及で一段とCSSが注目され
始めたような気がします。自分がそうですから（笑）

>rnaさん

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

>えっと、要するに div.best1Box が float になった
>div.leftCon, div.rightCon を囲むようにしたい、
>ということでしょうか?

そういうことです。
【height】のプロパティー指定ではだめなのですね。
やはり聞いてよかったです。
【clear:both;】で回り込みを解除するといった感じ
ですよね。

BOXモデルは色々なバグがあるので、その一つかと思い込んで
いました。つくづくCSSはトライ＆エラーの繰り返しだなって
思います。

ログインすると、みんなのコメントがもっと見れるよ