Moral Hazard!!

ドラマーが音楽やホームページやガラクタを作るよ。

fancyboxがIEで表示されない

5 Comments html,css,php

画像をシンプルに拡大表示してくれるスクリプト、fancybox
MITライセンス(スクリプト内の著作権表示を消さなければ商用サイトにも使える)で重宝するのだが、導入時にIEで表示されずに少し詰まったのでメモ。

導入はこちらのサイトを参考に。

jquery.fancybox.cssを開くと、後半のIE用の画像を指定する部分がずれている。
僕はサイトルートから/js/fancybox/の中にファイルを入れていたので、

fancybox/fancy_loading.png以下IE用の画像指定を全部
js/fancybox/fancy_loading.pngに変更する事で解決した。

a要素やobject要素の点線を消す

No Comment html,css,php

■Firefoxでa要素やobject要素をクリックすると表示される点線を消す方法。

Firefoxなどでリンクボタンなどをクリックした時に出る、あのうっとおしい点線が精神衛生上良くないという貴方に。

a:link,a:visited,a:hover,a:active {
outline: none;
}

※a要素はこのlink→visited→hover→activeの順番でないと正確に動作しない。

スクロールバーを常時表示してデザイン崩れを防ぐ

No Comment html,css,php

■Firefoxなどでスクロールバーを常時表示して、デザインを崩さない方法

html {
margin-bottom:1px;
height:100%;
}

※overflow-y:scrollはcss2では策定されていないため、OperaやNNでは表示されない。
(CSS検証サービスなんかでエラーが出て気分が悪い)

ソース:http://neo.s21.xrea.com/web/006.html

ポップアップウインドウがIEで表示されない

No Comment html,css,php

とあるサイトでポップアップウインドウが突然効かなくなった!たっけて!と言われて、当該サイトをチェック。

元のhtml。

<a href="#" onclick="MM_openBrWindow('example.html','ポップアップしたいHPのアドレス','scrollbars=yes,resizable=yes,width=800,height=600')">

最初Firefoxで確認したところ、特に不具合は無い。
でもIEでチェックすると「引数が無効です。」と表示される。

なんでだろ?と調べて見たところ、

「IEではサイトの詐称を防ぐ意味か何かで、第二引数で使用できる文字を制限している(という噂)
らしい。
簡単に言うと、ポップアップしたいページのタイトルは簡単なものにしろってことでしょうか?

問題のページでは、ポップアップページに
「シェフの気まぐれハンバーグ定食~きのこの恵み~」
みたいなひらがな漢字記号てんこ盛りのタイトルになっていたので、これを

<a href="javascript:void(0);" onclick="window.open('example.html','<span style="color: #ff6600;">popup</span>','scrollbars=yes,resizable=yes,width=800,height=600');return false;">

シンプルなもの(上の例ではpopupというタイトル)に変更することで、トラブルは解消された。
もちろんポップアップするページのタイトルも同じものに変更しないと駄目。

ちなみにこの動作をさせるだけなら、特にタイトル指定をせずにnullを指定

<span style="font-size: x-small;">(null=空)</span>
<a href="javascript:void(0);" onclick="window.open('example.html','<span style="color: #ff6600;">null</span>','scrollbars=yes,resizable=yes,width=800,height=600');return false;>

するだけですむ。

コメント削除したらIE6でFlashが表示されない

No Comment html,css,php

サイト製作中に突然IE6でFlashが表示されなくなった。
解決してしまえばIE条件分岐用のコメントを削除してしまっていたという事なのだが。

Dreamweaver CS4ではFlash挿入時にサイトルートに自動的にScriptsフォルダが作られ、
swfobject_modified.js
expressInstall.swf
の二つのファイルが入れられる。
これはまぁインターネットエクスプローラーで起きるFlashの不具合を解消するために自動挿入されるものである。
(不具合・・・ある日突然ホームページを訪問したら全部のFlashコンテンツがクリックしないと動作しなくなった「マイクロソフトのWebブラウザ特許侵害回避用セキュリティパッチ問題」を回避するため)

そこまでは良いのだが、その挿入されたコードがコメントだらけの非常に不細工なものであり、ちょっとでも見やすくするためにソースコードを見ながら以下のようなコメントを削除していた。

<!-- このパラメータタグにより、Flash Player 6.0 または 6.5 以降を使用して、Flash Player の最新バージョンをダウンロードするようメッセージが表示されます。ユーザにメッセージを表示させないようにする場合はパラメータタグを削除します。 -->
<!-- ブラウザには、Flash Player 6.0 以前のバージョンを使用して次の代替コンテンツが表示されます。 -->

と同時にインターネットエクスプローラーで閲覧した時に動作する「必要な」コメントまで削除してしまっていた。

<!--&#91;if !IE&#93;>-->
<!--&#91;endif&#93;-->

このコメントにはさまれている部分は
「もし(if)インターネットエクスプローラー(IE)なら~~~」
で適用される部分だ。

なんとなく
「コメントって言うんだから全部ただのメモでしょ?消しちゃ駄目なの?」
なんて考える僕のよう素人が引っかかりそうな部分なので、一応ここに記しておく。