January 30, 2004
画像に隙間が出来てしまう--htmlの悪戯？
僕のもう一つのサイト、
『よしだこうすけの熱風ちゃんねる』
の方のデザインをリニューアルしようと思っていて、まだ途中なんですが。
MovableTypeのMain Indexテンプレートを修正していたわけです。
ホルダのタブを上の方につけて切りかえられるようにしようと思ったんですが、どうもうまく画像と下のブロック要素がくっついてくれない。
CSSでmarginやpaddingを色々といじるがかなわず。
こんな風だった。
左はくっついてるが、右が離れてるでしょ。
不細工だ。
だが、Operaではちゃんとくっついて表示されているのである。
IEでの見え方がまずいのである。
うーん、袋小路に入ってしまった。
そこで、はたと思い当たることが。
改行である。
どこかで“html中の改行は認識されない。正確には僅かなスペースがあく”
というような事が書いてあったのを思い出した！
確かに、ソースは分かりやすくするために改行をいれてあった。
<div class="tab">↓ <img src="http://yoshidakosuke.com/img/Tab-1.gif" border="0" alt="<$MTBlogName$>" width="300" height="30" />↓ </div>
んな感じ。
下向きの↓で改行は表示してあります。
imgタグと/divの間に改行がはさまっている。
これを
<div class="tab"><img src="http://yoshidakosuke.com/img/Tab-1.gif" border="0" alt="<$MTBlogName$>" width="300" height="30" /></div>
って直してリビルド！（再構築！）
あら！
うまくくっついたじゃぁあーりませんか。
改行はタグの中（属性と属性の間）ってのがそういえばお約束だったですね。
MovableType使うようになって、タグを使う機会が減ってとても楽になったのだが、こういうHTMLのちょっとしたTipsというかコツみたいなのも忘れてしまってますね。
こっちのNeppoh Timesの方ももうちょっとなんとかしなきゃ・・・。