トップページへ

2008.05.07

前回、この_ysk blogのサイトデザインをリニューアルしたのが、3月25日のこと。それから2ヵ月も経たずに、またデザインリニューアルしてしまいましたw。その訳はというと・・。
・デザインやCSSをもう少し極めたいなと。
・シックな大人っぽいデザインにしてみたかった!
・それに、GWで時間があったしw

そのリニューアルの過程で、1点、かなり「あーでもない」「こーでもない」と悩んだ点があったので、メモしておきます。
それは、エントリタイトルの左にある「四角いアイコン」とその右の「タイトル文字」の縦位置が、どうしてもWindows系のブラウザとMacintosh系のブラウザとでずれてしまうということです。具体的には、MacのSafariとFirefoxで「アイコン」と「文字」の位置を合わせると、WinのIEとFirefoxで見たときに、「文字」の方がかなり上にずれてしまうのです。

「四角いアイコン」と「タイトル文字」そこで、タイトル要素にボーダーラインを入れて確認してみたところ、Winではエントリタイトル全体を囲うdivの上ラインに隙間なく「文字」がくっついているのに対し、Macではdivの上ラインと「文字」との間に2〜3pxの隙間が空いているのがわかりました。そして、その隙間がどうしても排除できなかったのです。

いろいろな属性を入れまくって様々なパターンを試してみた結果、もしかして「line-height」が問題?と思い、line-heightを指定してみたら、すんなりうまくいきました。(右上の画像は、上がMacのSafariで、下がWinのIE6です。)
どうも、別の親要素で指定していたline-height属性が「タイトル文字」にも影響を及ぼしていたようで、それに気付くまでに正味2時間くらいかかってしまいましたw

昨日は、ひさびさにマルチブラウザ対応に悩まされたGW最終日でした。
この記事へのコメント
おお。ガラッとかわりましたね。
前のさわやかな感じもよかったけど、こちらも確かにシックでなかなかよいですね!
僕はデザインは全然手付かずです。w
Posted by オトシマ at 2008年05月07日 17:38
今回は、さわやかさをなくしてみましたw
なくしすぎて、サイドバーがちょっと重くなっちゃいましたので、もう少し手を入れようかと。

#とあるサイトに似ているという噂がありますが、それは噂ではありませんw
Posted by ysk at 2008年05月07日 18:20
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/95947071
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック
ページの先頭へ
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。