2009年09月18日

IE6でfloadをかけたblock要素の親要素のwidthが伸びる

こんにちは。溝上です。

最近こんな運動もありますが、まだまだIE6対応はしなければいけないことって多いですよね・・・

そんなわけで今回はInternet Explorer6の

floatをかけたblock要素の親要素のwidthが伸びる

というバグを紹介したいと思います。

それでは早速サンプルを見ていただきたいと思います。


(htmlコーディング)
<div class="section">
<div class="block">
<div class="entry" id="entry01">
<h2 class="title">1111</h2>
</div>
<div class="entry" id="entry02">
<h2 class="title">2222</h2>
</div>
<div class="clear"> </div>
</div>
</div>
(cssサンプル)
* {
padding:0;
margin:0;
}
.clear {
clear:both;
height:0;
font-size:1px;
line-height:0;
visibility:hidden;
text-indent:-9999px;
}
.section {
width:650px;
background-color:#9FF;
}
.section .block {
width:630px;
margin:0 auto;
background-color:#F00;
}
.section .entry {
float:left;
width:300px;
margin-right:15px;
background-color:#9F9;
}
.section .entry h2.title {
width:300px;
padding:10px 0;
}

ではまずはFirefoxから。
▼スクリーンショット(Firefox3.0)
さすがFirefox。意図通りですね。

では次に問題児のIE6をご覧ください。
▼スクリーンショット(Internet Explorer6)
floatをかけているentryの親であるblockの幅が伸びているのが
お分かりいただけたかと思います。
どうにもIE6では

floatさせた最後の要素(clearする前)のfloatと反対側のmarginが伸びる
ことがあるようです。(←重要です)

その後、親要素を伸びた値にあわせて広げたりすることがあるようです。(←重要)

これはひどい。
いままでたまに計算はあってるはずなのになぜかIE6でfloatが崩れたり、
なぜかセンタリングした要素がやたら左によってたりしたのは
恐らくこのバグのせいでしょう。

解決策としては最後の要素のmarginをとるのが一番手っ取り早いと思います。

(cssサンプル)
.section .entry#entry02 {
margin-right:0;
}
▼スクリーンショット(Internet Explorer6)

なんとか見た目は整いました。
なぜ最後だけmarginが伸びるのだろうとか、なんで親要素の幅まで伸ばすんだとか、
いろいろとIE6に突っ込みを入れたいですね。


そんなわけで今回はInternet Explorer6の

floatをかけたblock要素の親要素のwidthが伸びる

というバグを紹介したいと思います。

それでは早速サンプルを見ていただきたいと思います。


(htmlコーディング)
<div class="section">
<div class="block">
<div class="entry" id="entry01">
<h2 class="title">1111</h2>
</div>
<div class="entry" id="entry02">
<h2 class="title">2222</h2>
</div>
<div class="clear"> </div>
</div>
</div>
(cssサンプル)
* {
padding:0;
margin:0;
}
.clear {
clear:both;
height:0;
font-size:1px;
line-height:0;
visibility:hidden;
text-indent:-9999px;
}
.section {
width:650px;
background-color:#9FF;
}
.section .block {
width:630px;
margin:0 auto;
background-color:#F00;
}
.section .entry {
float:left;
width:300px;
margin-right:15px;
background-color:#9F9;
}
.section .entry h2.title {
width:300px;
padding:10px 0;
}

ではまずはFirefoxから。
▼スクリーンショット(Firefox3.0)
さすがFirefox。意図通りですね。

では次に問題児のIE6をご覧ください。
▼スクリーンショット(Internet Explorer6)
floatをかけているentryの親であるblockの幅が伸びているのが
お分かりいただけたかと思います。
どうにもIE6では

floatさせた最後の要素(clearする前)のfloatと反対側のmarginが伸びる
ことがあるようです。(←重要です)

その後、親要素を伸びた値にあわせて広げたりすることがあるようです。(←重要)

これはひどい。
いままでたまに計算はあってるはずなのになぜかIE6でfloatが崩れたり、
なぜかセンタリングした要素がやたら左によってたりしたのは
恐らくこのバグのせいでしょう。

解決策としては最後の要素のmarginをとるのが一番手っ取り早いと思います。

(cssサンプル)
.section .entry#entry02 {
margin-right:0;
}
▼スクリーンショット(Internet Explorer6)

なんとか見た目は整いました。
なぜ最後だけmarginが伸びるのだろうとか、なんで親要素の幅まで伸ばすんだとか、
いろいろとIE6に突っ込みを入れたいですね。

タグ:IE6 CSS 崩れ float
posted by baba at 17:37 | Comment(0) | TrackBack(0) | 情報

2009年09月11日

縦で区切るリストの表現(上下にボーダーがある場合)

こんにちは、馬場です。


webページ内で、
メニューの表示や新着の表示等、
1行ずつ枠線で区切って表示することが
良くあるかと思います。


少し簡単ですが、
縦で区切るリストの表現について
上下にボーダーがある場合と、
上下にボーダーが無い場合を
2回に分けて、ご紹介します。


ちなみに横で区切る場合の対応は
以前のページをご確認ください。
(以前のものを見れば、ほぼ解決してしまいそうですが・・・)
フッタ部分リンクメニューのリストタグによる実現方法




▼縦で区切るリストの表現(上下にボーダーがある場合)


縦で区切るリストの表現で
リストの上下にもボーダーがある場合は、
比較的簡単にできてしまうかと思います。

▼スクリーンショット

※スクリーンショットは、Windows Firefox 3.0のものです。

(htmlコーディング)
<div id="wrapper">
<ul>
<li><a href="#">テストテキスト1</a></li>
<li><a href="#">テストテキスト2</a></li>
<li><a href="#">テストテキスト3</a></li>
<li><a href="#">テストテキスト4</a></li>
<li><a href="#">テストテキスト5</a></li>
</ul>
</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
#wrapper {

width:200px;
margin:auto;
padding:10px;

}
#wrapper ul {

list-style-type:none;
background-image:url(line.gif);
background-repeat:repeat-x;
background-position:left top;

}
#wrapper li {

padding:10px;
background-image:url(line.gif);
background-repeat:repeat-x;
background-position:left bottom;

}


上記サンプルのように
liの下にボーダーを表示し、
ulの上へボーダーを表示すれば
問題無く対応できます。
(liの上とulの下でも問題ありません。また、borderでも対応可能です。)

・・・今回は簡単でしたが、
「上下にボーダーが無い場合」では
少しひねりを加えていますので、
ご安心を。

ホントに少しなので、
過度の期待は厳禁です。
posted by baba at 20:22 | Comment(0) | TrackBack(0) | テクニック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。