旧フォーラムの記事です http://blog.fc2.com/forum/viewtopic.php?f=3&t=9971
2006-05-03 15:37:42
件名 ：FireFoxでメニューの背景画像が切れます。
OS：WinXP
ブラウザ環境： IE6、Opera8.54、FireFox1.5.0.2
使用テンプレート名： 公式sampleをカスタマイズしたもの
ブログURL：http://tsrr.blog62.fc2.com/
一般
公式テンプレートのsampleを変更してページをつくっていたのですが、IE6で表示されるメニューの背景画像がFireFoxで表示すると切れます。Operaでは画像とテキスト位置の解釈の違いからかぐちゃぐちゃでした。
せめてFireFoxで画像が切れなければいいといじっているうちにレイアウトも崩れてしまいました。
下にCSSのレイアウト関係の部分を載せましたのでどなたかご教授ください。
div#container {
width : 760px;
position : relative;
background-color : transparent;
}
div#branding {
position : relative;
z-index : 100;
height : 160px ;
}
div#navigation{
position : absolute;
left : 20px;
top : 110px ;
z-index : 100;
width : 100%;
}
div.column { margin : 15px 0;
/* タイトル部分と記事、記事部分とフッター分の間隔 */
}
div#wrapper { position : relative;
top : 0px; left : 0px;
width : 100%;
}
div#center{
margin : 0 160px;
width : 380px;
padding : 0 20px;
/* パディング */
voice-family : "\"}\""; /* おまじない */
voice-family : inherit; /* おまじない */
}
div#primary-column {
}
/* アーカイブ関連ブロック */
div#secondary-column {
position : absolute ;
left : 0px;
top : 0px;
width : 160px; }
/* アーカイブ以外のブロック */
div#extra-column {
position : absolute ;
right : 0px;
top : 0px;
width : 160px;
}
/* 著作表示ブロック */
div#siteinfo-legal {
clear : both;
/* 回り込みを解除 */
margin : 0 10px;
}
このコミュニティにご参加頂くと、コメントの書き込みができます
#navigation ul li.parentOn ul {
display: block;
margin-top:-15px;
}
div#container {
width : 760px;
position : relative;
background-color : transparent;
margin:0 auto;
}
background : url("http://blog62.fc2.com/t/tsrr/file/mainbar.jpg") top left no-repeat;
Anonymous 2006-05-15 21:33:12
件名 ：
本当に何度も直していただいてありがとうございますm(__)m イメージ通りの表示となりました。FFではhspaceが反映されていなかったり、Operaである程度形にするには道は大いに険しそうです・・・。
ところが、カウンターの数字部分にマウスをあてるとレイアウトがくずれるという病が発生してしまいました（泣き
<h2><font color="#FF0000">TOTAL</font>
<A href="http://millioncounter.com/" target=_blank><IMG SRC="http://cnt4.millioncounter.com/img.php?tsrr&total&5&014" border=0 alt="アクセスカウンター"></A>
</h2>
<h2><font color="#FF0000">TODAY</font>
<A href="http://millioncounter.com/" target=_blank><IMG SRC="http://cnt4.millioncounter.com/img.php?tsrr&today&2&014" border=0 alt="アクセスカウンター"></A>
<font color="#FF0000">YESTERDAY</font>
<A href="http://millioncounter.com/" target=_blank><IMG SRC="http://cnt4.millioncounter.com/img.php?tsrr&yesterday&2&014" border=0 alt="アクセスカウンター"></A>
</h2>
ページの一番上に画像を加えたことが理由か否か、気がついたらなっていました・・・。
ちなみにSleiphnir1.66での表示がIE6とほぼ変わらなかったので安心しました。
本当に何度も申し訳ないですm(__)m