“テーブルレイアウトとCSSのハイブリッドでの注意（FireFox）”という、夢実現のためのアファメーション。

heightとpaddingの解釈。

例えば、ヘッダー（#header）の枠組みを2行1列のテーブルで作って、それぞれにロゴなどを配置する「#headertop」、ヘッダー画像を入れる「#headerimg」とIDを割り振る。

<table cellspacing="0" cellpadding="0" id="header">
<tr>
<td id="headertop">ヘッダートップ</td>
</tr>
<tr>
<td id="headerimg"><img src="hoge.jpg" width="780" height="300" alt="hoge" /></td>
</tr>
</table>

んで、CSSを以下のように設定。

#header {
width: 780px;
height: 380px;
}

#headertop {
background: #999999;
width: 760px;
height: 60px;
padding: 10px;
}

#headerimg {
width: 780px;
height: 300px;
background: #00FFCC;
}

要は、headertop（headerの中のtd）にpaddingを10px設定したいので、その分heightから20pxマイナスして60pxに。
つまり、全体の高さは380pxで、内側のtdの高さ（padding含む）の合計も380px。

計算は合ってるし、IEではそのとおりに表示されるので問題ないと思ったら、FFでheaderimgを設定したセル（td）に変な隙間が。

どうやら、headertopのpaddingが解釈されずに、heightが60pxになってしまい、計算が合わなくなっているみたい。

回避方法

回避策は、以下のように#headertopに「display: block;」を指定するとOK。

#headertop {
background: #999999;
width: 760px;
height: 60px;
padding: 10px;
display: block;
}

こうするとtdが強制的にブロックレベル要素になり、ちゃんとpaddingを認識して60px＋10pxで80pxになる模様。

これが正しいのかどうかまだ未確認だけど、IE、FFどちらでも同じように表示されているので、たぶんOK。

※いろいろと調べたけど、解決方法が見つからなかったので備忘録として。

アファメーションの宝庫！→あの独立・起業ネタの情報ランキング！