- 締切済み
CSSで３分割した背景画像を配置したいけど隙間が出来てしまう？
初めて質問させていただきます。 当方はCSS初心者です。 画像（グラデーションのある角丸四角枠）を３分割し、それを背景画像として配置したいのですが、WinIE6などで表示するとどうしても画像に隙間ができてしまうのです。 IE7、FireFoxでは無事に希望通りに表示されています。 【HTML】 <div id="wrapper"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> 【CSS】 #wrapper{ width:680px; height:auto; border:0 auto; padding:0; } .top{ width:650px; height:10px; background-image:url(img/01.gif); background-position:top center; background-repeat:no-repeat; margin:0 auto; padding:0; } .middle{ width:650px; background-image:url(img/02.gif); background-repeat:repeat-y; margin:0 auto; padding:0; } .bottom{ width:650px; height:13px; background-image:url(img/03.gif); background-repeat:no-repeat; background-position:bottom center; margin:0 auto; padding:0px; } といった感じで、ざくっとwrapperの中に背景画像をセンターで敷きたいのです。 .topと.middleの間には隙間は出来ないのですが、.middleと.bottomの間に数pxの隙間が出来てしまうのです。 制作環境はDreamweaver8、MAC/OSXですが、動作確認はWin/XPでも行っています。 何卒ご教示下さい。
- みんなの回答 （6）
- 専門家の回答
みんなの回答
- alwayz66
- ベストアンサー率66% (2/3)
隙間ができる方のCSSにfont-size:0px;で改善すると思います。 いかがでしょう？ ちなみに色々書いているので、また時間があるときにでも見てみてください。
- goldfox
- ベストアンサー率49% (123/249)
解決おめでとうございます。 ＞.titがh1だった部分です。 ＞もしかしたら解消できたのは他に理由があるのかもしれませんが 確認方法は簡単です。 その、上手くいっている状態のソースで、 <div class="tit">見出し</div> を <h1>見出し</h1> に変えてみましょう。 問題ないようなら、 <h1 class="tit">見出し</h1> で。
- abril
- ベストアンサー率69% (388/560)
> ですが・・・この角丸四角枠は同一ページ内に数カ所に設置してあるのですが、隙間が解消できているものと解消できていないものがあるのです。 > ソース上では隙間が解消出来ている角丸四角枠ソースをコピペして多用しているので、なぜ隙間があったりなかったりするのかが分からないのです（涙） > しかも今度はIE7では無事に表示出来ていてもWin/FireFoxやMac/IE5.2では隙間ができていたり・・・。 > ブラウザによっては希望通りに表示出来ているものもありますので、何が原因なのかさっぱりです。。。 "margin: 0 auto;"でIEでもセンタリングが成されているということは、標準準拠モードですよね。以下の様にサンプルを作成し、検証してみました。 IE6.0/7.0、Firefox2.0～、Opera9.25 on Windows XP、Safari2.x on Mac OSX、で同様の表示結果を得ています。 --------------------------------------------------------------------- 【HTML】 --------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /> <link rel="stylesheet" href="./common.css" type="text/css" media="all" /> <title>サンプル</title> </head> <body> <div id="wrapper"> <div class="top"></div> <div class="middle">テキストテキストテキスト…</div> <div class="bottom"></div> </div> </body> </html> --------------------------------------------------------------------- 【CSS】 --------------------------------------------------------------------- body { margin: 0; padding: 0; font-size: 12px; line-height: 140%; } #wrapper { width: 680px; height: auto; padding: 0; } .top { width: 650px; height: 10px; background: url(img/01.gif) bottom center no-repeat; margin: 0 auto; padding: 0; font-size: 1px; line-height: 0; } .middle { width: 650px; background: url(img/02.gif) repeat-y; margin: 0 auto; padding: 0; } .bottom { width: 650px; height: 13px; background: url(img/03.gif) top center no-repeat; margin: 0 auto; padding: 0; font-size: 1px; line-height: 0; } --------------------------------------------------------------------- オリジナルのCSSからの変更点は以下の通りです（本件の不具合とは直接関係ないものを含みます）。 ・"#wrapper"の"border: 0 auto;"ですが、borderの値に"auto"というのはありません。初期値は0ですので、borderの定義は不要です。 ・各classのbackgroundプロパティを一括表記でまとめました。 ".top"と".bottom"のbackground-positionの値を逆にしました（ANo.1で回答済）。 ・".top"と".bottom"には"line-height: 0;"と"font-size: 1px;"を追加。前者はANo.1で回答済みですが、後者は今回新たに付け足しました。角丸画像の高さが結構小さ目なので、親要素で定義されているfont-sizeの方が相対的に高さがオーバーしてしまうケースも考えられます。そうなるとheightが定義されていても、IE6では超えた分だけそのブロックの高さを広げてしまう（IE7や他のモダン・ブラウザでは広がりません）ので、更なる回避策として追加しました。 この状態で、<div class="top"></div><div class="middle">テキストテキストテキスト…</div><div class="bottom"></div>（以下、これをひとまとめにして「角丸ブロック」と呼ばせて頂きます）の部分をいくつもコピペして表示して見ましたが、いずれも不具合は起こりませんでした。箇所によって不具合が起きたり起きなかったり、ということであれば、この角丸ブロックが入るそれぞれの直近の親要素（があるならば）から何かを継承してしまっているのかもしれません。もしくは、角丸ブロックの中の<div class="middle">～</div>の中に入る要素が、ケースバイケースでレイアウトを崩す様なスタイルになってしまっているのかも…。 ※ちなみに、MacのIE5.2は「非常に」CSS関連の挙動が不審な為、その不具合を解消しようとすると不必要にマークアップが入り組んでしまったりHackを使いまくったりしなければならない事が多いです。その為だけにHTMLやCSSの記述がごちゃごちゃしてくるのは効率が悪いですし、Mac版IEについては5.2を最後に数年前からMicrosoftは開発を中止してしまっており、もうモダン・ブラウザとは言えないと思いますので、考慮はしていません。MacユーザならSafariで充分事足りますし、他のモダン・ブラウザを使うという選択肢も沢山あるので… > 再度ソースを見直してみたいと思います。 そうですね、一度"#wrapper"の中味を空にして、少しづつコンテンツを復活させて行きながら、不具合の起きるポイント毎にそこまでのCSSの定義やHTMLのマークアップをチェックして行けば、手掛かりが掴めるかもしれません。
- goldfox
- ベストアンサー率49% (123/249)
＞残念ながら「隙間が出来る」という不具合は修正されませんでした。 へんですね、当方それで問題なくくっつきましたが。 上記ソースのみのtestページを作って（top、bottomは修正したもの）確認しても、隙間はできますか？ 画像そのものに余白がついてるとかは……あ、IE7では問題ないんでしたっけ。 .bottom{} に font-size:13px; を加えるとどうでしょう？
お礼
重ね重ねアドバイスをありがとうございます。 実は・・・解決しました！！！ しかも私には本当によく分からない理由で解決しました！ 角丸四角枠の中に、<h1>で見出しを付け、<ul>などのリストも使用していたのですが、まず<h1>で付けてた見出し内容を<h1>ではなくclassで差し替えました。 そしてリスト<ul>～</ul>の後に改行タグを入れました。 そうするとなぜか？角丸四角枠は隙間なく、どのブラウザでもきれいに表示されました！！！ 以上のことが解決策になったのか少し疑問のままですが、とりあえず不具合は解消されましたのでご報告いたします！ お忙しい中を本当に丁寧なアドバイスを戴き、誠にありがとうございました。
- goldfox
- ベストアンサー率49% (123/249)
3分割上の背景は下配置（上が空白になっても中央ブロックにくっつく）、3分割下の背景は上配置（下が以下同文）にするべきでは。 .top{ background-position:top center; .bottom{ background-position:bottom center; ↓ .top{ background-position:bottom center; .bottom{ background-position:top center;
お礼
アドバイスをありがとうございます！ そのミスに全く気づいていませんでした。。。 早速修正させていただきましたが、残念ながら「隙間が出来る」という不具合は修正されませんでした。 ですが、本当に助かりました。 大変貴重なアドバイスをありがとうございました！
- abril
- ベストアンサー率69% (388/560)
今、IE6での検証ができない状態なので以下は全て推測ですが。 親要素から継承された行間や、コード中の改行コードによって隙間ができる事もあるのですが、本件は全要素が<div>で構成されているので当てはまらないかもしれません。だめもとで".bottom"に"line-height: 0;"を定義し、<div class="middle">テキスト</div>と<div class="bottom"></div>の間の改行コードを削除（もしくはコメントで隠す）を試してみては。 それから、別件で隙間のできるブロックのheightを0にして替わりにpadding-topにその値を定義したら解消された、というケースがありましたが、その場合も<div>ではないマークアップだったので、これも当てはまらないかも… あと、背景画像の位置指定に関して、".top"が"background-position: top center;"で".bottom"が"background-position: bottom center;"と定義されていますが、上下の角丸背景画像を中央の".middle"に対してくっつけるのであれば、逆の指定の方が相応しい（上の画像を下合わせに・下の画像を上合わせに、という意味で）かと思います。勿論、それぞれの背景画像の実際の高さが各ブロックで定義されている高さと一致しているなら、結果はどちらでも同じなのですが。万が一、".bottom"の背景画像"03.gif"の高さが13pxより小さかったりすると、現状の位置指定では上方向に余白ができる事になります。 実地検証をしていないので、どなたか他の方が検証済みの上、的確な回答をして下さった場合はそちらを参考にして下さい。
お礼
ご丁寧なアドバイスをありがとうございます！ アドバイス頂いた項目は全て追加＆修正してみました。 DIV間の改行コードを削除し、画像高さをチェックもしました。 画像高さに修正はありませんでした。 そして、"line-height:0;"を追加しますと、隙間が解消できました！！！ ですが・・・この角丸四角枠は同一ページ内に数カ所に設置してあるのですが、隙間が解消できているものと解消できていないものがあるのです。 ソース上では隙間が解消出来ている角丸四角枠ソースをコピペして多用しているので、なぜ隙間があったりなかったりするのかが分からないのです（涙） しかも今度はIE7では無事に表示出来ていてもWin/FireFoxやMac/IE5.2では隙間ができていたり・・・。 ブラウザによっては希望通りに表示出来ているものもありますので、何が原因なのかさっぱりです。。。 再度ソースを見直してみたいと思います。 貴重なアドバイスをご丁寧に戴けた大変感謝しております。 本当にありがとうございます！
お礼
誠に丁寧なアドバイスをありがとうございます！！！ 「回答３」にも書かせて頂きましたが、なぜか問題が解消することができました！ 【HTML】 <div class="top"></div> <div class="middle"> <div class="tit">見出し</div> <ul> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> </ul><br /> </div><div class="bottom"></div> 【CSS】 .top{ width:650px; height:10px; background-image:url(img/01.gif); background-repeat:no-repeat; background-position:bottom center; margin:0 auto; padding:0; } .middle{ width:650px; background-image:url(img/02.gif); background-repeat:repeat-y; margin:0 auto; padding:0; } .bottom{ width:650px; height:13px; background-image:url(img/03.gif); background-repeat:no-repeat; background-position:top center; margin:0 auto; padding:0; line-height:0; } .tit{ font-size:16px; color:#000066; border-bottom:2px solid #66CCFF; width:90%; height:auto; padding:0; margin-left:20px; font-weight:bold; } 上記のソースは一部です。 もしかしたら不要・無効なものも含まれてるかもしれませんが、なぜかこれで表示が崩れずに済みました。 .titがh1だった部分です。 もしかしたら解消できたのは他に理由があるのかもしれませんが（汗） とにかく貴重なアドバイスを誠にありがとうございました。 大変感謝しております！