CSSでインラインフレーム

はてなブックマークをインラインフレームにすれば、見た目もスッキリするし有用かなと思ってたら、こちらの記事にCSSで擬似的なインラインフレームにする方法が書いてあったので使ってみました。

CSSで overflow:auto; を記述するとインラインフレームのような表示になりますので、適当なDIV要素とクラスを作ればいいわけです。参考までに当サイトでの設定を書いておきます。ちなみに一番下の width だけ指定してるのは IE 用の指定です。

/* はてなブックマーク */
.hatenabook{
width:490px;
height:64px;
overflow:auto;
border: 1px solid #CCCCCC;
padding: 5px;
margin: 15px 0px 25px 0px;
}
* html .hatenabook{
width:520px;
}

かなり余談なのですが、当初は IE と OPERA では正常に表示され、FireFox だけどうしてもそのクラスが読み込まれていないかのような挙動になって悩みました。ためしに参考元のサイトさんの CSS を丸パクリしてペーストしてもダメ。
いみわかんねーと思って試しにそのクラスの設定を CSS ファイルの一番上に移動させたら何故か解決。いみわかんねー。FireFox でだけ読み込みできない文字でも混じってたんでしょうか。CSS で挙動がおかしいときは、順番を上に持ってきてみるのも一つの手でしょうか。