css chromeでは表示されるのですが．．．。

質問

海外テンプレートを元にして、HPを作っています。
chromeでは指定したfontの色(#dddを指定）が正しく表示されるのですが、
ie9で見てみるとfontが黒になってしまいます。
色々と調べているのですが、お手上げ状態です。
どんな原因が考えられるのか教えて欲しいです。

回答No.3

ORUKA1951 · ベストアンサー

まず、HTMLから
HTML4.01,XHTML1.0,XHTML1.1
<div class="footer">
＿<address>
＿＿〒123-4567 東京都杉並区1234-5678<br>
＿＿TEL:012-345-6789<br>
＿＿FAX:012-345-6789
＿＿<a href="/form">問合せ</a>
＿</address>
</div>

HTML5
<footer>
＿<address>
＿＿〒123-4567 東京都杉並区1234-5678<br>
＿＿TEL:012-345-6789<br>
＿＿FAX:012-345-6789<br>
＿＿<a href="/form">問合せ</a>
＿</address>
</footer>

下記はいずれもスタイルシートで指定します。
※ プレゼンテーションに関わる要素(<font>)は使いません。
※ プレゼンテーションに関わる属性は使いません。
　　align=　color=　face=
※ DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )
　　refarenceは意味が合いません。この場合はaddress要素を使うべきでしょう。
HTML4.01 7.5.6 ADDRESS要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#edef-ADDRESS )
HTML5 4.3.9 address 要素( http://www.html5.jp/tag/elements/address.html )

スタイルシートの実際
div.footer address{
color:silver;
ffont-family:sans-serif;
width:20em;
position:fixed;
right:5px;
bottom:10px;
font-size:12px;
}
div.footer address a{
color:#aaa;
text-transform:uppercase;
text-decoration:none;
text-shadow:1px 1px 1px #000;
}
div.footer address a:hover{
color:#ddd;
}

HTML5用
footer address{
color:silver;
ffont-family:sans-serif;
width:20em;
position:fixed;
right:5px;
bottom:10px;
font-size:12px;
}
footer address a{
color:#aaa;
text-transform:uppercase;
text-decoration:none;
text-shadow:1px 1px 1px #000;
}
footer address a:hover{
color:#ddd;
}

お礼

ORUKA1951様
こちらの方まで教えて頂き、恐縮です。
いつも丁寧に教えて下さり、ありがとうございます。
教えていただいたことを使って、再挑戦してみます。

回答No.2

ORUKA1951

それだけの情報では原因はわかりません。
他のブラウザだと。
例えば開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )の豊富なfirefoxだと。
　firefoxのアドオン Firebug( https://addons.mozilla.jp/firefox/details/1843 )だとスタイルの適用などがよくわかるかと・・

お礼

早速の回答、ありがとうございます。
firefoxを使ったことがないので、リンク先を少し見てみます。

回答No.1

Z2000

原因といえば、思っている箇所とは違う箇所で色を指定しているくらいですが、cssソースを見せて頂かないとアドバイスしようがありません。

お礼

回答ありがとうございます。補足しましたので、見て頂けると幸いです。

補足

早速の回答ありがとうございます。
おっしゃる通りですね。
下記にcssソースを載せてみます。

<!--
body{
background:#333 url(images/bg.jpg) repeat top left;
font-family:Arial;
}
span.reference{
position:fixed;
right:5px;
bottom:10px;
font-size:12px;
}
span.reference a{
color:#aaa;
text-transform:uppercase;
text-decoration:none;
text-shadow:1px 1px 1px #000;
margin-right:30px;
}
span.reference a:hover{
color:#ddd;
}
ul.sdt_menu{
margin-top:150px;
}
h1.title{
text-indent:-9000px;
background:transparent url(images/title.png) no-repeat top left;
width:633px;
height:90px;
}
-->

上記が聞いて頂いてるcssソースにあたることでいいんですよね？
で、反省させたい部分が以下の通りに入力しています。

<div align="right"><span class="reference">
<font color="#ddd" face=Meiryo,sans-serif style="font-size : 110%;">
〒123-4567 東京都杉並区1234-5678<br>
　　　　　　　　　　 TEL:012-345-6789<br>
　　　　　　　　　　 FAX:012-345-6789</font></span></div>

何分素人仕事なので、色々と問題があるかと思いますがよろしくお願いいたします。