はみ出しタイトル画像

iTunes のバージョンアップを行ったら、いつの間にか Safari がインストールされていまして、試しに使ってみました。結構サクサク動くしいいなぁなんて思って、みんカラの自分のページを見ると、あららヘッダーの画像が変です。

では、Firefox ではどうなんだろうと、Firefox で見てみると、 Safari での表示と同じ。Firefox や Safari だと、タイトルの背景に使っている画像が右と下にはみ出てしまっています。


このまま放置するのは、一応 Webpage を作っている身として恥ずかしいことなので、さっそく修正開始。ちなみに、今まで気付かなかったのは、いつも使っている IE7 では画像がはみ出ることなくキレイに表示されているからです。Web作るならたまには別のブラウザで確認しないとダメっすね。


原因は、スタイルシートの #Header に padding とありますが、この解釈の違いにあるようです。IE のバグ？

ヘッダー画像には、775px x 220px の画像を使っているので、#Header の width は、775px、height は 220px としてあります。そして、shiGe-kara というタイトル文字の空白を作るために、padding を使用しているのですが、IE は、padding の値に影響されず、ヘッダーのサイズとして 775 x 220 を維持する一方、Firefox や Safariなどは、padding の分だけサイズを広げます。これが背景画像がはみ出してしまっている原因です。よって、まず #Header の padding を 0px にして、 padding の違いを吸収しました。これで、どのブラウザでもヘッダーのサイズは、775 x 220 に固定できるはずです。


意図どおり、IE でも Firefox でも Safari でも背景画像がはみ出ることなく、すべて同じように表示されました。しかし、padding を 0px にしたので当然ですが、どのブラウザでも shiGe-kara というタイトル文字が空白なしに左上にくっついて表示されてしまっています。これをブラウザによって解釈の違う padding は使わず、従来 IE で表示されていた通り空白をつくるために .BlogTitle に position: relative; top: 60px; left: 30px; と追加してみました。


これで、Firefox でも Safari でも、IE で表示されていたのと同じように表示されるようになりました。回避方法はいろいろあると思いますが、こんな方法でやってみました。これにて一件落着。それにしても、これはデフォルトのスタイルシートが良くないよなぁと責任転嫁してみたり。