<< 雪解け | main | 就任 >>

スポンサーサイト

一定期間更新がないため広告を表示しています

| - | | - | - |

画像下の余白

webデザイン。
javaだPHPだと騒ぐ前に、デザイン上のレイアウトでも四苦八苦。
それぞれのブラウザソフトによって見え方も違ってしまうし。。。。
使っているソフトを判別してcssで振り分けるという方法もあるらしいが。。。
どのソフト、OSにも共通な国際標準規格を作ってもらいたいもんだ[:ふぅ〜ん:]

そんな中。
3日ほど頭を悩ましてた現象をやっと解決。
テーブルの中に画像を入れたとき、画像の下にびみょーな空白ができたしまったのだ。
もちろんmarginもpaddingも0設定なのに!
この現象はIEで見られる。
私が確認した中ではmacのsafariでは空白は出来ないのだが。。。。

ネットで調べてもナカナカ出てこなかったが、3日目にして発見。
DOCTYPE宣言でも違うらしいが、cssの仕様のせいらしい。
そもそも画像はテキストのベースラインに揃えて表示されるからだそうだ。
画像の下に余白を作らないためには画像をベースラインに合わせずに一番下に合わせればよいということ。
cssの記述に下記を書き足せば解決♪
img { vertical-align:bottom }

思わずこの情報を載せているHPの画面に向かってありがと〜〜〜っと叫んでしまった。


JUGEMテーマ:アート・デザイン

スポンサーサイト

| - | 10:36 | - | - |

Comment

そうなんですか?
うーーーん。たしかに<TD>の後に改行しちゃってます。
改行無しでやってみますね〜
ありがとうございます!

| 通りすがりさん←usagi | 2008/08/09 5:14 AM |

実は<td><img src="sanple.jpg"></td>
と無駄な改行やスペースを一切入れず一行で書くことで解決します。

| 通りすがり | 2008/08/08 4:44 PM |

通りすがりさん。
お役に立てたようで(^ ^)
こちらも私だけじゃなかった。。。とホッとしました。

| usagi | 2008/03/23 8:22 AM |

ありがとう!!
同じくIEの馬鹿野郎!!と思いつつ
数時間これで苦戦していました。
無事解決できました、本当にありがとうございました。

| 通りすがり | 2008/03/21 10:33 PM |

どのOS、ソフトでも同じように表示する事は無理!とぐったりだよぉ。
TABLE、画像、さらに入れ子でTABLE。。。と荒技駆使中(^ ^;
エクセルのような表なんて。。。。画像にしちゃうでしょ(苦笑)

そもそも。私英語嫌い。
毎日アルファベットの羅列を見ている事がストレスなんだと最近気がついた。

| usagi | 2008/03/10 8:11 AM |

なんか懐かしい〜
綺麗に表示するのに結構苦労。ネットにはお世話になったもんだよ。
でも覚えてません(苦笑)

エクセルのような表を作らされたのが一番面倒だったかも(;^_^A

| みぃ | 2008/03/07 10:18 PM |

Submit Comment









Trackback URL

http://namida-usagi.jugem.jp/trackback/197

Trackback

Webデザインの資格について知りたい
パソコンを持っていない人でも、ネットカフェなどの普及により、大半の人がインターネットを利用してネットサーフィンをしたことはあるでしょう。

| Webデザインの資格について知りたい | 2008/06/04 10:58 AM |

パソコンでWebデザインの資格を取得する
ホームページのデザインの幅も年々広がっています。Webデザインを勉強している人も年々増加しています。それらの人はプロのWebデザイン技術をマスターしたいと思っている人であるようです。Webデザインを行うためには、イラストレーターやフォトショップといったソフト

| パソコン資格 | 2008/04/25 9:28 PM |