min-heightをIE6で

久しぶりの更新です^^;
通常はそこまで多用するプロパティではないんですが、たま〜に必要になった
ときになかなか重宝する、バグを利用したIE用のハックをご紹介します。
では実際にやってみます。

                                                                                                                                    • -

<div style="background-color:#CCCCCC;min-height:100px;">
<p>テキストテキストテキストテキストテキストテキスト</p>
</div>

                                                                                                                                    • -

とすると、下のような表示になります。



テキストテキストテキストテキストテキストテキスト



firefoxやIE7では背景色のついたボックスが100pxで表示されているはずです。
ところがIE6だとmin-height:100px;の指定が無視されてしまいます。
（中途半端に反映されるかも？）

そこで_heightというプロパティを使います。

                                                                                                                                    • -

<div style="background-color:#CCCCCC;min-height:100px;_height:100px;">
<p>テキストテキストテキストテキストテキストテキスト</p>
</div>

                                                                                                                                    • -



テキストテキストテキストテキストテキストテキスト


これでIE6でもmin-heightが適用されましたね^^
ただ動作確認できているのがIE6、IE7、Firefoxのみなので、ご利用は自己責任でm(__)m

float時に背景が消える

Firefoxでのトラブル

前回から1ヶ月経ちそうなので更新^^;
今回は、Firefoxでボックスをfloatさせた時に背景が表示されなくなるケースをご紹介。


最近はほとんどの人がCSSを使ってウェブサイトを作成していることと思います。
CSSを使っているということはfloat（フロート）も多用しているでしょう。
そんな時、指定したはずの背景が表示されない、ということはありませんでしたか？
その原因はもちろんfloatです。


例を挙げて説明しますと、まず下のように大枠のボックスがあり、その中に
ボックスが２つある場合です。


サンプル
サンプル


この中のボックスをfloatすると、、、


サンプル
サンプル



背景が消えます。
理由は中のボックスがfloat（浮遊）しているため、大枠ボックスの中身がないものと
判断しているためです。
これを回避するためには大枠ボックスのスタイルに、heightを指定する方法が
確実ですが、中身が増えた時にいちいち指定するのは面倒です。
なので、overflow:hidden;を使います。


サンプル
サンプル


これで表示されるようになったと思います。
原理はよくわかりませんが^^;
ちなみにIE6ではoverflowが効かないようなので、代わりにwidth:100%;を指定
してあげると表示されるようになります。

ボーダー（border）指定時のトラブル

IEでのトラブル

最初の記事で幅（width）と余白（padding）に関するバグをご紹介しましたが、今回はそれに加えて
ボーダー（border）を指定する際の注意点をご説明します。


前回 width と padding は一緒に指定しないように、と解説しましたが、 border を
指定するときにも注意が必要です。
説明よりも実際に見てもらった方がわかりやすいと思うので下に例を載せておきます。


∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼
<html>
<head>
<style>
<!∼∼
.test1 {
width:300px;
padding:50px;
background-color:#CCCCCC;
}
p {
border:1px solid #000000;
}
∼∼>
</style>
</head>
<body>
<div class="test1"><p>テキストテキストテキスト</p></div>
</body>
</html>
∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼


わかりやすいように中の pタグ には枠をつけています。
上のソースをhtmlファイルにコピペして、IE（ここではIE7）とfirefoxで見比べてみてください。
IEでは全体の幅がキッチリ300pxで表示されるのにfirefoxでは400pxになっていると思います。
これは前回解説したとおり、 padding の解釈の違いによるものです。
これは padding を次のように変更することで回避できると説明しましたね。


∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼
.test1 {
width:300px;
background-color:#CCCCCC;
}
p {
padding:50px;
border:1px solid #000000;
}
∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼


pタグの幅は指定してないので目いっぱいまで広がったものの、幅はどちらのブラウザで見ても
変わらなくなったはずです。ここまでは前回の復習ですね。

今回の問題はここからです。
今度は次のように border を付け加えてみます。


∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼
.test1 {
width:300px;
background-color:#CCCCCC;
border:10px solid #000000;
}
p {
padding:50px;
border:1px solid #000000;
}
∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼


IEでは問題なく見えますが、firefoxでは幅が増えていると思います。border も padding 同様
firefoxだと指定した幅にプラスされてしまいます。
この場合は左右に10pxずつの border なので幅300px + 20pxで320pxになります。
これを避ける場合も、幅の指定をしているタグの内側か外側に新たにタグを入れて、そこに
border を指定する、というやり方になります。


∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼
<html>
<head>
<style>
<!∼∼
.test1 {
width:300px;
background-color:#CCCCCC;
}
.test2 {
border:10px solid #000000;
}
p {
padding:50px;
border:1px solid #000000;
}
∼∼>
</style>
</head>
<body>
<div class="test1">
<div class="test2">
<p>テキストテキストテキスト</p>
</div>
</div>
</body>
</html>
∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼


これで幅が同じになったはずです。
お疲れ様でした^^


今回はIE7で検証しましたが、IE6でも似たような現象が起きますので、width と padding と
border は別々に指定するようにしましょう！
ソースを組んでしまってから気がつくと非常に面倒なことになりますので^^;

ホームページ作成におけるIEのバグ等

IEでのトラブル

ホームページ作成をする人なら、誰しも一度は陥るブラウザ毎の表示の違いについて、
解決策も含めてまとめていこうと思って立ち上げました^^
当方がfirefoxを使っているので、主に「IEで起こるバグ」という感じになっていくと思います。
また、記事はCSSの使用を前提に書いています。


個人的にもIEの表示には度々悩まされてきました^^;
IEユーザーの人から見れば、他のブラウザの方がバグだとも言えますが、実際IEでのみサポート
されていない要素などが多いのも事実です。（firefoxやoperaでもバグはありますけどね）


コーディングを始めた当初、一番悩まされたのが width と padding の指定です。
例えば、width:500px; padding:20px; と指定すると、firefoxやIE7ではちゃんと表示される
のにIE6では幅が500pxを超えちゃったり…。
これは padding を500pxの範囲内でのものとするか、500px + 20px とするかの解釈の違いに
よるものです。IE6では後者の方で解釈され500pxをオーバーしてしまうと…。


なので width の指定の際には絶対に padding を一緒にしないようにするということで回避できます。
（上下の padding であれば一緒でもOK ）
もしくは、タグが増えてしまいますが width を指定したタグの内側にもう1つ別のタグを作って、
そこに padding を指定することでも回避できます。


width と padding の指定はくれぐれも慎重に…！