ネットスケープ（Netscape）だけ背景が表示されない

CSS の覚え書き。

お仕事中、background プロパティで指定した背景色と背景画像が、ネットスケープ（Netscape）だけ表示されない状況に遭遇。

他のブラウザでは何も問題なく表示されているのに、ネスケだけ background プロパティの指定が適用されていない。

今回の解決策は

background : url(image/hoge.gif) 10px center no-repeat #eee;

上の赤いソース部分 center を

background : url(image/hoge.gif) 10px 5px no-repeat #eee;

上のように、実数値の指定（5px）に修正すると、ネットスケープでも背景色と背景画像が無事表示される♪

●結論
ネットスケープだけに無視されている時はプロパティの値を統一すると吉かも。

dt と dd を横に並べる CSS

今日は定義リスト（dl タグ）内の dt と dd タグを CSS で横に並べる方法です。

いつも dt と dd を CSS で並べようとした時に『さてさて・・・はて？』となり、CSS の専門書から同じページを開いているような気がしたのでメモ。

IE6 で float させると親要素の border が消える CSS バグ

Windows の IE6 に CSS で float を指定した際、その float 指定した要素の親要素に指定された左右の border が消えるバグがあるようです。

私が上記のバグに気が付いたのは ul 要素内の li 要素を並列させる為に、li 要素に float:left; と指定しボタンを作成した時に気が付きました。
以下、その時のサンプルソースです。（※ボタンは３つを並列させているとお考えください。）

ul {
	width : 99%;/* IE6 の為に指定 */
	text-align : center;
	list-style-position : inside;
	border-left : solid 1px #ccc;
	overflow : auto;
}

ul li {
	float : left;
	width : 33%;
	height : 30px;
	line-height : 30px;
	list-style-type : none;
	border-top : solid 1px #ccc;
	border-bottom : solid 1px #ccc;
	border-right : solid 1px #ccc;
}

上のソースの赤い部分のように、親要素に width を指定すると border が表示されます。

ちなみに IE7 では親要素に width を指定しなくても border は表示されていました。

●結論
IE6 の親は子供が浮かれると甘くなりがち。

透過 PNG を IE6 で背景としても使える JavaScript

先日の記事「透過 PNG を IE6 でも奇麗に表示するクリスマス☆」では AlphaImageLoader と言う Filter（フィルター）を使い、透過 PNG を IE6 でも奇麗に表示させていました。

しかし、私は少し勘違いをしていたのですが、先日の方法だと透過 PNG を背景（ background ）に指定できないのです。

「じゃあ、どうすんの？」

はい。その答えは JavaScript が握っていました。

「えぇ〜？でも、なるべくなら CSS で解決したい問題なんだけど。」

そうですね。私も同意見ですが、おそらく今回ご紹介する解決策が現在（2007年の暮れ）主流のようです。

それでは、一人芝居を気持ち悪がられる前に、そろそろ「透過 PNG を IE6 で背景としても使える JavaScript」をメモしておきます。

タグクラウドの行間が狭い人

ここ数日私が何をしていたかと言うと、ブログの過去の記事へのタグ付けです。

記事も少しずつですが増えてきているので、ここは１発、今、密かに流行（はやり）始めているタグクラウドに手を出そうという目論みです。

おそらく
『何を今更・・・』と呆れた方が３０％。
『残念な管理人だな・・・』と同情してくれた方が１０％。
『あれ？コレいつの記事だ？』と日付を確認された方が２０％。
無関心が４０％。

でも待ってください。あなたのタグクラウドの行間はギッチリ詰まっていませんか？ 「おう！ギッチギッチに詰まってるのがタグクラウドってもんだ！」なんて方いませんか？

それはそれで我武者らな感じで素敵だとは思いますが、Jazz が似合う私のような大人は知っています。行間が詰まらない方法を。