- ベストアンサー
【外部CSS】 マージン設定がIEでは適用されるのにsafariとfirefoxでは適用されません。。(文章修正)
よろしくお願い致します。 タイトルの通りなのですが、外部CSSで中央揃えのマージン設定をしたところ、IEではうまく表示されるのですが、safariとfirefoxでは表示されません。 (ブラウザはすべてMacで見ています。) 以下がHTMLとCSSの記述です。(念のため<!DOCTYPE～から記述しています) ●htmlの記述 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <Head> <Title>タイトル</Title> <Meta Http-equiv="content-type" Content="text/html; charset=Shift_JIS"> <link rel="stylesheet" href="../css/base.css" type="text/css"> <script language="JavaScript" src="../java/top.js"></script> </Head> <body> <div id="header"> <img src="../images/img01.gif" width="150" height="40" alt="image1"> </div> <div id="container"> <table width="867" height="400" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="images_top/donguli_home_01.jpg" width="460" height="72" alt="group01" title="group01"> </td> </tr> ～～～以下中略～～～ ●CSSの記述 @charset "Shift_JIS"; @import url("default.css"); /* ページ全体 ---------------------------------------------------- */ BODY,TABLE {font-size :10pt;} body { font-family: "Hiragino Kaku Gothic Pro","Hiragino Kaku Ghothic Pro W3",sans-serif; margin: 0; padding: 0;｝ A{text-decoration:none} A:focus { -moz-outline-style: none; } a img { border-style:none; } b,strong { font-family: "Lucida Grande","Hiragino Kaku Ghothic Pro W6","Hiragino Kaku Gothic Pro",sans-serif; } img { vertical-align: bottom; border: none; } /* ヘッダ ---------------------------------------------------- */ #header { width:867px; margin-left:auto; margin-right:auto;｝ /* コンテンツ ---------------------------------------------------- */ #container {margin:0 auto; width:867px; text-align:left;} と、上記のようにしています。 また、直接HTMLに <div style="margin-left:auto;margin-right:auto;width:867px;border:0;"> を書き込んだ時は、どのブラウザでもうまく表示されました。 外部CSSにしたとたん、適用されません。。 どこかの箇所が間違ってるのでしょうか・・？ それともブラウザの設定がおかしいとかなのでしょうか？ 記述したCSSも、いろんな書籍やHTML講座サイト様を参考にさせていただいたので、内容が重複していたり、おかしな間違いがあったらすみません・・。 ご指摘よろしくお願い致します。 長くなってしまい、申し訳ありません。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
まず、原因としてあげられるのは、 スタイルの閉じの「}」が全角の「｝」になっている部分が、 上記の中だけでも2箇所あります。 そのため、それ以降のすべてのスタイルが、 厳密には無効化しているようです。 MacIEは、ブラウザ側で勝手に修正してくれているか、 もしくは、別のcenter系の指定でIEのバグによって、 偶然センターになっているのかもしれません。 ちなみに、IEのバージョンが5.5以下の場合、 marginでセンターにすることができないため、 以下のように対処します。 <div style="text-align:center;width:100%"> <div style="margin:0 auto;border:1px solid #f00;width:600px;text-align:left"> あああああああ </div> </div> 外側のdivでIEのバグ仕様を使って全体をセンターに持っていき、 それから内側のdivで幅を設定してセンターにし、 テキストもセンター合わせになってしまっているので左合わせに戻します。（MacIEもこれが必要だった気がします） WinIE5.5↓やMacIE5.2↓を対象にするとバグ対策で入れ子が増えるため、 最近では企業サイトでもIE6以上（MacはSafariかFirefox）で閲覧することを前提に作る傾向があります。
その他の回答 (1)
DOCTYPE宣言のせいだと思います。 ttp://www.htmq.com/html/doctype.shtml おそらくCSSの書き方から宣言はstrictがいいと思います。(コピペしときます) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 下記のサイトでチェック&修正してください。 ttp://openlab.ring.gr.jp/k16/htmllint/htmllint.html
お礼
ご回答ありがとうございます。 教えていただいたサイトは知っていたのですが、 DOCTYPE宣言についてはさっぱり勉強しておらず、metametamuさんのおかげで勉強する機会に出会えました！ありがとうございます。 問題の箇所はNO.1さんのご意見で解決できたのですが、DOCTYPE宣言もまちがっていたので直させていただきました。 最近はXHTMLのほうが推奨されているみたいなので、XHTMLのstrictにしました。 本当にありがとうございました！
お礼
ご回答ありがとうございます！ そういえば私、一部全角で打っていたかも・・と思いながらおそるおそる半角に直して表示してみたところ・・・ばっちり直りました！！ こんなところを間違えてずっと悩んでいたなんて。。と恥ずかしくなりました。 本当にありがとうございました！