• ベストアンサー

Firefoxのみ下に空白が出来るバグ

Nine-nineの回答

  • Nine-nine
  • ベストアンサー率49% (25/51)
回答No.6

質問者の方に質問です。わからない言葉をスルーしていませんか?折角教えていただいているのにもったいないと思います。 #1の方の標準モードと互換モードわかっておられます? #3の方の標準に対してのソースは標準モードの文書宣言をされていますがcssを別ページとコメントされている所から類推すると、html側は互換も混じった宣言で、cssにソースを入れるとダメと言う風にとれるのですがどうでしょう? 標準とはcssのまま、正しい文法解釈をするモード 互換とは古いブラウザに合わせて、一部解釈をわざと間違えて表示するモードです。 当然正しい文法解釈をするモードの方が各ブラウザを統一した表示になりやすいのです。但し、古いブラウザは、とんでもなく崩れたりします。 互換は古いブラウザもある程度救いますが本当の文法と違いますので、今のブラウザで同じ表現にしようとすると骨です。 文書宣言により、互換・厳格・標準を指定するのですが、各ブラウザで解釈が違いますので、宣言により互換と標準のブラウザも調整することが出来ます。<!DOCTYPE ~が今回のソースと質問者のhtmlの<!DOCTYPE と違いませんか?そこ重要です。ぴったり同じ表現をしようとすると必要になってきます。質問者さんのこだわりがあるならあげてもらわないと的確なアドバイスは受けれません。 Firefoxはプロフィールを作成することで、違うバージョンをインストールすることができます。私の環境でも1・2・3で表示できてますよ。ちなみにwinです。

chya2maro
質問者

お礼

回答ありがとうございます! なるほど、回答者さんのおっしゃるとうりですね。 そこから、見直す事をしないと駄目ですね。 勉強しなおします。 皆様の丁寧親切な回答を読んで、書いて試してみて、なんとなく原因がわかった事に感謝いたします。 結局、空白部分の高さ分、htmlに padding-bottom:50px; を入れると、埋まりました。 他のブラウザにも支障はないようです。 今回は勉強になりました。 ありがとうございます!!

関連するQ&A

  • oveflow、margin等の表示について質問です

    以下のようなhtml (XHTML 1.0 Transitional、文字コードはUTF-8) <body> <div id="wrapper">  <div id="container">  test  </div> </div> </body> で、bodyにリピート有りの背景、wrapperにx軸にリピートの背景、containerにリピート無しの背景と背景色に白をcssで設定しました。 containerは中央揃えで上に35pxの空きをもたせたいのですが、containerに「margin-top:35px」とするとIE(6、7)では意図した通りに表示されるのですがfirefoxだとwrapperにも35pxの空きができてしまいbodyの方の背景が見えてしまうといった状態になりました。 containerのmargin-topを指定せず、wrapperに「padding-top:35px」を指定する、または、containerのmarginはそのままでwrapperに「overflow: hidden」を指定すると両方のブラウザで意図した通りに表示されました。 ただ、paddingを指定した方はわかるのですが、なぜoveflowで、しかもhiddenで解決できたのかが全くわかりません。個人的な感覚ではcontainerのmarginをいかす方法で進めたいのですが…。 変な質問ですが、なぜこれで解決できたのが教えていただけると助かります。根本的に間違っている点などもありましたらご指摘していただければ幸いです。説明下手ですが何卒、よろしくお願いいたします。 ---元のcss--- html,body { height: 100%; margin: 0px; padding: 0px; } body { background-image: url(../img/***1.jpg); background-repeat: repeat; background-position: left top; height: 100%; } #wrapper { background-image: url(../img/***2.jpg); background-repeat: repeat-x; margin: 0px; padding: 0px; width: 100%; } #container { background-color: #FFFFFF; background-image: url(../img/***3.jpg); background-repeat: no-repeat; background-position: left top; width: 850px; margin-right: auto; margin-left: auto; height: auto; min-height: 620px; margin-top: 35px; }

    • ベストアンサー
    • CSS
  • ディスプレイサイズにあわせた背景画像

    html、cssは独学、javaはネットに上がっているものを活用させていただく程度の質問者です。 メインコンテンツ<wrapper>と<body>にかけて右角にラインの画像を斜めに貼り付けたサイトを作成しようと思っています。 今のところ下記のように書いているのですが、これだとlineのwidth=300pxのせいで、ブラウザに横スクロールが出来てしまいます。この横スクロールが出ないように設定したいのです。 例えば、ディスプレイのサイズを取得してlineのwidthを調整するとかlineを斜めにリピートするとか。 なにかよい方法がありましたら、お教え下さい。よろしくお願い致します。 *****html部分************************************ <body> <div id="wrapper"> <div id="header"> <div class="line"></div> </div> </body> ************************************************ *****css部分************************************ body{ width:auto; margin:0; padding:0; background:url(../images/body_bg.jpg) repeat; } div#wrapper{ width:850px; margin:0 auto; padding:0; background:url(../images/wrapper_bg.gif) repeat-y; } div#header{ width:850px; height:210px; margin:0 auto; background:url(../images/header_bg.gif) no-repeat;//ライン画像の一部 position:relative; } div#header div.line{ width:300px; height:200px; background:url(../images/line.jpg) repeat-x;//ライン画像 position:absolute; left:850px; top:0; } ************************************************

  • Chrome だと、画像が少し下にずれてしまう

    こんにちは! CSS初心者で、今回初めてCSSを利用してホームページを作っています。 制作中に、行き詰ってしまい質問をさせていただきました。 メインナビの背景に画像、その上にリストのテキスト、そしてカーソルオーバーをすると、違う画像が表示するようにしています(ナビは、リストをfloatで横並びに表示しています)。 IEだと、問題なく正しい位置で表示されるのですが、Firefoxや Chromeだと、カーソルオーバー用の画像が下に少しずれて表示されてしまいます。 元凶を、探してみたんですが、なかなか見つけられません。 わかる方がいらっしゃったら、教えていただけないでしょうか。 お粗末なCSSコードですが(多分、無駄なコードがいっぱいありそう・・・) のせさせていたたきました。 よろしくお願いします。 CSS -------------------------------------------------------------- @import url(base.css); body{ text-align:center; margin-right : auto;margin-left : auto; background-image : url(images/bg_brown.png); background-repeat: repeat; font-size : 90%; padding-top : 0px; padding-bottom : 0px; margin-top : 0px; margin-bottom : 0px; height : 100%; } #wrap{ text-align : center; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : auto; width : 100%; padding-top : 0px; } #com_back{ background-image : url(images/bg_green.png); background-repeat : repeat-x; } #g_navi_back{ width : 100%; height : 80px; text-align : center; background-repeat : repeat; background-image : url(images/bg_g_navi.png); } #g_navi{ overflow : hidden; width : 900px; margin 0 auto; margin-left : auto; margin-right : auto; background-repeat : no-repeat; background-image : url(images/navi_base.png); height : 80px; } #g_navi ul{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; } #g_navi li{ text-align : center; width : 180px; float : left; border-collapse : collapse; background-position : left center; top : 50%; bottom : 50%; letter-spacing : 1px; line-height : 18px; } #g_navi li a{ display : block; padding-top : 20px; } #g_navi ul li a:link{ text-decoration : none; color : black; } #g_navi ul li a:hover{ background-image : url(images/navi_hover_g.png); background-repeat : no-repeat; background-position : center center; height : 80px; } .inner{ text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; width : 900px; background-repeat : repeat; height : auto; background-image : url(images/bg_white.png); } html ------------------------------------------------------------------------------ <!--外枠--> <div id="wrap"> <!--ロゴ--> <div id="com_back"><div id="com" ></div></div> <!--ナビ--> <div id="g_navi_back"> <div id="g_navi"> <UL style="list-style-type : none"> <LI><a href="index.html">ホーム</a></li> <LI><a href="**********">ご案内</a></li> <LI><a href="**********">ご利用方法</a></li> <LI><a href="**********">イベント詳細</a></li> <LI><a href="**********">アクセス</a></li> </UL></div> </div><!--ナビ_end--> <div class="clear"><hr /></div><!--ナビfloatクリア--> <div class="inner"><!--インナー-->

    • ベストアンサー
    • CSS
  • FireFoxで見るとdiv間に隙間が・・・

    divを3つ使い、CSSで指定した背景画像によって一つのボックスを作っています。 IE6で見たときは異常ないのですが、FireFoxで見ると、 それぞれ隙間が開いてしまい、背景画像が途切れて見えます。 同じような使い方をしている箇所にすべて同じ事が起きています。 Firefoxではマージン0の状態でdivの間に隙間が出来てしまうのでしょうか? 直す方法があればご指導よろしくお願い致します>< <div id="medi-top"> </div> <div id="media"> <p>何行かにわたり、画像や文章が入力されています</p> </div> <div id="medi-bottom"></div> #medi-top { background-image: url(img/media_01.jpg); background-repeat: no-repeat; height: 50px; width: 680px; margin-top: auto; margin-right: auto; margin-bottom: 0px; margin-left: auto; line-height: 0; } #media { width: 600px; background-image: url(img/media_03.jpg); background-repeat: repeat-y; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-right: 40px; padding-left: 40px; } #medi-bottom { background-image: url(img/media_05.jpg); background-repeat: no-repeat; height: 35px; width: 680px; margin-top: 0px; margin-right: auto; margin-bottom: 50px; margin-left: auto; } 本や検索などで同じようなものを探して対処してみたのですが、 直らなかったため質問させていただきます。 よろしくお願い致します。

    • ベストアンサー
    • CSS
  • ディスプレイのサイズに合わせた背景画像

    html、cssは独学、javaはネットに上がっているものを活用させていただく程度の質問者です。 メインコンテンツ<wrapper>と<body>にかけて右角にラインの画像を斜めに貼り付けたサイトを作成しようと思っています。 今のところ下記のように書いているのですが、これだとlineのwidth=300pxのせいで、ブラウザに横スクロールが出来てしまいます。この横スクロールが出ないように設定したいのです。 例えば、ディスプレイのサイズを取得してlineのwidthをちょうせいする。とかlineを斜めにリピートするとか。 なにかよい方法がありましたら、お教え下さい。よろしくお願い致します。 *****html部分************************************ <body> <div id="wrapper"> <div id="header"> <div class="line"></div> </div> </body> ************************************************ *****css部分************************************ body{ width:auto; margin:0; padding:0; background:url(../images/body_bg.jpg) repeat; } div#wrapper{ width:850px; margin:0 auto; padding:0; background:url(../images/wrapper_bg.gif) repeat-y; } div#header{ width:850px; height:210px; margin:0 auto; background:url(../images/header_bg.gif) no-repeat; position:relative; } div#header div.line{ width:300px; height:200px; background:url(../images/line.jpg) repeat-x; position:absolute; left:850px; top:0; } ************************************************

    • 締切済み
    • CSS
  • Firefox2.0で背景が上段に集まってしまいます。

    以下のCSS、HTMLでdiv要素を分けて3つの細いgif画像を見た目は一つの背景になるように指定しているつもりです。真ん中のdiv要素をy方向にリピートさせて記事が長くなっても背景が崩れないページを作りたいと思っております。 IE7.0では問題なく表示してくれるのですがFirefox2.0になると背景が上段に集まってしまいます。 すみませんが改善方法をアドバイスよろしくお願い致します。 【CSS】 body { font-family: "MS Pゴシック"; margin: 0px; padding: 0px; text-align: center; background: #E8FFFF fixed; } #wrapper { text-align: left; margin: 0px auto; padding: 0px 0px 0px 20px; height: auto; width: 900px; background: url(background_3.gif) repeat-y; } #head-background { margin: 0px auto; height: 17px; width: 900px; background: url(background_7.gif) no-repeat; padding: 0px; } #header { margin: 0px; padding: 0px; height: 20px; width: 800px; } #footer {     clear: both width: 900px;     background: url(background_6.gif) no-repeat; margin: 0px auto; padding: 0px; } 【HTML】 <body> <div id="head-background"> </div> <div id="wrapper"> <div id="header"> ・・・・・(ロールオーバーリンク) </div> <div id="header"> ・・・・・(MPEG画像) </div> </div> </div> <div id="footer"> </div> </BODY> </HTML>

    • 締切済み
    • CSS
  • CSSのborderが実際の領域より上に表示される

    お世話になります。 CSSのborder-bottom指定のことでどうしても分からないことがあります。 div#contensにborder-bottom指定をしてその直下のdiv#footerと区別したいと考えています。 本当はdiv#footerにborder-top指定すればいいのでしょうが、footerはbackground-imageが2500pxあり、border-topすると、2500px分表示されます。 実際のコンテンツ領域は800px分なので、800pxだけのborderがほしいのです。 ところが、div#contensにborder-bottom指定すると、実際の情報量より上にborderが表示されます。これはどうしてでしょうか? いろいろ考察したところ、どうやらmin-height:800px;の指定が原因で適用されているようです。min-heightはページによって情報が少ない場合でもある程度の高さを確保するために設定していますが、800px以上の情報量となる場合は、その情報量に沿ってきちんとborderも可変してほしいのです。解決法をどうか教えていただけないでしょうか。 よろしくお願いします。 CSS--- body { background-image:url(../images/site-body.jpg);←この画像が2500pxあります。 background-position:top center; background-repeat:no-repeat; background-color:rgb(237,232,195); margin:0px; } div#header { width:800px; height:150px; margin-left:auto; margin-right:auto; } div#contens { border-bottom:1px dotted #333333; width:800px; height:auto !important; min-height:800px; margin-left:auto; margin-right:auto; } div#footer { background-image:url(../images/footer-bg2.jpg) ;←この画像も2500pxあります。 background-repeat:no-repeat; background-position:bottom; height:100px; } HTML--- <body> <div id="header"> ~省略~ </div> <div id="contens"> <div id="leftmenu"> ~省略~ </div> <div id="rightmenu"> ~省略~ </div> </div> <div id="footer"> ~省略~ </div> </body>

  • firefoxでcssを使った時背景画像が表示されない

    CSSでfloatを設定し、その中のそれぞれに背景画像を表示しようとすると、上手くいきません。 背景画像も背景色も表示されません。 構文に間違いがあるのでしょうか? それともそのような仕様なのでしょうか? よろしくお願いいたします。 ###CSS### #container { width: 900px; background-image: url(images/back.jpg); background-repeat: no-repeat; } #header { width: 900px; } #contents { width: 748px; background-color: #FFFFFF; background-image: url(images/image.jpg); background-repeat: no-repeat; background-position: top; padding: 0px; margin-left: 76px; } #footer { clear: both; width: 748px; margin-left: 76px; } #sidebar { float: left; background-image: url(images/side.jpg); width: 180px; margin-top: 14px; background-color: #FFFFFF; } #main { float: right; width: 568px; padding: 0px; background-color: #FFFFFF; background-image: url(../images/image2.jpg);

  • ページ上部の余白をなくしたい(CSS)

    初歩的な質問で申し訳ありません。 以下のような記述なのですが、 <div id="container">の上部にスキマが出来てしまいます。 背景に仮色をつけたりして確認しましたが、 どうしても余白をなくすことができません。 marginの指定の仕方がおかしいのでしょうか? ご指摘いただけると助かります。 /* HTML(単純に書くとこんな感じです)*/ <body> <div id="container">   <div id="header"> <div> </div> </body> /* CSS */ body { margin : 0; padding : 0; background-color : #eeeeee; font-size : 12px; line-height : 150%; color : #333333; font-family : arial, helvetica, sans-serif, Verdana, Geneva, MSゴシック; text-align : center; } #container { margin : 0 auto; padding : 0; width : 751px; text-align : left; background-color : #ffffff; } #header { margin : 0 auto; padding : 0; width:745px; height:120px; background: transparent url(***.jpg) ; background-repeat: no-repeat; }

    • ベストアンサー
    • HTML
  • CSSレイアウトについて

    はじめまして。 個人用サイトを趣味で制作しています。 下記のようなイメージを、html×cssで組みたいのですが、 うまくいきません。 なんとかsafariで、再現したいのですが、問題点がわかりません。 ※IE6は、きっと無理ですよね。 どなたか原因分かる方教えていただけると幸いです。 ■イメージ http://www.turn.jp/design.jpg ■現状サイト http://www.turn.jp/ ■htmlソース <body> <div id="container"> <div id="wrapper"> <div id="contents"> <div id="logo"> <h1><img src="images/logo.png" width="200" height="164" alt="2lemma" /></h1> <h2><img src="images/menu.png" width="447" height="79" alt="blog" /></h2> </div> <div id="footer"> <p>Copyright&copy;2010 All Rights Reserved.</p> </div> </div> </div> </div> </body> </html> ■CSS @charset "Shift_JIS"; /* CSS Document */ }#container { margin: auto; width: 1000px; background-color: #959500; } #wrapper { height: 437px; width: 960px; background-image: url(../images/design.jpg); background-repeat: no-repeat; margin: 20px; } #logo { text-align: right; height: 164px; width: 200px; margin-right: 245px; margin-top: 170px; float: right; } #footer { clear: both; color:#FFFFFF; font-size:8px; padding-top: 10px; }