CSSの左右よせのマージン、IEとFirefoxで表示が違う

解決済

質問者：tackross
質問日時：2008/03/10 11:25
回答数：4件

CSSの左右よせのマージンについて、どうしても原因が分からない事があるので質問します。
下記ファイル（マージンが分かるようにボーダー設定してます）
-----------htmlファイル--------------
<html>
<head>
<title>CSSテスト</title>
<link href="test1.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="sotowaku">

<div class="main_l">
左側の写真です。
</div>

<div class="main_r">
右側の本文です。
</div>

<div class="clear"><br></div>
フッター
</div>
</body>
</html>
-------------------------------------
-------------cssファイル-------------
body {
text-align: center;
margin: 0px;
}

.sotowaku {
width: 700px;
margin: 0 auto;
border: solid 1px #999999;
}

.main_l {
width: 150px;
float: left;
margin-top: 0px;
margin-left: 25px;
border: solid 1px #999999;
}

.main_r {
width: 490px;
float: right;
margin-top: 0px;
margin-right: 10px;
border: solid 1px #999999;
}

.clear {
clear: both;
}
-------------------------------------
をIEとFirefoxでプレビューすると
中央700pxの幅の中に
｜25px｜写真150px｜25px｜本文490px｜10px｜
となるはずなのに、
IE６では左25pxと右10pxのマージンが大きく(倍くらいになってます）、左右のメインが重なってしまいます。
Firefoxではちゃんと表示されます。
どこか記述がおかしいのでしょうか。
マージン設定はしないほうがいいのでしょうか。
どうすればIEでもちゃんと表示されるようになるでしょうか。
いろいろいじりましたが分からないので、お教えいただければありがたいです。よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： leap_day
回答日時：2008/03/10 11:53

こんにちは

IEではfloatを使用した場合、marginが倍になるというバグがあります
なのでpaddingなどを使います

.sotowaku {
padding-left: 25px;
padding-right: 10px;
width: 665px;
margin: 0 auto;
border: solid 1px #999999;
}

.main_l {
margin-left: 25px;　←削除
}

.main_r {
margin-right: 10px;　←削除
}

になります

※別に枠とか背景色とか指定しないのであれば
.sotowaku { width:700px; }
.main_l { padding-left:25px; }
.main_r { padding-right:10px; }
でも構わないです

- 0
- 件

通報する

この回答へのお礼

こんにちは。
回答ありがとうございます。

＞IEではfloatを使用した場合、marginが倍になるというバグがあります

な、なんと。そうだったんですか。
知りませんでした。
聞いてしまえば納得ですが、自分だけだと「どこか間違っているのでは？何か足りないのでは？」と、1時間以上もあれやこれやといじっていました。
助かりました、ありがとうございます。
IEって結構バグがあるんですね。

ちなみに.sotowakuを
padding-left: 25px; padding-right: 10px; width: 665px;
にし、main_l(_r)の左右marginを削除した場合、
Firefoxではやはりちゃんと表示されるのですが、今度はIEではsotowakuの外側の幅を665pxとしてしまい、paddingの内側は665pxからさらに35px引いた630pxとなってしまいました。
paddingの外側で幅指定をとってしまうのもIEのバグなんでしょうか?

実は先日テーブル幅の質問をしたのですが、
http://oshiete1.goo.ne.jp/qa3839282.html
これもIEの癖かも？

ちょっとIEさんて困ったものですね（７では直ったのかわかりませんが）。

通報する

お礼日時：2008/03/10 15:00

No.4

回答者： abril
回答日時：2008/03/10 20:01

回答ではありませんが、非常に気になったので。

> めんどくさくてＤＴＤ宣言してませんでした・・・

10数年前の素人じゃあるまいし、いまどきCSSでコーディングしようと言う人間が「有り得ない」ことをしてはいけません。DTD宣言は飾りじゃありませんよ。HTML文書にとって必要不可欠な記述です。そしてそれによってCSSの解釈だって異なるのですから。