• ベストアンサー

【外部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講座サイト様を参考にさせていただいたので、内容が重複していたり、おかしな間違いがあったらすみません・・。 ご指摘よろしくお願い致します。 長くなってしまい、申し訳ありません。

  • HTML
  • 回答数2
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • kuzumiHK
  • ベストアンサー率72% (132/183)
回答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）で閲覧することを前提に作る傾向があります。

hanami873
質問者

お礼

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

その他の回答 (1)

noname#66720
noname#66720
回答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

hanami873
質問者

お礼

ご回答ありがとうございます。 教えていただいたサイトは知っていたのですが、 DOCTYPE宣言についてはさっぱり勉強しておらず、metametamuさんのおかげで勉強する機会に出会えました！ありがとうございます。 問題の箇所はNO.1さんのご意見で解決できたのですが、DOCTYPE宣言もまちがっていたので直させていただきました。 最近はXHTMLのほうが推奨されているみたいなので、XHTMLのstrictにしました。 本当にありがとうございました！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 【外部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で中央揃えのマージン設定をしたところ、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> 　　～～～以下中略～～～ ●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講座サイト様を参考にさせていただいたので、内容が重複していたり、おかしな間違いがあったらすみません・・。 ご指摘よろしくお願い致します。 長くなってしまい、申し訳ありません。

  • IE用CSSが適用されない

    通常は12pxを指定して、IEのみフォントサイズを11px指定したいのです。 <!DOCTYPE HTML> <html lang="jp"> <head> <meta charset="UTF-8"> <title>タイトル</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css"><![endif]--> <style> body { background-color:#FFFFFF; color:#333333; font: 'Lucida Grande', Verdana, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, 'メイリオ', sans-serif; } #figure_main { font-size:12px; margin-top:10px; margin-left:10px; width:510px; } </style> </head> <body> <div id="figure_main"> <div class="box1"> <span>取締役会</span> </div> <div class="box1"> <span>取締役社長</span> </div> <div class="box2"> <span>常勤役員会</span> </div> <div> <ul> <li class="list_l">営業局</li> <li>人材派遣部</li> </ul> </div> </div> </body> </html> HTMLには<!--[if IE]>を記述し、 ie.cssには @charset "utf-8"; /* CSS Document */ #figure_main { font-size:11px; } と記述しましたが、適用されませんでした。適用されない理由を教えてくださいますか？ 宜しくお願いします。

    • ベストアンサー
    • HTML
  • css firefox IE 画像を中央揃えにしたいです

    初心者です。よろしくお願い致します。 cssでホームページを作っています。 index.htmlに画像を中央に貼り付けたいのですが、 firefoxでは中央揃えに、IEでは左側に表示されます。 下にタグを書くので、ご回答いただけましたら幸いです。 よろしくお願い致します。 -------------------------------------------------- <html> <head> <title>○○○</title> <link href="design/index.css" rel="stylesheet" type="text/css"> </head> <body> <div class="contents"> <img src="img/tobira.jpg"> </div> </body> </html> -------------------------------------------------- /*ページのレイアウト用css*/ body{ margin:0px; padding:0px; background-color:#FFFFFF; } body a img{ border: none; align:center; } .contents{ width:800px; margin:0px auto; margin-top:100px; } h1{ color: #FFFFFF; }

    • ベストアンサー
    • HTML
  • CSSの左右よせのマージン、IEとFirefoxで表示が違う

    CSSの左右よせのマージンについて、どうしても原因が分からない事があるので質問します。 下記ファイル（マージンが分かるようにボーダー設定してます） -----------htmlファイル-------------- <html> <head> <title>CSSテスト</title> <link href="test1.css" rel="stylesheet" type="text/css"> </head> <body> <div class="sotowaku"> <div class="main_l"> 左側の写真です。 </div><!--end main_l--> <div class="main_r"> 右側の本文です。 </div><!--end main_r--> <div class="clear"><br></div><!--clear--> フッター </div><!--end sotowaku--> </body> </html> ------------------------------------- -------------cssファイル------------- body { text-align: center; margin: 0px; } .sotowaku { width: 700px; margin: 0 auto; border: solid 1px #999999; } .main_l { width: 150px; float: left; margin-top: 0px; margin-left: 25px; border: solid 1px #999999; } .main_r { width: 490px; float: right; margin-top: 0px; margin-right: 10px; border: solid 1px #999999; } .clear { clear: both; } ------------------------------------- をIEとFirefoxでプレビューすると 中央700pxの幅の中に ｜25px｜写真150px｜25px｜本文490px｜10px｜ となるはずなのに、 IE６では左25pxと右10pxのマージンが大きく(倍くらいになってます）、左右のメインが重なってしまいます。 Firefoxではちゃんと表示されます。 どこか記述がおかしいのでしょうか。 マージン設定はしないほうがいいのでしょうか。 どうすればIEでもちゃんと表示されるようになるでしょうか。 いろいろいじりましたが分からないので、お教えいただければありがたいです。よろしくお願いします。

    • ベストアンサー
    • HTML
  • IEとFirefoxの見え方のずれにおけるCSSの解決法（liタグ）

    こんにちは、質問させて下さい。 現在　li　タグを使って、メニュー（画像）を作っていたのですが、 IEでは表示されるのですが、firefoxだとどうしても左に余白が出てしまいます。 マーカーボックスの指定が消えていないのかな、と素人ながらに思うのですが、それが正しいのか、正しくとも正しくなくとも、ではどう直せばいいのか分かりません。 どうぞご回答お願いいたします。 以下は、そのliに関連するCSSと、ソースです。 ■CSS #div{ width: 458px; float: left; text-align: center; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #333333; border-bottom-color: #333333; padding-top: 10px; padding-bottom: 10px; margin-bottom: 15px; margin-right: auto; margin-left: auto; padding-left: 10px; } #div ul{ list-style-type:none; display: block; width: 432px; text-align: center; margin: 0px; } #div li { float: left; height: 200px; width: 140px; margin-right: 4px; margin-bottom: 10px; margin-top: 0px; margin-left: 0px; } #div li img{ border:none; ■html <div> <ul> <li><a href="1.html"><img src="image/menu1.jpg" alt="品"></a></li> <li><a href="2.html"><img src="image/menu2.jpg" alt="品"></a></li> <li><a href="3.html"><img src="image/menu3.jpg" alt="品"></a></li> <li><a href="4.html"><img src="image/menu4.jpg" alt="品" /></a></li> <li><a href="5.html"><img src="image/menu5.jpg" alt="品"></a></li> <li><a href="6.html"><img src="image/menu6.jpg" alt="商"></a></li> </ul> </div> 宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSでIEとFirefoxでの表示の違い

    IE6とFirefox2.0で試しています。 次のように、naviでborderを使うとIE6では普通に表示されるのですが、 Firefoxだと右側にborderのサイズの2倍分くらいはみ出てしまいます・・・ 両方に正常（希望通り）に表示されるようにするには どのような記述にすれば良いのでしょうか？ 「sample.css」 .wrapper { background-color: #ccffcc; margin: auto; width: 600px; height: 100%; } .navi { background-color: #aaffaa; border: 3px solid #ff4500; width: 600px; height: 150px; position: relative; } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="wrapper"> <div class="navi"> </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • CSSでのセンタリング

    いつもすみません。 下記のラインをimg（gif）で格好のいい縦ラインにしたいんですが、どのようにしたらいいでしょうか？ よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "​http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">​ <html xmlns="​http://www.w3.org/1999/xhtml">​ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- body{ margin-top: 0px; } #box { height: 500px; width: 700px; margin-right: auto; margin-left: auto; border-right: 1px solid #000000; border-left: 1px solid #000000; } --> </style> </head> <body> <div id="box">←この縦の黒線をimgで表現したいです。</div> </body> </html> ※回答の際には上記タグを改良してお答え願います。

    • ベストアンサー
    • HTML
  • ページ上部に空白ができます

    いつもお世話になります。 dreamweaver8でホームページを作っています。 下記のような記述をすると、ページ上部に空白ができます。 どこを直せばよいのでしょうか、教えて下さい。 【CSS】 #body{ 　　font-family:"メイリオ", Meiryo,"ＭＳ Ｐゴシック", Osaka,"Hiragino", "ヒラギノ角ゴ Pro W3", sans-selif,; color: #333333; font-size:10px; margin: 0; padding: 0; text-align: center; } #wrapper { width: 722px; margin-top:0px; margin-left: auto; margin-right: auto; background-image: url(img/sidebk2.jpg); background-repeat:repeat-y; } #header { background-color: #FFFDE5; background-image:url(img/title_bar.jpg) ; background-repeat:no-repeat; height: 62px; width: 722px; margin-bottom : 0px; } #header p { position: relative; margin: 0; top:42px; left:570px; width:150px; color:#ffffff; font-size: 11px; } 【HTML】 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="style.css" media="all"> </head> <body> <div id="wrapper"> <div id="header"> <p>| <a href="http://***.com" target="_blank">ブログ </a>|<a href="../sitemap.html">サイトマップ</a> |　 </p> </div> </div> </body> </html>

  • ブラウザ枠を超えず表示する方法

    CSSについてですが、まずはCSSとHTMLを見てください。 ↓test.css === * { padding: 0px; margin: 0px; } html, body { width: 100%; height: 100%; } #container { width: 100%; height: 100%; margin: 10px; border: 1px solid #b3b3b3; } === ↓test.html=== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="./test.css" type="text/css"> </head> <body> <div id="container"> </div> </body> </html> === test.html をブラウザで見ると、ボーダーラインがブラウザ枠(右側)を突っ切る形で表示されています。width: 100% と指定したので、現在表示しているブラウザ幅からmargin: 10px したところでborder: 1px が表示される(四角形のボーダーがスクロールなしで確認できる)と思ってましたが、ボーダーが現在のブラウザ幅を突っ切って表示されることはあたりまえのことなんでしょうか？ むしろ、スクロールなしでボーダー全体を確認する術は、tableタグを使わずに実現する方法はあるのでしょうか？ お願いします。

    • ベストアンサー
    • HTML
  • 6で表示がずれて困っています。２つ目です。

    6で表示がずれて困っています。２つ目です。 firefoxとIE8ではちゃんと表示されているのに、IE6ではずれてしまいます。 IE6で画像が下にずれて切れ、スクロールバーが表示されてしまいます。 原因とfirefoxとIE8と同じように表示させる方法を教えて下さいm(__)m 画像添付とソースを貼ります。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="testcss.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="main"> <div id="header"> <div id="header_line"> </div> <div id="logo"> <img src="A_22.gif" width="142" height="69" /> </div> <div id="cn"> <img src="A_33.gif" width="459" height="158" /> </div> </div> </div> </body> </html> ●css● *{ margin: 0; padding: 0; } img{ border: 0; vertical-align: bottom; } #main{ background: url(images/back_shadow.jpg) repeat-y; margin: 0 auto; width: 820px; height: 300px; } #header{ width: 800px; height: 181px; margin: 0 auto; overflow: auto; } #header_line{ background:url(images/header_1.gif) repeat-x; margin: 0 auto; width: 800px; height: 13px; } #logo{ width: 152px; height: 69px; margin: 10px 0 0 10px; float: left; display: inline; } #cn{ width: 459px; height: 158px; margin:10px 0 0 0; float: left; } 以上です。 初心者でわからない事が多いため、できるだけ詳しく教えて下さい。 宜しくお願いしますm(__)m

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する