【最大10000ポイント】当たる!!質問投稿キャンペーン!

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でもちゃんと表示されるようになるでしょうか。
いろいろいじりましたが分からないので、お教えいただければありがたいです。よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

こんにちは



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

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

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



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

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

この回答への補足

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

補足日時:2008/03/10 21:42
    • good
    • 0
この回答へのお礼

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

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

お礼日時:2008/03/10 21:42

こんにちは



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

http://www.shoshinsha.com/hp/1hour/1hour_after/n …
    • good
    • 0
この回答へのお礼

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

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

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

お礼日時:2008/03/10 18:14

頑張って以下を全部読んでください。


http://members.at.infoseek.co.jp/cssbug/detail/w …

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

はっきりいって、CSSを理解するのは簡単ですが、
使いこなすのには根気が必要です。
    • good
    • 0
この回答へのお礼

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

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

お礼日時:2008/03/10 18:06

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング