ひとつ新たに気づいたバグ（?）を備忘録として記しておこう。

floatとpaddingのバッティング系というお話。

ページトップへのリンクをCSSで調整する際に、以下のように最初書いていた。

今回はテキストでのリンクではなく、画像でリンク。

 /* ページトップ
--------------------------------------------*/
#PageTop {
    margin:0;
    padding: 0 20px 0 0;
}


#PageTop img {
　  float:right
    border: none;
}

どうやらpaddingを右に20px取ったのと、float:rightが同じ右方向で相性悪いのか、IE7でみると、この#PageTopの後で、縦に余計な余白が大きく入りこんでしまった。（FireFoxでは問題ナシ）

そこで以下のように直したら治った。

/* ページトップ
-------------------------------------------*/
#PageTop {
    margin:0;
    padding: 0 20px 0 0;
    text-align: right;
}


#PageTop img {
    border: none;
}

つまり、float:rightを消して、text-align:rightにしたら治ったわけです。

てか、書いてて思ったけど、元々の記述の仕方がダメじゃんって感じだな。float使う理由ないし…。

なぜこんな記述をしてしまったんだか…。
一発目のバグ備忘録でした。