4段カラムのレイアウトが・・・＞＜

質問

下記の通りそれぞれ、htmlとcssを記述しているのですが、IEでの表示がうまくいきません。
mozilla firefoxでは意図通り表示されるのですが、IEでも同様に表示させたいのです。
解決法はありますでしょうか？
----------------------------------------------------------
<div id="brand_navi">

<h5>ブランドリスト</h5>

<div id="brand_navi_contents">

<div id="brand_navi_left">

<div id="block_01">
<ul id="brand_a">
<li>アルマーニジーンズ</li>
<li>アンテプリマ</li>
<li>イヴサンローラン</li>
<li>ヴィヴィアンウエストウッド</li>
<li>エルメス</li>
<li>エンポリオアルマーニ</li>
</ul>

<ul id="brand_ka">
<li>カルバンクライン</li>
<li>キプリング</li>
<li>グッチ</li>
<li>クリスチャンディオール</li>
<li>クロエ</li>
<li>コーチ</li>
</ul>
</div>

<div id="block_02">
<ul id="brand_sa">
<li>サムソナイト</li>
<li>シャトーベルサイユ</li>
<li>ジュディ</li>
<li>ジョンガリアーノ</li>
<li>ゼニア(エルメネジルドゼニア)</li>
<li>セリーヌ</li>
</ul>

<ul id="brand_ta">
<li>ディー＆ジー(D＆G)</li>
<li>ディーゼル</li>
<li>ディオールオム</li>
<li>デュベティカ</li>
<li>トミーヒルフィガー</li>
<li>ドルチェ＆ガッバーナ</li>
</ul>
</div>

<div class="c_both"></div>

</div>

<div id="brand_navi_right">

<div id="block_03">
<ul id="brand_na">
<li>ノーネーム </li>
</ul>

<ul id="brand_ha">
<li>バーバリー</li>
<li>バレンシアガ</li>
<li>ピエールバルマン</li>
<li>フェラガモ </li>
<li>フェンディ</li>
<li>プラダ</li>
<li>フランチェスコビアジア</li>
<li>ブリー</li>
<li>ブルガリ</li>
<li>ポールスミス</li>
<li>ボッテガヴェネタ</li>
</ul>
</div>

<div id="block_04">
<ul id="brand_ma">
<li>マックスマーラ</li>
<li>マックス＆コー</li>
<li>マルタンマルジェラ</li>
<li>マルベリー</li>
<li>マークジェイコブス</li>
<li>モンクレー</li>
</ul>

<ul id="brand_ra">
<li>リプレイ </li>
<li>リモワ</li>
<li>ルイヴィトン</li>
<li>ルナロッサ</li>
<li>レスポートサック</li>
<li>レッドペッパー</li>
</ul>
</div>

<div class="c_both"></div>

</div>

<div class="c_both"></div>

</div>

</div>

------------------------------------------------------
#brand_navi{width:910px;background-color:#990000;}

#brand_navi_contents{width:870px; margin:0 10px 0 30px; background-color:#CCCCFF;}

#brand_navi_left{float:left; width:420px; background-color:#FFCCFF;}
#brand_navi_right{float:right; width:450px; background-color:#99CCCC;}

#block_01{ width:195px;float:left;}
#block_02{ width:195px; margin-left:30px; float:right;}
#block_03{ width:195px; margin-left:30px; float:left;}
#block_04{ width:195px; margin-left:30px; float:right;}
.c_both{clear: both;}

ul{ width:195px; padding:0; margin:10px 0px; background-color:#dddddd; list-style-position:inside;}
li{ margin-bottom:5px; font-size:75%; list-style:square;}
#brand_a li{color: #FF0000;}
#brand_ka li{color: #CC3300;}
#brand_sa li{color: #996699;}
#brand_ta li{color: #CC6600;}
#brand_na li{color: #0066FF;}
#brand_ha li{color: #FF6699;}
#brand_ma li{color: #666600;}
#brand_ya li{color: #993399;}
#brand_ra li{color: #CC9900;}
#brand_wa li{color: #333333;}

回答No.1

kuzumiHK · ベストアンサー

floatのなかのmarginはIE6の場合、2倍に計算されてしまうようです。
#block_02～04のmargin-leftをpadding-leftに変更することで、
IEでも同じように表示されます。
どうしてもmarginで余白を設けたい場合は、
下記のURLにあるように条件付コメントを使って、
IE6用にmarginを設定しなおすといいと思います。
http://allabout.co.jp/internet/hpcreate/closeup/CU20070412A/index2.htm

お礼

ありがとうございます＾＾
なるほど。IE6はfloatの中のmarginが2倍で計算されるとは…知りませんでした。
背景色はブロックの見分けが制作の段階ですぐ分かるように設定しているだけなので、最終的には背景色をなくす為、paddingに変える事で問題なく解決しました＾＾
本当にありがとうございました！