テンプレート修正 IEのバグ判明

2008.03.05 水曜日

共有テンプレートのガイドラインが変更になったので、テンプレートの著作権リンクのところを、このブログのアドレスに書き換えようと思います。そこで修正するにあたって、他の気になることろも直したいと思い調べてみました。

その気になるところというのは、3カラムのテンプレートの左カラムの一番下。

IEのみ、このように最後に表示したものが、また繰り返し表示されるのです。

この下にclear要素のタグを置けば表示は消えるので、そのようにして登録していたのですが、何か他に対策はあるはず。調べてやる！と意気込んで公式のテンプレートのソースと見比べたり、一から書き直したり、検索する事1時間半。･･･さっぱり分からない。

しかし、IEのバグだから対策を書いている人がいるはず！と、検索を続けて漸くヒット。調べる単語が悪かったらしい、単純にしたらヒットしました･･･(-_-)

そこで分かったのはIEではfloatを指定すると、3pxの隙間が空いてしまうとの事。試しに左カラムの幅の数値を減らしてみたところ、－6pxで問題の表示が消えました。左カラムはfloat：leftで、メインカラムはfloat：right、なるほど－6pxとなる訳ですね。このままでは表示が変なので、余白の数値をかえて今までと同じ表示に整えました。

右カラムは問題ないけれど、こちらも同じ幅と余白の設定に変更。右カラムは下にフッターがあり、clear要素があるため繰り返し表示しないのですね（2カラムも同様）。なるほど、勉強になりました。こんな事知らないなんて、テンプレート作者としては恥なのかもしれませんが、ブログタイトル通り勉強中の身なので大目にみてやって下さいませ(′ω｀)。

それから2カラム右サイドバーのテンプレートで、今まで右カラムをfloat：leftにしていたのですが、rightが正しいようです（２カラムレイアウトの作成）。これはSeesaaがleftの設定なので、それでいいんだと思っていました。その辺も修正しておきます。

後は文字の設定。pxで設定していましたが、％にした方が良いとされています。pxだとIEではブラウザの【表示】にある、文字の大きさの変更が効きません。これは一応知ってはいたのですが、テンプレートによっては大きくすると表示が変になるところもあり、そのままでいいかなと思っていました。でも色んな利用者がいると思うので、この機会に変更します。

現在全テンプレートはこの修正のため、公開を停止しています。色々書きましたが、今までのテンプレートでも特に問題は無いと思います。もし気になるようであれば、お手数ですが再ダウンロードしてください。よろしくお願いします。