人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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では対応できておりません。

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

●質問者: kazuhiko11
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS firefox IE6 IE7 margin
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● GEN111
●10ポイント

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

◎質問者からの返答

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

text-align : center

にすると

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


2 ● GEN111
●10ポイント

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

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

◎質問者からの返答

ごめんなさい、

そもそも

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

に、なりません;;


3 ● すくえあ
●20ポイント

text-align : center

にすると

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

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

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

text-align:left;

にしてあげてください。

◎質問者からの返答

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



ごめんなさい、

そもそも

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

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


4 ● のり
●29ポイント

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


5 ● blanccasse
●40ポイント ベストアンサー

これ、困りますよね。でも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バグ対応の練習にもなるのではないでしょうか。

◎質問者からの返答

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ