旧フォーラムの記事です 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 li a {
display: block;
width: 100%;
padding: 8px 0;
text-align: center;
/* height : 30px; */
font-weight: bold;
color: #666666;
text-decoration: none;
background: url("http://blog62.fc2.com/t/tsrr/file/003399.jpg") no-repeat;
margin: 0;
}
cyaimi 2006-05-18 00:49:31
件名 ：
ちょっと余談気味ですが。
私も同様だったので、FFで全部バックアップとりました。
編集だけならFFでも問題ないので、そっちの路線に変更すると作業が楽かも。