2007年1月の投稿

画像に枠を付けました

当サイトの画像表示を、リアルタイム旅行レポートと同様に、枠を付けてカッコイイ見栄えにしました。都合により Windows 環境でのテストができなかったので、不具合があれば連絡してくらはい。

紙焼きした写真のような見た目になって、なかなかヨサゲです。スタイルシートで img 要素に対して padding で余白を付け、border で灰色の枠線を付け、background を白にしたのですが、HTML側にも修正が入っています。本文を写真に廻り込ませるために、写真の横幅と同じピクセル数を HTML 側から style=”width:???px” と指定していたため、枠をつけたらそのサイズ分 (8ピクセル) だけ width 指定を変更してやらないといけなくなったからです。

何かスクリプトを使えば 8 ピクセル増加数値に変更するというのは可能ですが、今回はズボラして width 指定してる style 属性自体を削除することにしました。この style 属性は、Mac:IE で廻り込みを正しく見せるために必要だったのですが、それ以外のブラウザーではなくても問題ないからです。CSS の仕様としては、float される要素は横幅が指定されないといけないことになっているので、style 属性を付けるべきですが、主要なブラウザーでは省略しても問題ないので、この際削除してしまうことにしました;-) 何か問題が見つかれば、復活させるかもしれませんが。

[追記] Windows IE では画像の枠は表示されるものの、その内側にある白い余白が見えていないようです。旅行記の方では Windows IE でも余白が見えていて、スタイルシートの記述は同じようにしているつもりなんですが……。どこか記述ミスをしているような気がするので、詳しく調査してみます。ということで、Windows IE での確認をサボると不具合が見付かってしまいますね〜〜。

[さらに追記] Windows IE6 に限って期待通り見えるように修正しました。具体的にはテンプレート1行目の XML 宣言を除去して「標準準拠モード」でレンダリングさせるようにしました。IE6 には不可解なバグがあり、XHTML 文書で XML 宣言をつけてしまうと「互換モード」でレンダリングしてしまうのです。IE 5.5 以前には「標準準拠モード」が存在しないため、期待通りの描画は困難です。

コメントを残す | 上に戻る

Windows IE で本文領域が欠ける(修正ずみ)

画像に枠を付ける改良をしたつもりでしたが、Windows IE では画像の枠が意図したように見えてないようです。それだけなら大した問題ではないのですが、よく調べると、本文領域が左サイドバーの高さで途切れてしまっていて、最後まで見えていません!!

これはかなりひどい状態です。今回の改良でそうなったのか、ちょっと前からそうだったのかは不明ですが、早い目に修正したいと思います。

[追記] 修正しました。テンプレートの設計ミスで、div タグで囲む領域が間違っていたのです。id=”content” である div 要素は、id=”main と id=”sidebar” だけを囲んでいて、id=”adcolumn” は含まないようにしたつもりが、テンプレートの HTML では含んでしまっていました。スタイルシートでは、id=”content” の横幅は 772px にしてあるので、id=”adcolumn” の div 要素を含んでしまうと横幅が足りずレンダリングがおかしくなるのは当然です。

3ペイン組みで本文を中央にするデザインにおいて、HTML 的には本文を先に書くという仕様を実現するために、いろいろ技を弄してあるんですが、ミスってしまっていました。HTML での記述が、左サイドバー→本文→右サイドバーという順序ならもっと単純な設計で済むんですが。

コメントを残す | 上に戻る