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

解決済みの質問

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

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><!--end main_l-->

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

<div class="clear"><br></div><!--clear-->
フッター
</div><!--end sotowaku-->
</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|
となるはずなのに、
IE6では左25pxと右10pxのマージンが大きく(倍くらいになってます)、左右のメインが重なってしまいます。
Firefoxではちゃんと表示されます。
どこか記述がおかしいのでしょうか。
マージン設定はしないほうがいいのでしょうか。
どうすればIEでもちゃんと表示されるようになるでしょうか。
いろいろいじりましたが分からないので、お教えいただければありがたいです。よろしくお願いします。

投稿日時 - 2008-03-10 11:25:37

QNo.3849526

困ってます

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

こんにちは

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; }
でも構わないです

投稿日時 - 2008-03-10 11:53:41

お礼

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

>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さんて困ったものですね(7では直ったのかわかりませんが)。

投稿日時 - 2008-03-10 15:00:37

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

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

回答(4)

ANo.4

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

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

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

投稿日時 - 2008-03-10 20:01:25

補足

こういったご指摘は非常にありがたく思います。
ぜひまたよろしくお願いいたします。

投稿日時 - 2008-03-10 21:42:27

お礼

ご指摘ありがとうございます。
いや、おっしゃる通りでございます。

もちろんアップしてるファイルには入ってるんですが、とりあえず動きを見る為に打ったテストファイルには打ってませんでした、
すいません・・・(^^;

投稿日時 - 2008-03-10 21:42:12

ANo.3

こんにちは

DTD宣言してますか?
してないと630pxになるみたいですけど・・・

http://www.shoshinsha.com/hp/1hour/1hour_after/need.html

投稿日時 - 2008-03-10 15:54:07

お礼

再度のご回答ありがとうございます。

おっしゃる通り、テストファイルはめんどくさくてDTD宣言してませんでした・・・
HTML4.01 Transitionalで入れたら、まさにIE・Firefoxともに同じ表示になりました!

勉強になりました。
まことにありがとうございます。

投稿日時 - 2008-03-10 18:14:05

ANo.2

頑張って以下を全部読んでください。
http://members.at.infoseek.co.jp/cssbug/detail/winie.html

心あるWeb制作者は、こういうのを
全部読んで理解しています。
私もすべて読みました。

はっきりいって、CSSを理解するのは簡単ですが、
使いこなすのには根気が必要です。

投稿日時 - 2008-03-10 15:11:41

お礼

回答ありがとうございます。

ご紹介いただいたサイト、いくつか読んでみましたがすごいですね。
こんなにいろいろあるんですね。
こういうサイトをご紹介いただくとメチャメチャありがたいです。
必ず全て読もうと思います。
ありがとうございました。

投稿日時 - 2008-03-10 18:06:58

あなたにオススメの質問