よろしくお願い致します。
タイトルの通りなのですが、外部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講座サイト様を参考にさせていただいたので、内容が重複していたり、おかしな間違いがあったらすみません・・。
ご指摘よろしくお願い致します。
長くなってしまい、申し訳ありません。
No.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)で閲覧することを前提に作る傾向があります。
ご回答ありがとうございます!
そういえば私、一部全角で打っていたかも・・と思いながらおそるおそる半角に直して表示してみたところ・・・ばっちり直りました!!
こんなところを間違えてずっと悩んでいたなんて。。と恥ずかしくなりました。
本当にありがとうございました!
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
ご回答ありがとうございます。
教えていただいたサイトは知っていたのですが、
DOCTYPE宣言についてはさっぱり勉強しておらず、metametamuさんのおかげで勉強する機会に出会えました!ありがとうございます。
問題の箇所はNO.1さんのご意見で解決できたのですが、DOCTYPE宣言もまちがっていたので直させていただきました。
最近はXHTMLのほうが推奨されているみたいなので、XHTMLのstrictにしました。
本当にありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
text-alignの解除の方法
-
CSSの設定
-
CSSで、height:100%の中央寄せ
-
marginを指定した見出し要素の...
-
引用文を囲むボックスの作り方
-
ページのマージン・・・
-
外部CSSがFireFoxで反映されません
-
<h1>タグの後の行間を詰めたい。
-
CSSで<p>の幅指定を解除したい。
-
FLASHの中央配置はどうやるの?
-
Excelで文字の幅を変える方法
-
エクセルでサイズに合ったもの...
-
PDFへてのテキストボックスにて...
-
htmlでテーブル内にテキストボ...
-
Excel で等間隔で縦線を引きた...
-
エクセルでサイズ指定でPOP...
-
エクセル 画面表示拡大率によ...
-
<tbody>は何のためにあるんでし...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
インラインフレームの表示位置...
-
<h1>タグの後の行間を詰めたい。
-
HTMLフォームのSELECTの幅を一...
-
macとwindowsのレイアウト崩れ...
-
INPUT TEXT内の文字位置を指定...
-
text-alignの解除の方法
-
ホームページビルダー 空白の...
-
Formタグのブロックの高さについて
-
端から端まで横線を引きたい
-
<legend>で表示されるタイトル...
-
なぜ左に寄っているの?
-
FireFoxで見るとブラウザの幅に...
-
コードを書いて下さい( ; ; )...
-
アップロードするサーバーによ...
-
CSSでh1とその下の文字との行間...
-
文字を内側にも色の付いた枠で...
-
テキストボックスの文字を右揃...
-
Dreamweaverで画面サイズを一定...
おすすめ情報