みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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;}

投稿日時 - 2008-05-28 20:11:49

QNo.4057899

すぐに回答ほしいです

質問者が選んだベストアンサー

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

投稿日時 - 2008-05-28 22:17:39

お礼

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

投稿日時 - 2008-05-28 23:26:34

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問