ブラウザとCSS

このところ困っています。特定のブラウザだけ，CSS（スタイルシート）で設定した通りに表示してくれないという問題です。

問題の場所は，サイドバーのRecent Commnets。くきさんのPiyoFeedsのおかげで，最近のコメントを表示させてもらっています。

ナビゲーション・エディタの内容は次のとおりです。

<script src="http://www.piyosystems.com/cgi-bin/WebObjects/PiyoFeedsNB.woa/wa/piyoFeeds?userId=jsgarage&amp;feedId=comments" type="text/javascript" language="javascript"></script>

このスクリプトで出力されるテキストには，次のようなclassが設定されています。（CSS Debugで表示したものです。）

これらのclassを定義するCSSは次のように設定されています。

.piyofeeds {
margin-bottom:4px;
  padding:4px;
background:#FFF;
}

.piyofeeds .items .item {
font-family: "Hiragino Kaku Gothic Pro", Osaka, verdana, arial, sans-serif;
font-size: small;
}

.piyofeeds .title {
font-family: "Hiragino Kaku Gothic Pro", Osaka, verdana, arial, sans-serif;
font-size: small;
line-height:150%;
}

.piyofeeds .description {
font-family: "Hiragino Kaku Gothic Pro", Osaka, verdana, arial, sans-serif;
color:#555555;
background:#FFFFFF;
font-size: x-small;
line-height:140%;
}

さて，これを４種類のブラウザで表示させるとどうなるでしょうか。

↑Safari問題無し。

↑FireFox問題無し。

↑Opera問題無し

↑MacIE...なんじゃこりゃ？

なぜか，MacIEでだけ，コメントの本文(Description)が青地に白字で表示されてしまいます。しかもItem Titleのフォントサイズをsmallに設定しているはずなのに，妙にデカイ！
ここに画像は載せていませんが，WindowsIEも同じような表示になっていました。

とりあえず，PiyoFeedsの出力をCSS付きではなく，Setting画面で指定したフォントサイズのまま出力すると，白地に黒字で表示されることは分かりました。でもせっかく作ってもらったclass付き出力を使わないのはあまりに勿体ない。

というわけで困っています。

【追記】
速攻でお二人にコメントいただき，速攻で解決いたしました。ありがとうございます。

↑MacIE問題なし！

※元のブログについたコメントを掲載させていただきます。

これは、

.piyofeeds .title　→　.piyofeeds .items .item .title
.piyofeeds .description 　→　.piyofeeds .items .item .description

としたらどうでしょう？

.title と .description にマッチしてしまっているのかと。
くき | Homepage | 02.15.05 - 10:36 pm | #

.piyofeeds .description のところの background:#FFFFFF; を background-color:#FFFFFF; に変えてみたらどうなりますか?
OKAMURA | Homepage | 02.15.05 - 10:41 pm | #

くきさんのアドバイスで解決しました。ありがとうございます。私がPiyoFeedsから出力されるテキストの構造をよく理解していなかったのが原因だと思います。
まだまだ勉強しないとだめだなあ。

OKAMURA さん，ありがとうございます。background-colorはエントリーを上げる前に一度試しましたが，結果は同じでした。
J's Garage | Homepage | 02.15.05 - 11:01 pm | #

うーん、細かく指定できるからとクラスをいっぱい作ったのですが、その弊害ですかね。

クラス名を範囲指定ではなくて直接指す（例えば item のタイトルを rss_item_title とかにしちゃう）こともできるのですが、そうした方がいいのかもしれませんね。
＃先頭にpiyofeedsとか入れてユニーク性は確保する必要はありますが。
くき | Homepage | 02.15.05 - 11:17 pm | #

どうなんでしょう。全部オリジナルな名前にしようとすると，やたらと長いclass名になりがちですよね。BLOGPEOPLEのclass名は結構長いです。blogpeople-powered-byとか，blogpeople-tbp-creditとか。PiyoFeeds方式だと，class名を短くできるという利点はありますよね。
J's Garage | Homepage | 02.15.05 - 11:33 pm | #

この辺はいろいろな人の意見を聞きたいのですが、こちらでやるものではないですね。
PiyoFeeds blog でエントリたてました。
こちらにご意見いただけるとうれしいです。＞皆様
くき | Homepage | 02.16.05 - 12:57 am | #

本日付けのNB版の更新でclass属性の値を変更してしまいました。詳しくはこちらのエントリを参照ください。
くき | Homepage | 02.20.05 - 12:55 am | #

お世話様です。さっそくスタイルシートを修正しました。
J's Garage | Homepage | 02.20.05 - 1:37 pm | #