February 10, 2004
tableタグ卒業にむけて
サイトのデザインで目に見えないところをいじっています。具体的には、段組にtableタグをかなり使用していたんですが、それをやめてCSSにしようとしています。でも問題発生。
このサイトのおおまかなデザインは下のようなコードで実現できるはず(margin-left: auto; margin-right: auto;で中央揃えしたい)なのですが、ブラウザによっては中央にこないため、あいかわらずtableタグを使用しています。
<div style="margin-left: auto; margin-right: auto; width: 100%; height: auto;">
<div style="width: 200px; height: 100px;">BOX1</div>
<div style="width: 150px; height: 200px; float: left;">BOX2</div>
<div style="width: 50px; height: 200px; float: left;">BOX3</div>
</div>
<div style="width: 200px; height: 100px;">BOX1</div>
<div style="width: 150px; height: 200px; float: left;">BOX2</div>
<div style="width: 50px; height: 200px; float: left;">BOX3</div>
</div>
↓表示例
BOX1
BOX2
BOX3
以前JavaScriptでも感じたことですが、クロスブラウジングを実現するのは本当に大鬼門です。
そうこうしているうちにいい解説サイト、発見しました!!
コメント
コメントする
スポンサード リンク