リンク先が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>
Read More
Movable Type 4.23から4.25へアップグレードしました。
MotionやAction Streamなど興味深い機能が追加されていたので今回はアップグレードすることにしたのですが、ブログを再構築すると再構築エラーが出ました。
原因はどうやらカテゴリ名に&が悪さをしていたようです。iPod&iTunesというカテゴリがあったのですが、このカテゴリにエントリーしたブログ記事の再構築でエラーが出ていました。試しにiPod iTunesのように&を取り半角スペースにしたところエラーも出ずに再構築出来ました。
それにしてもファイル容量がだんだん増えてるのでアップロードで結構時間がかかってどんどん面倒くさくなってきますね。
jQuery（とCSS）を使って検索ボックスをデザインしてみました。
View Demo
jQueryを使わず、単純にCSSを使うだけでも良かったのですがjQueryを使った理由は以下の通りです。
- CSS有効で画像をオフにしたら何も表示されなかった
- submitボタンの背景に画像を使用するため、valueの値を空にしないとvalueの値が見えてしまう。valueの値を空にすると、CSSをオフにした状態でsubmitボタンにテキストが何も表示されなくなる。※
※inputのtypeをimageにすれば問題無。画像をオフにしたでも実行フォームが表示される。
<input type="submit">のvalue属性に"search"を入れた場合、searchの文字が見えてしまう。
value属性の値を空にするとCSSオフの状態でsubmitボタンの文字が表示されなかった。
CSS有効で画像オフの場合何も表示されなかった。
jQueryで無くても良いのかもしれませんが、なんせ普通のJavaScriptが書けないもので。
jQuery部分のコードは次の通りです。
Read More
すぐ忘れるので覚え書き
- メインテンプレート main_index
- ブログ記事とウェブページ feedback_template
- ブログ記事リスト archive_listing
- アーカイブインデックス archive_index
- 検索結果 search_results
- コメントプレビュー comment_preview_template
- コメント完了 comment_response_template
もっと詳しくはMovableType.jpのアーカイブテンプレートに設定される予約変数
もともとマカーなのであまりWindowsのGUIが好きではありません。特にXPのあの青いタスクバーと緑のスタートボタンがどうにも受け付けません。なのでWindowsはVisual Styleを利用出来るようにする「UXTender」と言うものを入れています。
このUX Tender、結構色々なスキンがあって楽しく、Royal Vista Compactと言う物を使っていますが、このスキンの背景は薄いグレーになっています。このスキンを適用してWebを見てると背景が白であるはずのサイトが薄いグレーになっている場合があります。
background-colorに#fffを指定している場合はきちんと白で表示されるのですが、指定されていないものは薄いグレーで表示されます。
NN4.xが背景グレーでしたが、現在のブラウザの背景色の初期値が白であるためbackground-colorを指定しなければ白で表示されると言うのが常識になってしまっているので改めてbackground-colorを指定する必要がある認識を持った方が良いかもしれませんね。
まあごく稀なケースだとは思いますが。
