CSS初心者です。

勉強も兼ね xhtml1.0

<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

にてサイト作成中です。
全体のセンターよせを
#wrapper{width:756px; margin:0 auto;}

で行っておりますが
Firefox IE7には対応するのですがIE6では対応できておりません。

追加に必要なタグをどなたかご教授頂けますでしょうか?よろしくお願いいたします。

回答の条件
  • 1人2回まで
  • 登録:2007/04/25 16:57:59
  • 終了:2007/04/25 18:41:54

ベストアンサー

id:blanccasse No.5

blanccasse回答回数142ベストアンサー獲得回数152007/04/25 18:04:21

ポイント40pt

これ、困りますよね。でもIE6は無視するわけにはいきませんし(溜め息)。

私は諦めて、2番の回答者さまと同様のハックを一括指定として使っています。具体的には

body {
	text-align: center;
	}
body div {
	text-align: left;
	margin: 0 auto;
	}

という、記載です。私もよく覗かせていただいているサイトなのですが、とても丁寧に分かりやすく教えてくださっているところなので、ぜひ下記URLをご参考になさってみてください。

http://adp.daa.jp/archives/000250.html

質問者さまは、ブラウザは何をお使いですか?

「勉強を兼ねて」ということであれば、Strict(標準準拠)で作成して、firefoxとIEで見比べつつ作成されると、IEバグ対応の練習にもなるのではないでしょうか。

id:kazuhiko11

参考サイトありがとうございます!

このサイトを元に再度CSSを組みなおしていこうと思います。

普段Firefoxに慣れてしまっている為、ついついIE(特に6)の対応を後手で行ってしまい、めちゃくちゃ混乱したソースになったりしています;;

ありがとうございました!

2007/04/25 18:40:11

その他の回答(4件)

id:GEN111 No.1

GEN111回答回数472ベストアンサー獲得回数582007/04/25 17:01:38

ポイント10pt

IE6 は margin : auto に対応していないので、外側のブロックで text-align : center にしてやらなければいけません。

id:kazuhiko11

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

text-align : center

にすると

中のテキストも一緒にセンターよせになってしまいます。

2007/04/25 17:14:44
id:GEN111 No.2

GEN111回答回数472ベストアンサー獲得回数582007/04/25 17:29:22

ポイント10pt

中のテキストも一緒にセンターよせになってしまいます。

 それはもう対症療法で中のブロックで text-align : left にしてやるしかありません。

id:kazuhiko11

ごめんなさい、

そもそも

#wrapper{width:756px; margin:0 auto;text-algin:left;}

に、なりません;;

2007/04/25 17:54:56
id:skuare No.3

すくえあ回答回数22ベストアンサー獲得回数32007/04/25 17:28:24

ポイント20pt

text-align : center

にすると

中のテキストも一緒にセンターよせになってしまいます。

IEのおかげで、そういうことになります。

なので、p要素など左寄せにしたいのを

text-align:left;

にしてあげてください。

id:kazuhiko11

上記コメント修正です、すいません。



ごめんなさい、

そもそも

#wrapper{width:756px; margin:0 auto;text-algin:center;}

センターよせに、なりません;;

2007/04/25 17:55:56
id:nyama No.4

のり回答回数86ベストアンサー獲得回数62007/04/25 17:53:48

ポイント29pt

http://www.mars.dti.ne.jp/~fuming/advanced/dtd.htm

IE6 は xml 宣言があると、互換モードでレンダリングしてしまうため、margin:0 auto; が効かなくなってしまいます。

そこで、xml 宣言をなしにするのが、具体的な対策となります。

XHTML において、xml 宣言を省略する場合は、以下が参考になります。

http://iwai.alib.jp/tips/xml/xml-declarations-for-xhtml.htm

id:blanccasse No.5

blanccasse回答回数142ベストアンサー獲得回数152007/04/25 18:04:21ここでベストアンサー

ポイント40pt

これ、困りますよね。でもIE6は無視するわけにはいきませんし(溜め息)。

私は諦めて、2番の回答者さまと同様のハックを一括指定として使っています。具体的には

body {
	text-align: center;
	}
body div {
	text-align: left;
	margin: 0 auto;
	}

という、記載です。私もよく覗かせていただいているサイトなのですが、とても丁寧に分かりやすく教えてくださっているところなので、ぜひ下記URLをご参考になさってみてください。

http://adp.daa.jp/archives/000250.html

質問者さまは、ブラウザは何をお使いですか?

「勉強を兼ねて」ということであれば、Strict(標準準拠)で作成して、firefoxとIEで見比べつつ作成されると、IEバグ対応の練習にもなるのではないでしょうか。

id:kazuhiko11

参考サイトありがとうございます!

このサイトを元に再度CSSを組みなおしていこうと思います。

普段Firefoxに慣れてしまっている為、ついついIE(特に6)の対応を後手で行ってしまい、めちゃくちゃ混乱したソースになったりしています;;

ありがとうございました!

2007/04/25 18:40:11

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません