Safariの方、崩れずに３カラム化しているでしょうか？

livedoorBlogのテンプレートflower_messageのように全体を絵の枠でかこっている場合についての３カラム化についてはこちらの記事で書きましたが、背景がOpera(7.23)で少しずれてしまう件についていろいろ試してみまして１つ解決策ができました。

BODY {
BACKGROUND: url(/_img/flower_message/base.gif) repeat-y 9px top;
TEXT-ALIGN: left;
MARGIN-LEFT: 0px;
MARGIN-TOP: 0px;
\MARGIN-LEFT: 9px;
}

repeat-y をOperaでずれている分（この場合9px）開かせてます。このままだとIE(6.0)では背景が左端にくっつくので
　　\MARGIN-LEFT: 9px;
の行でIEにだけ読み込ませてIEでの見た目もずれないようにします。

しかしこれだとFireFox（0.8)で重大な欠陥があります。
最初に開いたウィンドウ内だけでしか背景をrepeatしてくれないのです。
スクロールすると背景がないのはあまりに見た目がよろしくないので repeat-y 9px top; としているところを
　　repeat-y 9px 0px;
とします。
こうするとFireFoxでも背景がrepeatされます。
しかしこれにすると今度はOperaのずれがまた出てきてしまいます。
こうなったらどっちをとるかです。
Operaのずれが許せなければ　
　　repeat-y 9px top;
FireFoxの背景がないのが許せなければ
　　repeat-y 9px 0px;
とします。
****追記****
いまOperaでFireFoxと同じくスクロールすると背景がrepeatされていませんでした。したがって
　　repeat-y 9px 0px;
とするしかないようです。なので冒頭の「Operaでのずれが解決」とあるのは撤回します。
************

なんかうまい解決策はないものでしょうか？

ところで本来の目的はこのテンプレートで３カラム化したときにMacのSafariで崩れずに見えるかどうかでした。
どうでしょうか？（しばらくこのテンプレートにしておきます）
（前回こちらで推測していた「ボックスサイズの罠」は今回ボックスの幅に関してPADDINGもBORDERも0なのでたぶん関係ありません）
（当方の動作確認環境はすべてWin2000です）

Comments

1. Posted by ちぇりあす   2004年05月22日 17:29

こんにちは、ちぇりあすです。
今safariで見ていますが、きれいに3カラム化しています。
背景も最下部まできちんと表示されています。
ただ、今度は反対にIEのほうで崩れてしまうという悲しい結果になりました...
サイドバーは背景枠の両端に期待通りに配置されていますが、本文、真ん中のカラムが画面の右端にあり、背景枠からもはみ出てしまっています。
ちなみにNetscape 7.1ではきれいに表示されています。
前回とは逆の結果のようですね。
とりあえず　報告まで。

ごめんなさい
コメント投稿がうまく行かなかったようなので上のコメント削除お願いします

2. Posted by junike   2004年05月22日 20:56

>ちぇりあすさん
確認ありがとうございました。
重複したコメントは削除しました。
真ん中のカラムである　#content に
　　margin-right: 180px;
を入れてみました。
これでだめなら、う〜ん、お手上げです。
もう１つ試すなら
　　padding-right: 180px;
とか。
手元にMacがあればすぐにでも確認できるんですけどね。
まさかそのためだけにMacを買うわけにもいかず（笑）

3. Posted by ちぇりあす   2004年05月22日 23:32

こんばんは
#contentの部分を少しいじってみました
position:relativeをposition:absoluteに変えてみたら
Macintosh環境下ではきれいに3カラムになっています
Winではまだ確認出来ていないのですが。
しばらく　flower_messageのままにしていますので
一度見にきていただけますか？
問題なく3カラムになっていればいいのですが。
よろしくお願いします

4. Posted by junike   2004年05月23日 00:14

#content の position を absolute にしても大丈夫でした。
Operaのずれの問題は残っていますがひとまずこれでよしとしましょうか。