それはjQueryプラグインのthickboxを利用して、lightboxのような表示方法でテキストウィンドウを表示させた時に問題が起きた。 lightbox特有の半透明の黒い背景の上にYoutube動画がクッキリ表示されているではないか。 cssのz-indexプロパティを利用して、レイヤの順番を下げようとしたがちっとも効果がない。 まるで目立ちたがり屋さんのように、何をやっても最前面に出てくるのだ。 で、参考にしたのがこちらのサイト。 http://blogs.yahoo.co.jp/alaya_wave/62726905.html どうやらwmode=transparentという文字列を加えてあげないとだめみたいだ。
YUIのCSSフレームワークで便利なリセットCSSがあるんで、クロスブラウザ対策としてデザイン前にlayout.ctp内にかましておく。 <?php echo $html->css(‘http://yui.yahooapis.com/2.8.2r1/build/reset/reset-min.css’); ?> <?php echo $html->css(‘http://yui.yahooapis.com/2.8.2r1/build/reset-fonts-grids/reset-fonts-grids.css’); ?> <?php echo $html->css(‘http://yui.yahooapis.com/2.8.2r1/build/base/base-min.css’); ?>
今までは制作したサイトは、CSSでデザインの表示が崩れていないかどうかを確認するために、 VMwareを使って仮想Windowsに各バージョンのIEをインストールしていた。 最近マイクロソフトから「Expression Web SuperPreview」という便利なツールが無償でダウンロードできるのを知ったので、試しに使ってみた。 実際使ってみた感想としては、 ・各バージョンでの同時表示が超便利。 ・表示結果も良好だった。 ・日本語版が欲しい。 ・FirefoxやChromeも同時表示できたらいいのに。 ・インストールしているIEのバージョンによっては表示できないバージョンがあるのが痛い。 というところでしょうか。 とりあえずVMwareでの各バージョンのIEは残しつつ、 しばらくはこいつを使ってチェックしていこうと思う。
CSSでテキストを画像に置き換える際によくありがちな問題。 text-indent:-9999pxを使って表示領域外にテキストをぶっとばす方法を使うと、Firefoxなどはクリック時に画面端まで伸びた点線が表示されます。 これは見た目で困るので下記プロパティをCSSに追加することで解消できます。 a { outline:none; }
IE6で起こる症状なのだが、メニューボタン画像をロールオーバー処理で表示させると一瞬砂時計がチラチラと表示されるので、それをCSSで解消する方法。 html { filter: expression(document.execCommand( “BackgroundImageCache”, false, true)); }
