掲示板/スタイルシート質問板/過去ログ/一覧/ firefoxだとスタイルシートが反映されない

0 名前： am ： 2006/08/23（水） 19:07 ID:G4QB4QSn: 外部スタイルシートを使用していますが、
IEではスタイルシートが反映されるのに、firefoxでは全く反映されません。

色々調べ、修正したりしているのですが一向に反映されず、、、
一応以下は記述しているのですがfirefoxだと反映されません。

・CSSの最上部に「@charset "shift_jis";」を記述
（htmlには「<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">」と記述している為あまり意味はないのでしょうか、、、）
・htmlには「<link href="css/common.css" rel="stylesheet" type="text/css">」で外部スタイルシートを見にいくようにしています。

http://bear.nomaki.jp/index.html
http://bear.nomaki.jp/css/common.css

原因等わかる方いらっしゃったらお教えいただけると幸いです。
よろしくお願いいたします。

1 名前： sevi- ： 2006/08/23（水） 19:07 ID:PQukhZTw

CSSファイルの方だが、大部分の各属性名の手前に不正な文字列が使用されており、
それが属性名を誤認させているようだ.

取りあえず全て詰めてみると、正しく反映された.

sevi-

@charset "shift_jis";

body{
margin: 0;
padding: 0;
background-color: #000000;
font-size: 9pt
}

a:link
{
color:#333333;
text-decoration:none;
}
a:visited
{
color:#330066;
text-decoration:none;
}
a:hover 
{
color: #330066; 
}
a:active
{
color:#333333;
}

#base
{
width: 720px;
margin:0px auto 0px auto;
}

#size base
{
width: 600px;
margin:0px auto 0px auto;
}

/* ヘッダー */

#header
{
height: 62px;
}

#pick
{
height: 128px;
}

/* メニュー */

#menu
{
width: 720px;
height: 32px;
float: left;
}

#menu ul
{
margin: 0;
padding: 0;
width: 720px;
float: left;
}

#menu li{
margin: 0;
padding: 0;
float: left;
list-style: none;
}

/* TOP */

#news{
margin: 0;
padding: 10px 10px;
width: 340px;
height: 215px;
float: left;
background-color: #ffffff;
}

#fla{
margin: 0;
padding: 10px 30px;
width: 300px;
float: right;
background-image: url(../img/bg_fla.gif); 
}

/* STORE */

#store{
margin: 0;
padding: 10px 30px;
width: 660px;
height: 343px;
float: left;
background-color: #ffffff;
}

#item{
margin: 0;
padding: 10px 10px;
width: 700px;
float: left;
background-color: #ffffff;
}

#size{
margin: 0;
padding: 10px 10px;
width: 580px;
float: left;
background-color: #ffffff;
}

/* ORDER */

#order{
margin: 0;
padding: 10px 30px;
width: 660px;
float: left;
background-color: #ffffff;
}

/* ACCESS */

#access{
margin: 0;
padding: 10px 30px;
width: 211px;
height: 343px;
float: left;
background-color: #ffffff;
}

#map{
margin: 0;
padding: 10px 65px;
float: right;
background-color: #ffffff;
}

/* CONTACT */

#contact{
margin: 0;
padding: 10px 30px;
width: 660px;
height: 343px;
float: left;
background-color: #ffffff;
}

/* SITEMAP */

#sitemap{
margin: 0;
padding: 10px 30px;
width: 660px;
float: left;
background-color: #ffffff;
}

/* PRIVACY POLICY */

#privacy{
margin: 0;
padding: 10px 30px;
width: 660px;
float: left;
background-color: #ffffff;
}

/* フッター */

#footer{
clear: both;
float: none;
width: 720px;
}

/* 罫線 */

hr.line1 { 
border-style: dotted none none none; 
border-top-width: 3px; 
border-top-color: #333333; 
height: 3px; 
} 

/* 文字サイズ */

h1 { 
font-size: 10pt; 
}

.t08 { 
font-size: 0.8em; 
color: #330066;
}

2 名前： のっと ： 2006/08/23（水） 19:07 ID:943Mtr/I

おそらく、@規則による文字コードセットの宣言が一番最初でない事が原因かと思われます。

CSSを確認すると下記の様になっていました。

/* CSS Document */

@charset "shift_jis";

body{
...

これを

@charset "shift_jis";

/* CSS Document */

body{
...

のようにすれば恐らく解決されるかと。
（というか、 CSS のファイルでは指定しているのに meta 要素の方で指定しないのは……）

3 名前： am ： 2006/08/23（水） 19:07 ID:G4QB4QSn: ＞sevi-様

有難うございます！
全て空白の文字列を詰めたらfirefoxできちんと表示されるようになりました！
若干の表示崩れがありますが、追々修正をしていきたいと思います。
本当に有難うございました！

＞のっと様

有難うございます！
解決できました！