プロが教えるわが家の防犯対策術！

【外部CSS】 マージン設定がIEでは適用されるのにsafariとfirefoxでは適用されません。。(文章修正)

解決済

  • 質問者：hanami873
  • 質問日時：
  • 回答数：2件

よろしくお願い致します。

タイトルの通りなのですが、外部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.dt …​
<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講座サイト様を参考にさせていただいたので、内容が重複していたり、おかしな間違いがあったらすみません・・。

ご指摘よろしくお願い致します。
長くなってしまい、申し訳ありません。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： kuzumiHK
  • 回答日時：

まず、原因としてあげられるのは、


スタイルの閉じの「}」が全角の「｝」になっている部分が、
上記の中だけでも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）で閲覧することを前提に作る傾向があります。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

そういえば私、一部全角で打っていたかも・・と思いながらおそるおそる半角に直して表示してみたところ・・・ばっちり直りました！！
こんなところを間違えてずっと悩んでいたなんて。。と恥ずかしくなりました。

本当にありがとうございました！

通報する
お礼日時：2008/05/06 18:05

No.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
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

教えていただいたサイトは知っていたのですが、
DOCTYPE宣言についてはさっぱり勉強しておらず、metametamuさんのおかげで勉強する機会に出会えました！ありがとうございます。

問題の箇所はNO.1さんのご意見で解決できたのですが、DOCTYPE宣言もまちがっていたので直させていただきました。

最近はXHTMLのほうが推奨されているみたいなので、XHTMLのstrictにしました。

本当にありがとうございました！

通報する
お礼日時：2008/05/06 18:02

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報