- 2008年5月18日 17:40
- Web
このブログはvicunaのMovableTypeのテンプレートを使用させて貰っています。
ヘッダーを表示するようにするタイプ(CSS「mod_eyeCatch-header.css」を適応)にしますと、
IEを使っている場合、「globalNavi」がズレてヘッダ背景と被ってしまいます。
(私の環境だけかもしれませんが・・・)
基本的に僕はFirefoxやSafariを使うことが多いので放置でも良いのですが、
折角なので修正して見ました。
ちなみに「globalNavi」ってのは、上に並んでいる「Top」や「About」などのリンクのことです。
IEだと、この「globalNavi」の上の方がヘッダ画像と被ります。
どうやらCSSの「margin-top: 10px;」がちゃんと効いていない模様。
という訳で、CSSハックで対応して見ました。
「mod_eyeCatch-header.css」を編集します。
Before
/*--------------------------------------
2-1.グローバルナビへの処理
---------------------------------------*/
div#header ul#globalNavi {
margin-top: 10px;
}
After
/*--------------------------------------
2-1.グローバルナビへの処理
---------------------------------------*/
div#header ul#globalNavi {
margin-top: 10px;
padding-top: 0!important;
padding-top: 10px;
}
marginの代わりにpaddingで上に隙間を空けました。
IE以外のブラウザ用に「padding-top: 0!important;」を先に記述して、
その後にIE用の「padding-top: 10px;」を記述。
完全に修正できている訳ではありませんが、仮修正って事で暫くはこんな感じで行こうかとｗ
参考サイト：
CSSハック | BLOG × WORLD ENDING
Lucky bag::blog: IE7 を含むモダンブラウザ向けの CSS ハックまとめ
