• 締切済み
  • 困ってます

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

共感・応援の気持ちを伝えよう!

  • 回答数1
  • 閲覧数240
  • ありがとう数2

みんなの回答

  • 回答No.1

Firefox 2.0.0.14 でためしにコピペして確認してみましたが2箇所、body と #header の閉じ括弧 } が全角文字 } になっていますね。 それを直したらとりあえずそれっぽく動いたので試してみてください。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

原因はそれでした。 こんなところでずっと悩んでたかと思うと恥ずかしいです。。。 ご回答ありがとうござました。 それでは失礼します。

関連する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" "&#8203;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">&#8203; <html xmlns="&#8203;http://www.w3.org/1999/xhtml"&#8203; 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
  • IEとFirefoxの表示の違い

    テーブルを使わずCSSで枠を作り、中に画像を入れてその右側に文章を表示させたいのですが、ブラウザによって表示が異なり困っています。 外部スタイルシートに以下を記載して、 body {width:600px;} .img{float:left;} div.box { border: 1px solid #000 ; padding:10px; margin:10px; } 以下のHTMLをブラウザで表示すると、枠が重なって表示されます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> <title>test</title> </head> <body> <div class="box"> <h4>title</h4> <div class="img"> <img src="img1.gif" width="200" height="400" alt="img" /></div> text text text text text text<br /> </div> <div class="box"> <h4>title</h4> <div class="img"><img src="img1.gif" width="200" height="400" alt="img" /></div> text text text text text text<br /> </div> </body> </html> そこで、 スタイルシートのdiv.boxに height:100% ; を追加すると、IEでは画像の高さまで枠が広がりますが、Firefoxでは重なったままで変化しません。 画像の高さをpxで指定してやれば両方表示できますが、高さの設定を特にしないでIEとFirefoxで同じように表示する方法がありましたら教えてください。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • XHTML+CSS IE5.5で見ると崩れる

    皆様こんにちは、XHTML+CSSで初歩を勉強してる者ですがどうして判らない事があるので教えていただければ助かります。 判らないことは XHMLのソースに <!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> <link href="oooo.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="a"> <div id="b"> id "b" </div> <div id="c"> id "c"</div> <div id="d"> id "d"</div> <div id="e"> id "e"</div> </div> </body> </html> と記入しております CSSのソースは @charset "utf-8"; body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; margin: 0px; padding: 0px; } #a { background-color: #999999; width: 400px; border: 1px solid #66FF00; } #a #b { background-color: #006699; width: 400px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #996600; } #a #c { background-color: #00CC99; margin: 5px; float: left; width: 100px; display: inline; } #a #d { background-color: #99FF66; width: 285px; float: left; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; display: inline; } #a #e { clear: both; background-color: #0000FF; height: 20px; } と記入しております。 IE8,7,6では自分の描いたイメージどうり表示されるものの、 IE5.5では崩れてしまいます。 作成ソフトはAdobe Dreamweaver CS3で作成しております。 ブラウザーの互換性チェックしても何も問題は無いのですがどうしてでしよう?わかる方おしていただけると助かります。

    • ベストアンサー
    • CSS
  • CSSの外部参照について。

    XHTMLの内部にCSSを記述すると認識されますが、CSSを外部参照で指定すると、認識されずここでいうindex.htmlに記述した構文しか表示されません。 初心者です。 いくらXHTML,CSSの本や検索をしても中々理解がはかどらず、思うようにいきません。初歩的な間違いだと思いますが、どうぞよろしくお願い致します。m(_ _)m index.html,works.htmlとCSSの記述場所を外部参照にし、HPをつくろうとしています。 XHTMLファイルはindex.html,works.htmlで (biography.htmlやaccess.htmlは後でつくります。)、 CSSはcssというファイルに、中にはstyle.cssがあります。画像はimgのフォルダにあります。 この回答にある4つの方法も参考にしてみたのですが、外部参照CSSは認識されませんでした。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1120846271 (次にCSSが置いてあるディレクトリ内に新規フォルダを作りその中にHTMLがある場合 <link href="../○○.css" rel="stylesheet" type="text/css">とあったので、今はこう記述しています。<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />) *XHTMLソース <?xml version="1.0" encoding"utf=8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1"/DTD/xhtml1-strict.dtd"> <html xmlns=http://www.w3.org./1999/xhtml" xml:lang="ja" lang="ja"> <?xml version="1.0" encoding"utf=8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//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 profile=""> <title>***</title> <meta http-equiv="content-language" content="ja" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <link rel="stylesheet" type="text/css" href="css/style.css" media="all" /> </head> <div id="wrapper"> <div id="header"> <h1>***</h1> </div> <div id="main"> <ul> <li class="biography"><a href="#">&gt;&gt; Biography</a></li> <li class="works"><a href="works.html#works">&gt;&gt; Works</a></li> <li class="access"><a href="#">&gt;&gt; Access</a></li> </ul> </div><div id="footer"> <ul> <li><a href="#">sitemap</a></li> </ul> </div> </div> *CSS body,div,ul,ol,li,h1,p{margin:0; padding:0;} body{ text-align:center; min-width:780px; background:#f5f5f1; coler:#666666; fontfamily:Tahoma,"Lucida Geande", Arial,sans-serif; font-size;62.5%;                 } h1{display:none;}h1 #wrapper{width:740px; margin:0 auto; text-align:left;} #main a {height:100px; color:#ffffff; font-size:1.8em; text-tramsform: uppercase; text-decoration: none; display: block;} #main a:hover,a:active{color: #cccccc;} #main ul{list-style:none;} #main ul li{padding:5px 0px 5px 0px;} #header{height:115px; margin:15% 0 0 0; background:url(.img/image/blue.gif) no-repeat left center;} .biography{background:url("blue.gif") no-repeat left center;} .works{background-image:url(./img/works.gif) no-repeat left center;} .access{background-image:url(./img/access.gif) no-repeat left center;} #footer ul li {padding:10px; display:inline;} #footer ul {text-align:right;} #footer p {text-align:center;} どうぞよろしくお願い致します。

  • iPhoneのSafariで自動的に縮小表示されないCSSで悩んでいま

    iPhoneのSafariで自動的に縮小表示されないCSSで悩んでいます。 iPhoneやiPodTouchのSafariは、ウェブサイトを表示する際にデフォルトで縮小表示を行いますが、以下のCSSのページの場合、これがなぜだか縮小されないのです。アクセスした状態でページの左隅しか表示されていないような感じなので、縮小して全体像をみようと画面操作してもビヨンと戻ってしまいできません。自動的に縮小表示されないというのは感覚的には無理矢理拡大されているような感じをうけます。 bodyのwidthを設定し、左右marginをautoにしてセンタリングというのはこれまでにも多くでやっており、iPhoneやiPodTouchのSafariにおいても表示に問題がないことは確認できていたのですが、なぜだか同様のCSSを設定してあるにもかかわらずいくつかのサイトで縮小表示されません。(viewportのwidthをpxやdevice-widthで設定、左右margin:autoの有無、CSSの内外は影響ありませんでした)CSSを削っていくと縮小表示されないのはbodyのwidthのCSSに行き当たるのですが、きちんと縮小表示がされるサイトも同様に記述されています。 こういった状況に心当たりのある方がいらっしゃいましたらアドバイスいただければありがたいです。 検証機種:iPodTouch(第二世代)/OS4.0(OS3.0の時も同じ症状を見たような・・・) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//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> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> <!-- body{ /*margin-right: auto; margin-left: auto; width: 800px;*/ } --> </style> </head> <body> </body> </html>

    • ベストアンサー
    • CSS
  • IEとFirefoxでの背景表示の違いについて (CSS)

    いつもお世話になっています。 CSSで枠(text_area)を作り、その背景の中央に画像表示させたいと考えています。IEでは中央に表示されるのですが、Firefoxだとtext_areaではなく画面全体の中央に配置してしまい、text_areaには一部欠けた画像が表示されます。 #text_areaに指定した内容を.contentsに書き写しても同じ状態です。 改善策をアドバイスして頂けないでしょうか? よろしくお願いいたします。 【html】 <body> <div class="contents"> <div id="text_area">あああああ・・・</div> </div> </body> 【css】 .contents{ width:760px; height:540px; margin:0px; margin-right:auto; margin-left:auto; padding:0px; border:0px; } #text_area { overflow:auto; width:600px; height:395px; margin-top:30px; margin-left:auto; margin-right:auto; background-image: url(haikei.gif);/* サイズ:456×392PX */ background-repeat: no-repeat; background-position:center; background-attachment:fixed; }

    • ベストアンサー
    • CSS
  • 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| となるはずなのに、 IE6では左25pxと右10pxのマージンが大きく(倍くらいになってます)、左右のメインが重なってしまいます。 Firefoxではちゃんと表示されます。 どこか記述がおかしいのでしょうか。 マージン設定はしないほうがいいのでしょうか。 どうすればIEでもちゃんと表示されるようになるでしょうか。 いろいろいじりましたが分からないので、お教えいただければありがたいです。よろしくお願いします。

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

    いつもすみません。 下記のラインをimg(gif)で格好のいい縦ラインにしたいんですが、どのようにしたらいいでしょうか? よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "&#8203;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">&#8203; <html xmlns="&#8203;http://www.w3.org/1999/xhtml">&#8203; <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
  • IE5*でもCSSで画像を横に並べる方法を・・・

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <?xml version="1.0" encoding="Shift_JIS" ?> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head><style type="text/css"> <!-- .box_a{ } .box_b{ } .box_c{ float:left; width:80px; background-color:#c8ffdb; } .box_d{ float:left; width:10px; background-color:#c8ffdb; } --> </style> </head> <body> <div class="box_b"><a href=""><img src="" class="box_c" /><img src="" class="box_d" /></a></div> <div class="box_b"><a href=""><img src="" class="box_c" /><img src="" class="box_d" /></a></div> <div class="box_b"><a href=""><img src="" class="box_c" /><img src="" class="box_d" /></a></div> </body> </html> 上記のコードをブラウザで見るとIE6では隙間なく並んでいるのですが、IE5.01,IE5.5で見ると画像の間に隙間が空いてしまっています。 IE5*でもCSSで画像を横に並べる方法をご存じの方、教えてください。 お願いします (_ _)人。

  • 外部CSSと HEAD内のCSSの違い

    現在、macで Dreamweaver8を使用してHPを作っています。 外部のcssがうまく反映されません。 そこで、head内に同じcssを入れたところ、きちんと反映されました。 どうして違いがでるのか教えてください。 『head内に入れた時』 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css"> body { font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; font-weight: normal; background-position: center; padding: 0px; margin: 0px; } #page { background-color: #009900; height: 800px; width: 760px; margin-right: auto; margin-left: auto; position: relative; top: 0px; } #title { background-color: #CCFF00; height: 120px; width: 700px; position: relative; left: 0px; top: 0px; margin-right: 15px; margin-left: 15px; padding-right: 15px; padding-left: 15px; } </style> </head> <body> <div id="page"> <div id="title"> </div> </div> </body> </html> 『外部cssの時』 [styel.cssは] body { font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; font-weight: normal; background-position: center; padding: 0px; margin: 0px; } #page { background-color: #009900; height: 800px; width: 760px; margin-right: auto; margin-left: auto; position: relative; top: 0px; } #title { background-color: #CCFF00; height: 120px; width: 700px; position: relative; left: 0px; top: 0px; margin-right: 15px; margin-left: 15px; padding-right: 15px; padding-left: 15px; } [反映されるhtmlは] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="page"> <div id="title"> </div> </div> </body> </html> です。 誰かお答えくださいませ。

    • ベストアンサー
    • Mac