March 2009 Archive

jQueryを使ったPDFアイコン付加プラグイン

Posted by poundhound on March 31, 2009

リンク先がPDFの場合など、アイコンを表示させてリンク先がPDFファイルであることを知らせる事があります。疑似クラスafterやcontentプロパティを利用したい所ですが、IE6/IE7がこれらに対応していないためにa要素の背景にアイコンを表示させています。例えばこんなCSSを書きます。

a.pdf {
	padding: 0.1em 18px 0.1em 0;
	background: url(img/icon_pdf.gif) no-repeat right center;
}

しかしこのCSSの場合、改行されるような長い文章の場合、Windows IE6/IE7で致命的なバグがあります。

左のキャプチャ画像は各ブラウザのレンダリング状態をキャプチャしたものです。

Win Firefox3およびMac Firefox3ではきちんと文末にアイコンが表示されているのに対し、Win IE6/IE7の場合アイコンがきちんと表示されていない事が分かると思います。

zoom:1プロパティを与えると一応は表示されますが、文末にアイコンが表示されずに改行されている文章の右中央に表示されてしまいます。

Win IE6/7ではインライン要素に指定した背景画像で改行が入る場合、意図したレイアウトが反映されないバグがあるのです。

先日この事でTwitterにポストしたところ、a要素の次に空spanを入れてspanに背景を指定すれば回避されると回答が来ました。例えば次のようなXHTMLとCSSを書けば良いとの事です。

<style type="text/css">
span.pdf {
	padding: 0.1em 18px 0.1em 0;
	background: url(img/icon_pdf.gif) no-repeat right center;
}
</style>
<p><a href="hoge.pdf" target="_blank">PDF</a><span> </span></p>

Categories:JavaScript　Tags:jQuery

Comment(0) | Trackback(0)

Movable Type 4.25へアップグレード

Posted by poundhound on March 28, 2009

Movable Type 4.23から4.25へアップグレードしました。

MotionやAction Streamなど興味深い機能が追加されていたので今回はアップグレードすることにしたのですが、ブログを再構築すると再構築エラーが出ました。

原因はどうやらカテゴリ名に&が悪さをしていたようです。iPod&iTunesというカテゴリがあったのですが、このカテゴリにエントリーしたブログ記事の再構築でエラーが出ていました。試しにiPod iTunesのように&を取り半角スペースにしたところエラーも出ずに再構築出来ました。

それにしてもファイル容量がだんだん増えてるのでアップロードで結構時間がかかってどんどん面倒くさくなってきますね。

Categories:Movable Type　Tags:MT

Comment(0) | Trackback(0)

jQueryを使って検索ボックスをデザイン

Posted by poundhound on March 20, 2009

jQuery（とCSS）を使って検索ボックスをデザインしてみました。

デモページはこちら

jQueryを使わず、単純にCSSを使うだけでも良かったのですがjQueryを使った理由は以下の通りです。

CSS有効で画像をオフにしたら何も表示されなかった
submitボタンの背景に画像を使用するため、valueの値を空にしないとvalueの値が見えてしまう。valueの値を空にすると、CSSをオフにした状態でsubmitボタンにテキストが何も表示されなくなる。※
※inputのtypeをimageにすれば問題無。画像をオフにしたでも実行フォームが表示される。