• 締切済み

firefoxで背景が表示されません

こちらのQAを見て、floatを消してみたりclear入れてみたりしてみましたが一向に変化しません、 navで指定した背景画像がIEでは出てforefoxでは出ません・・どこをどう直したらよいのでしょうか・・・ ------css----------- body{ background:url(img/bg.jpg); padding:0; width: 775px; margin: 0 auto; } wrapper{ padding:0; width:755px; position:relative; } #head { margin: 0px; height: 54px; padding: 0px; } h1{ margin: 0px; padding: 0px; width: 177px; height: 59px; position: relative; top: 0px; right: 0px; background: url(img/logo.jpg) no-repeat; text-indent: -9999px; text-decoration: none; } #head strong { margin: 0px; padding: 0px; height: 15px; font-size: 12px; color: #FFFFFF; position: absolute; top: 3px; line-height: 15px; text-indent: 350px; } #head img { height: 33px; width: 335px; position: relative; top: -44px; float: right; padding: 0px; margin: 0px 10px 0px 0px; } .main_img { background: url(../img/main_img_bg.jpg) no-repeat; width: 755px; height: 390px; display: block; clear: both; margin: 0px; padding: 0px; position: relative; top: -35px; } .main_img .nav { background: url(img/nav_img.png) no-repeat; height: 369px; width: 208px; margin: 0px; padding: 0px; } .clear { clear: both; } .box01 { margin: 0px; padding: 0px; clear: both; width: 755px; } ---------------html----------------- <body> <!-----------------------wrapper(S)------------------------------------> <div id="wrapper"> <!-----------------------head(S)------------------------------------> <div id="head"> <h1>Bar TRACY バートレイシー</h1> <strong>心斎橋・アメ村barのバー</strong> <img src="css/img/head_tel.jpg" alt="06" /></div> <!-----------------------head(E)------------------------------------> <!-----------------------main_img(S)------------------------------------> <div class="main_img"> <!-----------------------menu(S)------------------------------------> <div class="nav"> <ul> <li class="home"><a href="index.html">ホーム</a></li> <li class="menu"><a href="menu.html">メニュー</a></li> <li class="access"><a href="access.html">アクセス</a></li> <li class="staff"><a href="staff.html">スタッフ紹介</a></li> <li class="event"><a href="event">イベント情報</a></li> <li class="contact"><a href="event">お問い合わせ</a></li> </ul> mixi <p>mixiコミュニティ良かったら コミュに遊びに来てください!</p> </div> <!-----------------------nav(E)------------------------------------> </div> <!-----------------------main_img(E)------------------------------------> <div class="clear"></div> <!-----------------------cont(S)------------------------------------> <div class="cont"> <!-----------------------box01(S)------------------------------------> <div class="box01"> <!-----------------------news(S)------------------------------------> <div class="news"> <h2>ニュース</h2> 画像 <p>サンプルテキスト</p> </div> <!-------news(E)--------> <!-----shop_com(S)------> <div class="shop_com"> <p> ショップインコメント</p> </div> <!-----shop_com(E)----> </div> <!---box01(E)---> <!--box01(S)--> <div class="box01"> <!---bana01(S)---> <div class="bana01"> チケット </div> <!--bana01(E)--> <!---shop_info(S)----> <div class="shop_info"> <h2>ショップ情報</h2> 地図 <dl> <dd>TEL:</dd><dt>06-0000-0000</dt> <dd>住所:</dd><dt>大阪市中央区 </dt> </dl> <dd>mail:</dd><dt>m@00000</dt> <!-----shop_info(E)---> </div> <!--box01(S)--> <!----footer(S)----> <div id="footer"> <p>Homeホーム | Menuメニュー | Accessアクセス | Staffスタッフ | Eventイベント | Contactotお問い合わせ</p> </div> <!---footer(E)--> </div> <!--wrapper(E)--> </body> </html>

みんなの回答

回答No.2

ちょっと質問の内容を勘違いしていました。 <!-----------------------menu(S)------------------------------------> を消してみるとちゃんと表示されました。 この記述が悪さをしていて、firefoxだとdiv class="navi"部分がまるまる消えていたようでした。 firefoxでhtmlやcssの表示を確認するときはfirebugというプラグインを firefoxにインストールされることをおすすめします。

回答No.1

背景画像に指定しているURLは正しいでしょうか? 一応背景は以下の記述で表示されましたが。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <style type='text/css'> body{ background:url(http://ec.atdmt.com/b/PJPPJMSNJMZH/100315mizuhobank_PM_300250_04d.gif); padding:0; width: 775px; margin: 0 auto; } wrapper{ padding:0; width:755px; position:relative; } #head { margin: 0px; height: 54px; padding: 0px; } h1{ margin: 0px; padding: 0px; width: 177px; height: 59px; position: relative; top: 0px; right: 0px; background: url(img/logo.jpg) no-repeat; text-indent: -9999px; text-decoration: none; } #head strong { margin: 0px; padding: 0px; height: 15px; font-size: 12px; color: #FFFFFF; position: absolute; top: 3px; line-height: 15px; text-indent: 350px; } #head img { height: 33px; width: 335px; position: relative; top: -44px; float: right; padding: 0px; margin: 0px 10px 0px 0px; } .main_img { background: url(../img/main_img_bg.jpg) no-repeat; width: 755px; height: 390px; display: block; clear: both; margin: 0px; padding: 0px; position: relative; top: -35px; } .main_img .nav { background: url(img/nav_img.png) no-repeat; height: 369px; width: 208px; margin: 0px; padding: 0px; } .clear { clear: both; } .box01 { margin: 0px; padding: 0px; clear: both; width: 755px; } </style> 以下 <!-----------------------wrapper(S)------------------------------------> と以降の内容と同じ。

関連するQ&A