WinのIEはfloatを指定したボックスにmarginの値が指定してあると倍のmargin値として認識するダブルマージンバグが発症するケースが多々ある。（例えばmargin-left: 10px;なんて指定してるのに20pxのmarginになったりする。）
floatさせたボックスにmarginを指定しないようにすれば良いかもしれないけど、そんな事をやってると無駄にdivが増えてしまったりするんで、手っ取り早い解決法はそのボックスのプロパティにdisplay: inline;を与えると正常なmargin値で表示してくれる。
ただブロックレベル要素のものがインライン要素になる訳なので、Dreamweaver8上でもインライン要素でレンダリングされてしまい、marginがどのくらいかビジュアルで表示されなくなるのが残念。
div#sidebar {
float: left;
width: 20%;
margin-left: 3%;
display: inline;
}
web creators 11月号に気になる記事があった
統合ボーダーモデルでは、その名の通りボーダーが統合された状態で表示される。各ボーダーモデルはセル間を中心に表示されることになる。テーブル上下左右にはボーダーの半分がはみ出すので注意が必要だ。
今まで統合ボーダーモデルを選んだ時のtableにかかるborderはtableの外にかかるものだと思い込んでた（苦）気になったのでborder-collapseをcollapse（統合ボーダーモデル）、tableとtd,thのborderに1px solidのプロパティを与え、各ブラウザでどのように表示されるか調べてみた。
borderに1px以上のプロパティを与えてやるとWin IE6以外のブラウザは、ボーダーの半分がはみ出した。てな訳で本に書かれてたborder-collapseをseparate（分離モデル）にし、tableのborder-spacingプロパティを0、borderプロパティのright,bottomにそれぞれ値を、さらにWin IE用にHTML上tableタグのcellspacingプロパティを0、td,thのborderプロパティのleft,topにそれぞれ値を与えてあげるのが良いようだ。
メモとして一例を追記しておきます
※この記事は2006年10月3日にエントリーした内容です。2009年10月22日に新しい記事をエントリーしました。こちらも参考ください。
Movable TypeのCSSをいじってるて気がついた事。（今更？かもしれないけど）class属性は1つの要素に複数適用させる事が出来るって事。
<div class="sidebar pkg">
<p>class属性は一つの要素に複数適用させる事が出来る。</p>
<div>
こんな記述をした場合はsidebarと言うclassとpkgと言うclassの2つのclassがこのdiv要素に適用されるって事。これによってfloatを含むdiv要素なんかをclearするpkgと言う汎用性のあるclassを作っておいて適用させるなんて使い方が出来る。
今まではid属性とclass属性と言う組み合わせしかダメなのかと思ってた...これでグっと幅が広がる気がする。
今まで良く使ってたフォントの指定
body { font-family: "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif; }
このようなセットを使っていました。
Safariは2バイト文字のフォント指定に対応していない。したがってSafariでヒラギノでテキスト表示するにはHiragino Kaku Gothic Proと1バイト文字で指定してやる必要があるわけです。
しかしこのところFirefoxを使う事が多くなり、自分の構築したサイトがOsakaで表示されてる事に気づきました。逆にMac Firefoxは１バイト文字で指定したヒラギノは無視されて次のOsakaで表示していたのです。
自分のために構文チェックサイトをまとめてみた。