2009年5月19日アーカイブ

以前に“CSSを使って幅100%で3カラムを表示”でやったサイトで、幅を狭くしていくと IEだけ maincolumn の内容がより、表示幅が狭くなると maincolumn 全体が下に落ちてしまうことに気がついた。

そこで、maincolumn に overflow:hidden を追加して解決だと思っていたのですが、Google chrome で今日たまたまみたら、margin-right が 右側の float:rightしたブロックの左側から計算されているようで、真ん中に大きな空白が出来てしまっていた。

いろいろ、やってみるがなかなかChrome Firefox IEの表示が同じにならない。そこで一番初期の状態

#centercolumn { margin-right:350px;}

だけにしてみると、Chrome Firefox はちゃんと意図した表示がされるが、IEのみやはり表示幅を狭くしていくと、下に落ちてしまう。 これでは、IEだけに対応するしかなさそうなので、

*:first-child+html #centercolumn {  overflow:hidden; }

として、IE7のときだけ overflow:hidden が読み込まれるようにしてみた。

これでいいのだろうか? 
padding と border のブロックに対しての幅や高さの計算方法も違うし
width 、margin の AUTO設定 も ブラウザによって反応が違うのかもしれません。
overflow:hidden を入れたときの、margin の扱いも違うみたいだし。
ブラウザ 5つも並べて表示させながらやっていれば、完璧かもしれませんが、進まなくなりそうです。


ブログランキング・にほんブログ村へ 人気ブログランキングへ
ランキングに参加しています。 応援をお願いします。

結婚・結婚式・ウェディングに役立つガイド

婚約したカップルは必見!当サイトは結婚に関するお役立ち情報サイトです。結婚、結婚式、ウェディングの事前準備はもちろん、マナーや、楽しい挙式の事例などを紹介しています。

MTBlog50c3BetaInner

このアーカイブについて

このページには、2009年5月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2009年5月18日です。

次のアーカイブは2009年5月20日です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。



マイクロアドBTパートナーでおこづかいゲット!

Blog Rank

置き手紙

おきてがみで訪問の
履歴を残してください

訪問ありがとうございます!

アーカイブ

Soho's Site