CSSテクニックコミュのMozilla系での背景repeat-yの表示

はじめまして。ビギナーを、どなたか助けてください。

左袖のナビゲーションの、
#navi { float: left;
width: 168px;
margin: 0px;
padding: 0px;
background-color: #E6E6E6;
font-size: 14px;
text-align: left;}
背景色が内容と共に終って（途切れて）しまうのを、見た目だけ
最後まで続いて見えるようにdiv#naviを包含するコンテナに
#container {
width: 734px;
margin: 0px 2px 0px 0px;
padding: 0px 10px 0px 12px;
background: #fff url(略) repeat-y top center;
}
上記のようにrepeat-yで高さ2pxの画像を背景指定しているの
ですが、IE6では問題なく表示されるのですが、Firefox1.07と
Netscape7.1では（Operaも）繰り返し表示しません。

もちろんheightに値を指定すればそのpx分だけ表示される
のですが。それではページ毎にコンテンツ内容量が違うので
cssの美点を活かせてないです。
overflow: visible;を入れてみても見当違いか変化なしです。

どなたか解決策、考えていただけませんか。
もしかしてIEのバグなのでしょうか？

コメント(16)

最初
全て
最新の40件

[3] mixiユーザー 12月20日 21:05

左袖ということは、2カラムレイアウトですか？
floatプロパティの問題な気がします。
#naviの閉じタグ（</div>とか）の前に<br>を入れて、それにclear:both;とかあててみてください。

[4] mixiユーザー 12月20日 23:33

みなさん早速ありがとうございます。

＞SHARULさん
---------------------------
background: ～ center top;　に直しましたが、変化なしです。
---------------------------
http://validator.w3.org/
ここ以外で自動チェックに使ってらっしゃるサイトなど
ありましたら教えてください。
因に問題の作業は、HTML 4.01 Transitionalで記述してます。。

＞2noseさん
２カラムです。
#naviの直前に#main（コンテンツエリア）があり、
メインコンテンツを右に、ナビを左にフロート指定してます。

#naviと#mainを包含するのが、問題の#containerで、
#containerの直後に#footerがありclear: both;指定してます。

#naviの直後にカラの
<div class="cc"></div>
を入れて
.cc {clear: both;}指定してみました。
エディタ（Dw MX2004）上の表示では画像の帯びがフッタまで
伸びたのですが、Firefoxでは依然としてナビの長さで止まり…

HTMLの文法違反が原因なんでしょうかねぇ。

[5] mixiユーザー 12月21日 00:10

コンテナの中にフッターを入れるべし

どーしてもフッターをコンテナの外に出さなくちゃいけないとかありますか？

[7] mixiユーザー 12月21日 00:50

>そうすると左、右カラムともに浮動ブロックになるので、
>#containerの内容が実質なくなり、背景が描画されないのだと思います。
↑これ知らなかった＾＾；勉強になりました。
２カラムや３カラムの場合、maginつけることが多いからこっちの方が楽かもね。

[9] mixiユーザー 12月21日 01:05

<div class="cc"></div>に単にclearプロパティを指定したのでは、Firefoxでは無視されてしまいます。

＞overflow: visible;を入れてみても見当違いか変化なしです。

逆ではないかと。#containerの高さが子のフロートボックスを含むようにするためには、#containerにoverflow: visible以外を指定します。

というわけで、
overflow: auto;
overflow: hidden;
overflow: scroll;
のいずれかなのですが、scrollはまあ問題外だと思います。すると、hiddenかautoですが、

「hidden」→NN7では高さの指定のないボックスにhiddenを指定すると内容が表示されなくなる。
「auto」→WinIE5ではスクロールバーの幅があらかじめ確保されてしまうため内容領域の幅が小さくなってしまう。

と、どっちもどっちです。NNだけを除外するのは難しいので、現実的なところでは、ハックを用いて、IEにだけoverflow:hidden;を読み込ませるのが良いかなと。

#container { overflow: auto; }
* html #container { overflow: hidden; } /* forIE */

[10] mixiユーザー 12月21日 01:36

htmlソースの
containerの最後を

<br style="clear:both; ">
</div>
としてみたらどうでしょう？
僕はいつもこれで回避してます＞＿＜

[11] mixiユーザー 12月21日 01:55

>まろ茶さん

その手がありましたね！どうしても、な理由はありませんw
コンテナのpaddingを解除してナビとメインのmarginを指定すれば
フッターもボディ幅まで伸ばせますし。
と、やってみると、やはりIEでしか縦リピートされません。
やはりページ毎にコンテナ或いはナビのheightを指定して
表示させてやるしかないのでしょうか。

＞SHARULさん
右カラムに当たる#mainは

#main {
float: right;
overflow: visible;
width: 550px;
margin: 0px 0px 30px 0px;
background-color: transparent;
font-size: 14px;
text-align: left;
}

となっています。float: right;ですけど、左右カラムともに
浮動化している状態ですね。
HTMLでは <"navi">より<"main"> を先に記述しているので
ナビのfloat: left;を解除してmargin-left指定しましたが
結果は同じ、IEのみ描画されます。

皆さんありがとう、色々と考になります。

[13] mixiユーザー 12月21日 02:44

＞かわち丸さん

overflow: auto;
overflow: hidden;
overflow: scroll;

全部試しましたが、なぜかIEでもクシャっと縮んだようにコンテナの内容が表示されなくなってしまいました。
因みに#containerにoverflowを指定する場合、その包含する
フロートボックスには（ここでは#naviと#main）厳格に高さ
指定しないと駄目ですかねえ？

今まで#naviにもoverflow: visible;指定していましたので。
もちろん外して試しましたが、駄目でした。

＞ジューシィさん

<div class="cc"></div> に、.cc{clear:both;}
を指定する変わりに
<br style="clear:both;">　入れてみました。
う～ん、これが原因ではない様です…

一度、構造だけを抜き出して単純化したファイルで、
皆さんに教わったやり方をまとめて試してみます。

というか、ココで訊く前に本来それをやってみるべきなんだ…
全く関係ないソースが影響しているかもしれないし。

[14] mixiユーザー 12月21日 02:52

＞SHARULさん

っと、時間差で！ありがとうございます！

問題なく表示されますね。
早速ソースをコピーさせていただきました。
深夜まですみません…
いま同時進行で別の仕事してまして、一旦消えます。
暫くしたら報告しまっす。

[15] mixiユーザー 11月21日 17:40

＞コンテナの中にフッターを入れるべし

わたしはコレで解決しました～！有難うございます！！

[16] mixiユーザー 11月21日 19:06

流れを全部読んでないですが、

#container に
float:left
で背景でないですか？

ログインすると、残り5件のコメントが見れるよ