アファメーションで独立・起業・夢実現。「いきなり!社長宣言!!」-“夢は口に出すことで実現する!”というアファメーション:ライブラリー

2009年2月21日

テーブルレイアウトとCSSのハイブリッドでの注意(FireFox)

夢実現のアファメーションを実践する起業家にもっとも読まれているブログは?

今更ながら引っかかったこと。

テーブルレイアウトとCSSの混在(いわゆるハイブリッド?)でサイトを作る…なんて、実際の仕事ではもうあんまりやらないけど、久々にやってみたら意外なところに落とし穴が。(ちなみに、DOCTYPEはXHTML1.0 Trandisional)

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。

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

この記事に関連する(かもしれない)書籍

 

投稿者 kuro : 2009年2月21日 02:51 | ID:794

ページトップ△

ページトップ△