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