古いIEでレイアウト崩れます。

質問

webデザイン初心者です。
就職活動用にサイトを制作しました。講習などで、IEではレイアウト崩れがおきやすい
などのざっくりと知識はありますが、実際それを実践に生かせません。
サイトを構築した結果、やはりIE5.5,ＩＥ6、IE7でレイアウト崩れが起きます。

Ｃｌｅａｒｆｉｘというものや、Floatでバグが起きるなど「そういうことがあるんだ」くらいの知識だけがあって、それを自分の作成したサイトにどう反映させてゆけばいいのか分かりません。

とりあえず、今回制作したサイトをすべてのOSで表示できるようにしたいので、
具体的に、どのソースをどう直せばよいか教えてください。

USOマーケティング会社
http://usomarketingcompany.web.fc2.com/

ｃｓｓは

@charset "utf-8";
body{
width:760px;
margin:auto;
}
#page{
margin-top:0;
font-size:14px;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
width: 100%;
background:#ffffff;
height: 100%;
min-height: 100%;
}
hr{
width:100%;
height:10px;
background-color:#9f1d22;
margin:0;
}
/* ヘッダーの設定 */
h1{
margin-top:10px;
margin-bottom:10px;
margin-left:32px;
margin-right:86px;
float:left;
}
.tel{
margin-top:10px;
margin-right:32px;
}
#navi{
clear:left;
margin:0;
text-align:center;
}
#header{
margin-bottom:10px;
}
/* メイン画像の設定 */
h2{
margin-bottom:20px;
}
/* プレスリリースの設定 */
#contents{
width:457px;
float:left;
margin-right:20px;
padding-bottom: 50px;
}
h3{
margin-left:32px;
}
dl {
width:425px;
}
dt {
float:left;
width:100px;
padding:5px 0 5px 10px;
clear:both;
font-weight:bold;
margin-left:32px;
}
dd {
width:315px;
margin-left:130px;
padding:5px 5px 5px 10px;
}
.sample{
margin-top:10px;
margin-left:32px;
}
/* 右下バナーの設定 */
.section{
margin-right:32px;
}
div .section p{
margin-bottom:5px;
}
/* フッダーの設定 */
#footer{
clear:both;
width:760px;
color:#ffffff;
background-color:#9f1d22;
height:25px;
bottom:0;
text-align:center;
}
#footer p{
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
line-height:20px;
font-size:12pt;
}

また制作時に、このようなことにならないよう極力気をつけなければならないことなど、
アドバイスいただけたら幸いです。よろしくお願いします。

webデザイナーとして頑張ってゆきたいと思っています。
どうぞよろしくお願いします。

回答No.2

sign_00

現場で働いています。

IE6の場合、「floatした方向にマージンを取ると、その値は2倍になる」というfloatのバグがあります。
これを回避するには、floatと同じ方向にマージンを取らない、どうしても取るときはdisplay:inlineを使用したりして回避します。

業界によりますが、今でもIE6対応は必須になっている場合が多いです。
大企業になればなるほどその傾向は強く、まだまだターゲットブラウザとして生き残っていきそうな気配です。

IEのバグは検索すると、だいたいの場合対策方法が出てきます。
それを参考にしてみてください。

回答No.1

okbakasine

どうしても全部のIEで対応させるならJavaScriptでIEのバージョンを判定して
CSSを切り替える処理を入れる。
それとIE5.5や6はもうサポートしなくてもいいと思いますよ。