ロゴを背景画像として貼り付ける
ページトップのロゴを img要素 で入れ込むのでなく、背景画像として表示する方法。
<p class="logo"> <a href="/">LOGO</a> </p>
に対しては
.logo { border: 0; padding: 0; background: #fff url(logo.png) no-repeat; } .logo a { display: block; margin: 0; padding: 0; border: 0; text-decoration: none; overflow: hidden; height: 0px !important; height: (ロゴ画像の高さ); width: (ロゴ画像の幅); }
"overflow: hidden;" で、コンテント枠から溢れるものは表示しないようにして、コンテント高を0にしてやればOK。
ただし、通常のブラウザでは "height: 0;" を、IEでは "height: (ロゴ画像の高さ)"を、それぞれ指定する必要があります。
このため、"!important" を使って、IEだけ次の"height: (ロゴ画像の高さ);" を有効にします。
でも、IE7では"!important"が有効になるらしいです。