2005年01月30日

CSSで写真の周りに枠を表示・・・

2005013002.gif

前からこのページで使う写真の一部にCSSで枠をつけて表示させているんですが、実はこれFirefoxでは期待通りの表示がされるんですが、IEでは表示されません。CSSではimgタグにpadding:5px;を指定し隙間をあけてborderを表示するようにしてるんですが、IEでは上図のようにpaddingの分の隙間があきません。日々是ブログ写真風画像(2)では

写真風画像IEでは白い枠が上手く表示されていないようです。padding の値が反映されていない、いろいろ調べたらseesaaのページに記述されている<?xml version="1.0" encoding="Shift_JIS"?>が原因らしい事がわかりました。

と書かれています。前からIEでの表示については気付いていたんですが、なんとかこれを実現させようと色々と実験してみました。

  • 一つ目は、imgタグをdivのブロック要素で囲い、divにmarginもしくはimgにpaddingを指定する。
  • この方法では写真の周りに隙間はあきますが、borderの横幅が親要素いっぱいにひろがってしまいました。

  • 二つ目に、一つ目の方法でさらにdiv要素をfloat:left;させて、<br clear="left"/>で回り込みを解除してみました。
  • 結果IEでもFirefoxでも画像枠は期待通りに表示されましたが、他の部分のborderが部分的に消えるという結果になりました。(ブラウザのバグ?)

  • 三つ目は、tableタグを使う方法。
  • この方法ではうまく表示されました。trタグにclass指定をし実現できます。

結局ちゃんと表示できたのはtableタグを利用した場合のみでした。しかし、画像を貼り付けるたびにtableタグを書いていたのでは大変ですし、あまりスマートなやり方ではないので、またしばらく我慢することにします。なにかいい方法ないかな〜。imgタグへのclass指定とCSSのみで実現できれば一番いいんですが・・・

posted by ksuke at 15:09| Comment(2) | TrackBack(1) | blog | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
ksukeさん
トラバありがとうございました。
私もtableタグを書くのが面倒だったので
http://densan.seesaa.net/article/153879.html
↑こんなやり方をしています。
Posted by 電算担当者 at 2005年01月30日 21:35
ありがとうございます。
写真風画像(5)まであったんですね。3までしか呼んでませんでした(笑
javascriptですか、なるほど。で、ちょっと自分なりに改造させてもらって、class="photo"のときに枠をつけるようにしてみたんですが、画像にリンクが張ってある場合にIEではリンクがきかなくなります。やっぱりaタグの中にtableタグをはさんでるからでしょうか?Firefoxでは問題ないんですが・・・
Posted by ksuke at 2005年01月30日 23:31
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

マージンとパディングの愚痴
Excerpt: マージンとパディングの設定がいまひとつうまくいかない。Firefox1.0で思い通りになっても、IE6.0ではちょこちょこズレたりする。Netscape 7.1やopera7.5では意外にも平気だった..
Weblog: memo
Tracked: 2005-02-04 22:32
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。