お詫びしておかなければいけないんですが。
MUTTER をCSSに切り替えた結果、IE以外のブラウザに対応できなくなってしまいました。無念。
具体的にどこが問題かというと…
FireFox/Operaなどで確認すると、
MUTTERのテキストが長い場合に、
ページフッタの上に被さって伸びて行ってしまう…のです。

IEでこれを見て問題がないのは、
中身の大きさによってブロック要素の高さを勝手に変更してしまうという
柔軟だけどある意味お節介すぎる仕様のせいです。
本来、親要素の高さ指定を具体的にしていなければ、
IE以外のブラウザでも高さを調整してくれるんですが、
MUTTER にはそうしたくない理由がありまして…

ていうのは、左側の文章は、
文章が短いときのページ内垂直配置をセンターに持ってきたい、そういう希望があるから。
文章自体は改行を含んでいるし、<div>のブロック要素なので
vertical-align(垂直配置。HTMLで言うところのvalignだが、インライン要素にしか使えない)
は使えない。
となると残る方向は、テーブルを組むしかない。
出来るだけテーブルは使いたくなかったが、この場合は仕方ない…
しかし、ここにも問題があり、テーブルを使って垂直配置する場合には、
セルに対して高さの指定が必要。
コレを指定しないと、セルの高さは内容物の高さになってしまい、
垂直配置どころではなくなる。
そしてコレを指定してしまうと、前述のはみ出し問題が発生するわけである。
うーむむむ…

このまま放置するのも良いんだけど、気付いちゃった以上気持ち悪い。なんとかしたい。
方向性としては、4つ。
1) 垂直センター配置を諦める。
2) 文章の行数を計算し、PHPで切り替え
3) overflow:scrollを設定する
4) FireFox 対応を諦める

2) の方法はまだ試していないが、改行(¥n)の数で、文章の行数を割り出し、
そこから実際のテキストのおおよその高さを割り出し、
或る一定以上の高さ(はみ出しが発生する高さ)の時はテーブルの高さを指定しない、
それ未満の時は高さをして垂直に配置する。
出来なくはないが…処理が遅くなりそうで嫌だ。
EntryのBodyだけテキストのみで保存している実現は十分可能だが。

3) のoverflowはセルにスクロールバーを付けるというもの。
デフォルトでは、overflow:visibleの為、はみ出して見えてしまうが、
overflow:scrollにしてやれば、はみ出た分はスクロールバーで調整可能…なんだけど…
ちょっと見栄え悪いよね、やっぱり。
ヘッダ、フッタとの整合性がイマイチだし。

正直に言うと、垂直配置を諦めてもいいかなぁ…とも思う。
右メニューが長くなってきてしまって、文章が短いときに
テキストがページの下の方へ行きがちだからだ。
ウィンドウサイズが小さいと、アクセス時に読めないこともあるかもしれない。
うーん…そうなんだよなぁ…
でもその場合、すかすかのテキスト下を何に利用するか、
というのもなかなか考えどころ…
ただただ、『意図のない空白』になってしまうのはちょっと。
むむむ……

【追記】
結局、上記方法の内、2) を採用してみました。
BodyとExtendの行数を配列の要素数という形で取得し、その行数によって
テーブル高さと指定あるなしを使い分けるという方向で。
FireFoxで確認しましたが、きちんと表示されるようになってますな。
ただ、行数ベースなんで、ブラウザ側でフォントの大きさを変更すると
はみ出すことがあると思います。仕方ないね。
見かけ上、問題なくなってるから良しとするか…

なお、FireFoxでもう1つ問題?を見つけてしまった…
昔から議論し尽くされてる仕様らしいのだけど、
FireFoxはIEとは違って、スクロールバーが必要ない場面では完全に消える。
なので、その分画面幅が変化してしまい、
画面に対してセンタリングしてる場合に、左右にちょこっと動いてしまう。
問題はないんだけど、ヘッダ / フッタの整合性という面では…

フレームを使えば回避できるらしいけど、それはしたくないしなぁ…
何かいい方法無いもんだろうか。

  • About

    I'm a web designer/programmer in Kyoto, Japan. Also work as a blogger, DJ.

    NOBODY:PLACE is my personal blog since 1998. Everything I'm interested in is here.

    See Also
    Other Works
    Feed
  • Recent Hatena Bookmark
  • Monthly Archives
    Categories