段組をまたまた調整。position:absoluteに再挑戦。
internet explorerとmozillaのレンダリングを比べた場合の違いをメモ。
今のところ当サイトは、#banner部分の高さを絶対指定でスタイルを固定しております。#bannerのheightを65pxとして、marginのtopとbottomを10pxずつに指定。internet explorerではその合計の85pxが#banner部分のトータルの高さとして計算されている…はず。mozillaでは、それにborderのtopとbottomを併せた8pxとpaddinの5pxを加えた、トータル98pxが#banner部分の高さとして計算されている模様。
その差13pxが表示結果に違いとしてモロに現れることになります。あー参った。多分、mozillaのレンダリングの仕方の方が正しいと思うけれども。じゃあ、それをどうやって解決すればいいかというと、ブラウザ毎の表示結果から少しづつ調整して妥協点(大して気にならない点)を見つけることで解決するという方法しか思いつきません…。もしくは、デザインを一新してborderとpaddinを0とするようなスタイルにすれば解決。
結論:やっぱりfloatが無難かと。
追記
後から上記を読み直してみて、「そりゃおかしいだろ」という考えに至り色々と実験してみました。borderの幅を無理やり30pxとかにして崩して見たり、paddingを50pxとってみたり。
その結果わかったこと。(internet explorerの表示において)
Internet explorerのレンダリングはとにかくわけがわからないです。
(#banner部分の高さに何でこんなにもこだわっているかというと、position:absoluteとtop:98pxというような指定をしているので、ブラウザのレンダリングによってのtopからの高さが不安定では困るのです。代替手段を模索中。)