「clear:both」が抜けていた
【モンティホール問題】の時のように、So-net blogの「エコ」スキン異常の解決に執着してしまった。
問題点を見つけるために、各要素に色を付けて、表示する時に少しずつずらして階層が分かるようにし、各要素の頭と末尾に各要素の名前を表示するようにして確認した。それで「変だな」と思うことが幾つかあって、ようやく謎が解けた。
結論から言うと、main要素が終わった後、content要素が終わる前に「clear:both;」が必要だった。これはユーザーの力ではどうすることもできない。
まず、So-netさんに次のようにmain要素が終わった後に「<div class="content-bottom"></div>」を挿入してもらう。
</div>
<!-- /Main -->
<div class="content-bottom"></div>
</div>
<!-- /Content -->
その上で、次のスタイルを指定する。
.content-bottom { clear:both; }
これで多くの問題が解決する。【「エコ」スキンの改善法】で紹介した「#content { overflow:hidden; }」が必要なくなる。「#content { overflow:hidden; }」ではどこかでトラブルが起こっているかもしれないので、今回紹介した方法の方が良いと思われる。ユーザーの力ではどうすることもできないので、しばらくはこのままだが…。
簡単に解説すると、「エコ」スキンの背景色がcontainer要素の背景色ではなく、body要素の背景色になってしまう問題を私はcontent要素の背景が透明になってしまうと解釈していた。しかし、実際はcontent要素が短く(hight=0px)なってしまっていたのである。それに伴いcontainer要素もバナーの下までの長さに短くなり、body要素の背景色が表れたのである。
さて、これだけではNetscape 7.02で閲覧する場合の問題は解決しなかった。
まず、上のように改善されたことを前提にして、次のようにスタイルを指定すると、閲覧できるようになる。
#side-a { overflow:visible; }
.articles { overflow:visible; }
要するに「#side-a { overflow:hidden; }」「.articles { overflow:hidden; }」と指定されていたのを解除するのである。
これで改善する理由は分析していない。
とにかく、まずはmain要素が終わってcontent要素が終わる前に「clear:both;」を使ってmain要素とside-a要素の「float」を解除してほしい。ちなみに、「clear:left;」や「clear:right;」では改善しない。side-a要素とmain要素の長さが逆転すると異常が生じる。確認すると面白い。
さて、私の改善方法は正しいだろうか? もしも正しくて、So-netさんが改善したのなら、「What's new?」に案内を出してほしい。実は、「.content-bottom { clear:both; }」「#side-a { overflow:visible; }」「.articles { overflow:visible; }」を指定した状態で「#content { overflow:hidden; }」を残しておくと、Netscape 7.02で正しく表示されないらしい。勘違いかもしれないが、「#content { overflow:hidden; }」に問題があるのは確かだろう。私のブログではサイドバーで指定しているので、削除しなければいけない。So-netさんが改善してくれるまでは仕方ないので残しておくが…。
追記(2006/1/3):
「#content { overflow:hidden; }」が問題だと思われる公式ブログ(一部)
→【となりのこぱんだ】【カズチャン☆ブログ】
【となりのこぱんだ】ではmain要素が終わってcontent要素が終わる前に「<br style="clear:both" />」が入っている。ちゃんと「float」が解除されている。スタイルシートを見たらcontent要素に「overflow: hidden;」を指定していた。また、「.articles」にも「overflow: hidden;」を指定している。この【となりのこぱんだ】はMacOS9.2.2のNetscape 7.02で閲覧することができない。私のブログではこのエントリーのように修正した後に「#content { overflow:hidden; }」を削除したら見られるようになった。サイドバーに関しては「#side」に「overflow: hidden;」を指定していないが、サイドバーの一部「class="rss-reader"」「id="powered"」「id="rssfeed"」だけが見える(「こまんが」も見えるが一部?)ことは私のブログの症状と同じ。これらの共通点は「class="sidebar"」でないこと。(ちゃんと確認してないが私のブログではそうだった)。私のブログでは、このエントリーで紹介している方法で改善できる。
また【カズチャン☆ブログ】はNetscape 7.02で閲覧するとサイドバーの「6.WALK ON THE UNIVERSE 」よりも下がサイドバーだけでなく本文も見えない。「id="powered"」と「id="rssfeed"」は見える。【福袋】では「class="rss-reader"」「id="powered"」「id="rssfeed"」以外は見えない。これらも私のブログで見られた症状。ソースとスタイルシートを確認すると(以下略)。
私のブログが見えない程度では改善してくれなくても、公式ブログが見えないようだと改善してくれるかな?
追記(2007/1/6):
このエントリーの作業で使っているスタイルの指定は、いまのところ次の通りです。
/* 背景の色分け */
#container { width:780px; }
#content { width:98%; background:#ffff00; margin:0px auto; }
#main { width:530px; background:#66ffff; margin:0px auto; }
#side-a { width:202px; background:#ff00ff; margin:0px auto; }
.sidebar { width:98%; background:#ffffff; margin:0px auto; }
/* スキンの改善 */
.content-bottom { clear:both; }
#content { height:auto; }
#side-a { overflow:visible; }
.articles { overflow:visible; }
/* バナーとコンテンツの隙間を無くす */
#banner { overflow:hidden; }
#header { overflow:hidden; }
「/* バナーとコンテンツの隙間を無くす */」は問題がどこにあるか不明なので別のスタイルを探している最中です。
コメント 0
コメントの受付は締め切りました