カテゴリー: CSS

フッターリンクなどで縦棒で区切ってリンクとかを羅列することって、結構あると思うんです。

的な。
そんなときいちいちクラスを振ったりJSで数えたりしなくてもスマートにCSSで表現する方法のメモ。ie7以上でー。

(さらに…)

IE7でのみ起こる現象っぽいですが、
white-space: nowrap;
がwidth:autoが設定されていると効かないようです。tableの中での話ですが・・・

背景に指定するときは

[css]behavior: expression(
this.style.behavior || (
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader( sizingMethod = crop,src = ‘"+this.currentStyle.getAttribute("backgroundImage").slice(5,-2)+"’ )",
this.style.backgroundImage = "none",
this.style.behavior = "none"[/css]

imgに直接やる場合は

xhtml

[xhtml]
<div>
<a href="#">
<img src="hoge.png" alt="" width="200" height="100" />
</a></div>
[/xhtml]

css

[css]
* html div{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hoge.png);
width:200px;
height:100px;
}
* html div a img {display:none;}
[/css]

なんて書いてやる。

filterで透過PNGを表示させて、通常のPNGをdisplay:noneで消す。
面倒ですね・・・・

ってなわけで通常はIE PNG Fix 2.0 Alpha 4をワタクシは使ってます。

IE7 IE6のバグだかなんだかですが。
ちゃんとclearしてるし、IE8やfirefoxとかでは正常に表示される場合。

その要素に
min-height:100%(IE7)
height:100%(IE6)
を書いてやればちゃんとなります。

あと横並びのメニューを作るときに

[xhtml]
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
[/xhtml]

というソースがあるとすると、

[css]
li{
list-style:none;
float:left;
}

a{
display:block;
width:150px;
height:30px;
}
[/css]

とか書きます。

floatがaのプロパティに来てても普通は動作するのですが、IE6&7だと、前のメニューの右下に次のメニューが配置されます。ご注意。。。

アンカーテキスト（<a herf=”#header”>的な）を指定して、ページ内リンクをつくったとき、

そのリンク先の親ボックスにoverflow:hiddenが指定されていると

そのリンクに飛んだときに、親ボックスが上にずれます。

とりあえず、ブラウザ特有のバグというわけではないようです。。。。

clearfixをDreamweaver3とかで適用して言う場合は少し注意が必要ですね。。。。。