IEとファイヤーフォックスでのレイアウト違い

質問

外部CSSにてレイアウト組んだのですがIE７とファイヤーフォックスで微妙に違うレイアウトになってしまいます。。
IEですとメインフラッシュの横に１ｐｘ程度の白い空白ができてしまいます。
正しくはファイヤーフォックスのように空白がない　というようにIEでも表示させたいのですが・・・・。

どなたかお力添えいただけると幸です。。
http://studio-evah.com/test/

cssは
http://studio-evah.com/test/css/css.css　です。

よろしくお願いします。

回答No.2

noname#119957 · ベストアンサー

ちなみに、ＩＥ６では、レイアウトが完全に崩れ居ています。これは、ＦＬＯＡＴさせた場合の左右のマージンが２倍になるバグが起因していますので、marginをpaddingに置き換えることにより解決できます。
その他：右側コンテンツの２つのＢＯＸの幅が30ＰＸ不足していました。

ＣＳＳの例：frefox IE6で大まかに確認しています。

@charset "utf-8";

/*====================================================
■基本設定
======================================================*/
*{margin: 0;padding: 0;}
body{
/*背景イメージ*/
background-image: url(../images/background.gif);
/*行揃え*/
text-align:center;
/*パディング*/
/*上、右、下、左*/
margin: 0px 0px 20px 0px;
}

div,td{
font-size: 12px;line-height: 19px;
color: #555555;
font-family: "ＭＳ Ｐゴシック","Osaka";
font-weight: normal;
word-break:break-all;
text-align:left;
}

img{border: 0px;}
br{width:0px;height:0px;}

/*====================================================
■リンク設定
======================================================*/
A:link{
color: #0066FF;text-decoration:underline;
}
A:visited {
color: #0066FF;text-decoration:underline;
}
A:hover {
color: #FF6600;text-decoration:none;
}
A:active {
color: #FF6600;text-decoration:underline;
}

/*====================================================
■メインコンテンツ設定
======================================================*/
.clear { clear:both; }
.clear hr { display:none; }

/*コンテンツの背景*/
#back_contents{
width:1024px;/*★*/
padding:0px;
margin:0px auto;
text-align:center;
background: url(../images/back_contents.gif) repeat-y 0% 0%;

}

/*container*/

#container{
width:1009px;/*★*/
text-align:center;
padding:0px;margin:0px auto;
}

/*ヘッダクラス*/
#header_back{
width:100%;/*★*/
padding:0px;
background-image: url(../images/back_header.gif);
background-repeat: repeat-x;
height: 87px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header_logo{
padding: 0px;
float: right;
}
#header_navigation{
float:right;
margin-right: 15px;
margin-top: 23px;
}
ul.navigation{
float:right;
}
ul.navigation li{
list-style:none;
float:left;
}

/*メイン画像＆フラッシュ*/

#main_top{
width:100%;/*★*/
height: 257px;
padding:0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

#bannar_back{
width:192px;
height: 256px;
text-align: center;
padding-top:10px;
background: url(../images/back_sky.jpg) no-repeat 0% 0%;
float: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

#bannar_navi {
width:192px;
height: 60px;
text-align: center;
}
ul.bannar_navi li{
list-style: none
float:left;
}

/*メインコンテンツ*/
#contents_left{
width:192px;
float:left;
text-align:center;
padding:0px;margin:0px auto;
}
#sponsor_left{
width:192px;
text-align:center;
padding-top: 13px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
clear : both;
}

#sponsor_bannar {
width:192px;
height: 50px;
text-align: center;
}

#contents_right{
width:817px;
float:right;
text-align:center;
padding-bottom: 20px;
}

#flash{
width:817px;/*★*/
padding:0px;
margin:0px;
clear: both;

}
#contents{
width:725px;
float:left;
margin-top: 20px;
text-align: center;
margin-left: 30px;
}
#ttl{
text-align: center;
width: 725px;
clear: right;
}
/*NEWS部分*/
#contents_saishin{
width:755px;
float:left;
margin-top: 20px;
padding: 0px 0px 0px 30px;
}

#contents_teaminformation{
width:725px;
text-align: center;
margin-left: 30px;
clear: both;
padding-top: 20px;
}

#saishin_txt{
width:725px;
margin-top: 20px;
margin-bottom: 3px;
margin-left: 10px;
clear: both;
}
#icon{
float:left;
margin-right:5px;
margin-top:3px;
}
#info{
float:left;
width:370px;
padding-left: 10px;
}
#info_txt{
float:left;
margin-bottom:3px;
}
#info_photo{
float:right;
width:117px;
margin-right: 0px;
margin-top: 10px;
}
#dot_line{
width:715px;
height:5px;
background-image: url(../images/dot_line.gif);
background-repeat: repeat-x;
margin-top: 10px;
float: left;
margin-left: 8px;
}

#contents_naiyou{
width:521px;
text-align: center;
}

/*このページの先頭へ*/
#page_top{
margin-top:20px;
float:right;
}

/*スポンサー部分*/
#sponsor_ttl{
width:210px;
margin-top: 20px;
}

#contents_sponsor{
width:210px;
background-image: url(../images/back_sponsor.gif);

}

/*フッター*/
#contents_footer{
width:1024px;height:10px;
padding:0px;margin:0px auto;
background: url(../images/contents_footer.gif) no-repeat 0% 0%;

}

#footer_container{
width:1024px;
height:60px;
background: url(../images/back_footer.gif) repeat-y 0% 0%;
padding:0px;
margin:0px auto;
clear: both;
}
#footer_copyright{
padding:0px;
float:left;
margin-top: 20px;
margin-left: 65px;
}
#footer_link{
padding:0px;
float:right;
font-size: 12px;
margin-right: 65px;
margin-top: 13px;
}

お礼

ありがとうございました。html側でも改行箇所の原因ということが判明しました。

回答No.1

salonpath

ieのバグらしいです
http://www.at-with.com/labo/0003_01.php

ieだけにハックをかまして1pxずらしてやるなどして対処するといいみたいですよ。
http://wd.kkws.org/archives/20
http://oshiete1.goo.ne.jp/qa3503186.html