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

2008/1/3 木曜日

cssでブラウザのスクロールバーをカスタマイズするまとめ

Filed under: IE, opera, css — admin @ 4:22:45

IEの独自拡張のcssでスクロールバーがカスタマイズできるが

途中でbody中で記述だったのが、html要素の中に記述する仕様に変ったため

すべてのIEに適用するためにはhtml,body両方に設定する。

それがまず一点目。

次に、IE独自ではあるが、Operaも対応している

ところが、Opera9あたりではDOCTYPEがStrictの場合はユーザが

カスタマイズ設定にしていない限りスクロールバーの色を変更できない。

http://www.htmq.com/style/scrollbar-shadow-color.shtml

Operaでスクロールバーの色が変わらない - 教えて!goo

No Tags

2007/12/31 月曜日

type=”hidden”なinputタグを表示・編集できるBookmarklet(主にIE・Opera用) - 集積蔵

Filed under: bookmarklet, IE, opera, firefox — admin @ 15:07:29

OperaのOuterHTMLの対応状況をぐぐっていたら発見。
Operaは普通にOuterHTMLに対応してるのね

type=”hidden”なinputタグを表示・編集できるBookmarklet(主にIE・Opera用) - 集積蔵

No Tags

IE7になってもtableのcellspacingのcss『border-spacing』プロパティに未対応

Filed under: IE7, IE, css — admin @ 4:51:44

IE7になってもtableのcellspacingのcss『border-spacing』プロパティに未対応

なので、『border-collapse:collapse』を使わずに凝ったテーブルを作ろうとするとつまずく。
対処方法は、かっこわるいがtableにcellspacing属性を設定する。これしかない!!

IE7 CSS攻略法 新規対応/未対応機能の問題を回避する

No Tags

2007/12/9 日曜日

IE でダウンロード時に保存できなくする裏ワザ的metaタグ

Filed under: IE — admin @ 15:52:32

IE限定でこんなmetaタグが….。

<meta name="DownloadOptions" content="nosave">
No Tags