2008/12/23 火曜日

AlphaImageLoaderでクリックや入力が利かなくなる件

Filed under: IE, css — admin @ 16:11:10

IE6以下でcssで透過PNGを使用する際にAlphaImageLoaderを使用するがAlphaImageLoaderは背景というよりも最前面にイメージをロードする仕様なのでリンクの上や入力フォームの上のレイヤーに置かれてしまい、formのinputタグやaタグを使うと不具合が生じる。対処方法は、aタグやinputタグの外側にspanタグなどで囲みそこでbackground及び、AlphaImageLoaderを設定する。その後中のAタグやINPUTタグの部分で position:alternativeを指定し、強制的にAlphaImageLoaderの上に表示させるようにする。

/* search form */
#searchform {
        position: absolute;
        top: 0px;
        right: 0px;
        background: url(/_img/searchform-bg.png) no-repeat right bottom;
        _background:none;
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/_img/searchform-bg.png);
        height: 60px;
        width: 259px;
}
#searchform #s{
        position: relative;        background: #ffffff url(/_img/form-field-bg.gif) no-repeat ;
        height: 17px;
        width: 148px;
        margin: 6px 5px 0px 35px;
        padding: 3px 7px 2px 5px;
        color: #999999;
        border: none;
}
#searchform #searchsubmit {
        background: url(/_img/search-btn.png) no-repeat left top;
        _background:none;
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/_img/search-btn.png);
        height: 24px;
        width: 24px;
        border: none;
        text-indent: -999%;
        line-height: 1px;
        margin-top: 6px;
}

このサイトの検索窓がそんな感じになってました。

No Tags

続・透過PNG問題

Filed under: css — admin @ 16:10:58

IE7からAlphaImageLoaderでなくても透過PNGができるようになったので、*(アスタリスク)ハックで下のように書いてIE7でもAlphaImageLoaderを使うのは辞めましょう。AlphaImageLoaderは前のエントリーの通り色々問題があるので使わないのが吉です。

        background: url(/_img/search-btn.png) no-repeat left top;
        _background:none;
        *background:none;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/_img/search-btn.png);


IE7では_(アンダースコア)ハックが効かないのを利用して、filterの方を止めます。

        background: url(/_img/search-btn.png) no-repeat left top;
        _background:none;
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/_img/search-btn.png);
No Tags

2008/5/29 木曜日

[CSS]画像をクリップや額縁でデコレーションするスタイルシート | コリス

Filed under: デザイン, css — admin @ 22:33:21

[CSS]画像をクリップや額縁でデコレーションするスタイルシート | コリス

No Tags

2008/5/22 木曜日

CSSで背景画像をリサイズするテクニック:phpspot開発日誌

Filed under: css — admin @ 23:48:08

CSSで背景画像をリサイズするテクニック:phpspot開発日誌

No Tags

2008/5/21 水曜日

透過をきれいに使ったウェブデザインいろいろ - DesignWalker

Filed under: デザイン, css — admin @ 21:48:47

透過をきれいに使ったウェブデザインいろいろ - DesignWalker

No Tags

2008/5/17 土曜日

UIパターンいろいろ - DesignWalker

Filed under: robots, デザイン, css — admin @ 20:59:33

UIパターンいろいろ - DesignWalker

No Tags

2008/5/14 水曜日

CSSを使ってファンシーなボタンを作成するテクニック:phpspot開発日誌

Filed under: css — admin @ 20:25:13

CSSを使ってファンシーなボタンを作成するテクニック:phpspot開発日誌

No Tags

CSS - dtをfloatする場合の注意点 | Try | d-spica

Filed under: css — admin @ 20:11:29

CSS - dtをfloatする場合の注意点 | Try | d-spica

No Tags

2008/5/11 日曜日

CSSであまり使われていないが使った方がいいフォント8選『8 fonts you probably don’t use in css, but should』 | CREAMU

Filed under: font, デザイン, css — admin @ 1:56:14

CSSであまり使われていないが使った方がいいフォント8選『8 fonts you probably don’t use in css, but should』 | CREAMU

No Tags

2008/5/3 土曜日

[CSS]アイデア満載のスタイルシートのテクニック30選 | コリス

Filed under: css — admin @ 22:20:04

[CSS]アイデア満載のスタイルシートのテクニック30選 | コリス

No Tags
次のページ »