
スタイルシートが開放されてはや 8 か月近く. "多少" の域をまだ出ていませんが, 今では選べるテンプレートも多くなって来ました. ところで, トップ画像まわりが不審な挙動をするのに以前から気付いていました.
しばらく前に真面目に解析して, おかしい指定がされている部分がやっと判りましたので, 参考 & 自分の備忘録として書いておきます. 症状としては, テキストの位置を変えると Mozilla でブラウズしたとき,
画像のように, トップ画像とその下のタブメニューの間に無意味な空白が空いてしまうというもの. Internet Exploer では大丈夫です.
実はこれ, みんカラのスタイルシートの書き方が悪いのだと思っていたのですが, その後色々調べていたら, 実は
Internet Explorer のバグだということが判りました. みんカラは, IE のバグに依存したスタイルシートを使ってしまっているという訳ですね (IE も 6.0 からは不具合が治っていますが, あまりにも不具合に依存したサイトが増えているため, 特定の DOCTYPE を指定したときのみ, 不具合が修正され, それ以外は不具合を残した "後方互換モード" で動作するそうです). まぁ, そういう意味ではみんカラの書き方も悪いのですが.
ちなみに, みんカラのソースでは DOCTYPE 宣言はありません
(-_-;
さて, その不具合が起きる場合とは? デフォルトの状態では大丈夫なのですが, 画像を入れるためカスタマイズしてイジっている人にはその不具合を引きずっている人も多いかと思います. つまり, スタイルシート編集において "カスタマイズ [ 上級者用 ]" を使っている方で, トップ画像を入れている方が対象となります.
見分け方. 関係するのは #Header と .BlogTitle です. スタイル編集画面で #Header・.BlogTitle を探してください. #Header に次のように padding: が入っている場合, 不具合が発生している可能性が高いと思われます.
padding:20px 0px 0px 40px;
例えばこんな感じ:
#Header {
background-image: url('...');
width: 748px;
height: 170px;
padding:20px 0px 0px 40px;
background-repeat: no-repeat;
}
.BlogTitle {
font-weight: bold;
font-size: 24px;
}
このセクションの意味を簡単に解説します. #Header は, トップ部分全体のスタイルを決めるもの. .BlogTitle はその中にある, Blog のタイトル文字列のスタイルを決めるもの. #Header の中の
padding:20px 0px 0px 40px;
は, ボックス内のテキストにどれだけのすき間を空けるかを指定するものです. スタイルシートの上下左右は訳判らん順番になっていて, それぞれ上・右・下・左のサイズです. この場合「上から 20 ピクセル, 左から 40 ピクセルのところからテキスト (.BlogTitle) を始める」という意味になります.
IE5.5 までと, IE6 の "後方互換モード" ではこの width と padding の関係の解釈にバグがあり, 正しく表示されません. みんカラは, その IE (Opera も同様動作です) に依存したスタイルシートにしてしまっているため, 逆に, 正しく解釈する Mozilla や Firefox ではずれて表示されてしまいます.
バグの詳細は先ほども紹介したページや
こちらのページに譲ります. ここではどうすれば回避出来るかを簡単に紹介します. この不具合は, width と padding を併用することによって起きるので, 上記のような指定があったら, 次のように修正します (
太字部分を追加):
#Header {
background-image: url('...');
width: 748px;
height: 170px;
/* padding:20px 0px 0px 40px; */
background-repeat: no-repeat;
}
.BlogTitle {
position: relative;
top: 20px;
left: 40px;
font-weight: bold;
font-size: 24px;
}
こうすればずれません.
Posted at 2005/11/26 04:10:16 | |
トラックバック(0) |
みんカラ