Yuna's Tedious Talk

日々思ったことをつらつらと書いてます。


CSSハック。

センタリングレイアウトをすると、background-positionをcenter topにしても
中央にあるブロックがずれるのです。(IE6.0にて現象確認)

どういう事かというと…。



こういうコト。
センタリングのズレ

センタリングのズレ

背景に斜線をつかったものとかで、他の画像と重ねてドロップシャドウを
かけたりすると画像を部品化して組み合わせてページを作っていくことに
なるわけですが、画像を組み合わせてレイアウトしても、IEだと中央よせ
にした画像が、ウィンドウの大きさをかえたりするときにズレちゃうのです。
(上図のようなかんじで。)
Firefox,Opera,Safariだと普通なの、ちゃんと真ん中寄せになって、しっかり
背景とぴったり合うわけです。

なんでこうなるんだろーって思って調べてみたら、ようやく見つけました。

参考ソース

IEだとなぜか1pxズレてしまうらしいので、CSSに、IE用の記述を加えます。

*+html body{
padding:0 0 0 1px;
}
* html body {
padding:0 0 0 1px;
}

*+と、*と、htmlの前に記述するのがポイント。
もちろん、padding-left:1px;でもいいけど、私はpaddingなどの指定は
一括の方が好きなので…^^;

そんなわけで、リニューアル作業中のノビヨファンサイトのデザインも、
これでスッキリしたわけであります。
あとはデータを詰め込んでと…。

リニューアル作業は続きマス…。
comments (0) | trackbacks (0) | edit

posted by 由奈



Comments

コメントはありません。

Comment Form

 
emoji:
com_End


Trackbacks

トラックバックはありません。

tb_End

CALENDAR
NEW ENTRIES
CATEGORIES
RECOMMEND
【FINAL FANTASY REMIX】…
FINAL FANTASY REMIX

Music (発売日:2008-08-06)
RECENT COMMENTS
ARCHIVES
PROFILE
OTHER