CSSの@importから一部のスタイルが読み込めない・・・。

解決済

質問者：tomohiro2006
質問日時：2006/11/14 21:52
回答数：2件

CSS外部ファイルから、一部のスタイルだけが適応されず困っています。
以下のスタイルをテーブルに適応させたいのです。

【スタイル(index.css)】
table.test{
background-color: #ffcc66;
}
table.test td{
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #000000;
}

【以下のタグに適応】
<table cellspacing="0" cellpadding="0" class="test">
<tr>
<td>AAA</td>
</tr>
<tr>
<td>BBB</td>
</tr>
<tr>
<td>CCC</td>
</tr>
</table>

【スタイル入力先】index.css
【読み込み方式】<link>によるbase.cssからの@import
<link rel="stylesheet" type="text/css" href="css/base.css">
更に、base.cssから@importでindex.cssを読み込んでいる環境です。
【OS】windowsXP
【ブラウザ】IE6

********************

適応されるとテーブルの背景がオレンジ色になり、
テーブルの「AAA」「BBB」「CCC」に点線のアンダーラインが表示されます。
しかし、テーブルの背景はオレンジになるのですが、table.test td{}のスタイルだけ適応されません…。
他のindex.css内にあるタグは正常に読み込まれ適応されています。
（※ちなみに拡張子はPHPです。HTMLではありません）
色々試すと以下の事が判明しました。

□直接タグにスタイルを入力すると全て適応される
□<head></head>内にスタイルを入力し、Class指定しても全て適応される
□試しに、base.cssに入力するとスタイルが正常に全て適応される
■しかし、index.cssにスタイル入力するとtable.test td{}のみ適応されない

なぜ外部CSSファイル(@importからのCSSファイル)から適応されないのでしょうか？
PHPなのが原因だったりもするのでしょうか…。
ご助力お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.2

回答者： steel_gray
回答日時：2006/11/15 08:56

table.box と table.test の関係がわからないのでなんとも…

質問のサンプルコードにあわせてtable.testとしましたが実際はtable.boxだったという事でしょうか？

table.test td{ ← 実際はtable.box？？
border-bottom-width: 1px !important;
border-bottom-style: dashed !important;
border-bottom-color: #000000 !important;
}

この回答への補足

言葉が足りず申し訳ないです。

table.box(base.css内)とtable.test(index.css内)は
まったく違うテーブルに対してのスタイルになります。

table.test td{
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #000000;
}
↑のタグが適応されない原因がbase.cssにある

table.box td {
border-width: 0px;
}

↑のborder-width:0px;で表示されなかったようです。
border-width: 0px; を削除するとtable.index td{}のスタイルが適応されます。

やはり優先順位等の問題なのでしょうか？
ちなみに「!important;」をtable.index td{}につけても優先されません…。

補足日時：2006/11/15 16:20

通報する

- 0
- 件

通報する

この回答へのお礼

記載ミスです。

× table.index td {}
○ table.test td {}

通報する

お礼日時：2006/11/15 16:52

No.1ベストアンサー

回答者： steel_gray
回答日時：2006/11/14 23:14

phpが原因という事はないかと思います。

index.css以外の場所にtdに対するborderの指定があったりすると「詳細度」の関係でindex.cssでの指定が上書きされる可能性があります。

原因を特定せずに試すのも問題ありそうですが
index.cssの記述を次のように書き換えて試してみるのもいいかもしれません。
table.test td{
border-bottom-width: 1px !important;
border-bottom-style: dashed !important;
border-bottom-color: #000000 !important;
}

http://anslasax.net/css-make/cascade.html

この回答への補足

ご回答ありがとうございます。

index.cssはbase.cssから@importしています。
base.cssをチェックしたところ「table.box td{border-width: 0px;}」がありました。
これを削除したところ、なんと適応されました＾＾；

最後に質問ですが、base.cssのtable.box td{border-width: 0px;}を消さずに
「!important;」をindex.cssのtable.test td{}に追加しましたが優先されません。
なぜでしょうか・・・。

補足日時：2006/11/15 01:57

通報する