こんなデザインにしたいらしい。
[参考記事] これをテーブルレイアウトからスタイルシート(CSS)レイアウトに
ところが、こんな風になってしまうらしい。
(1)センター合わせにできない。
(2)微妙に高さが合わない。
こんなときには、よく分からないのでまず背景色を消してみる。
確かに隙間があいてるねぇ。
ソースを見ると…
<table width="760" cellpadding="0" cellspacing="0" border="0">
<tr height="20">
<td><img src="img/copyright.gif" alt="コピーライト">
</td>
</tr>
</table>
<tr height="20">
<td><img src="img/copyright.gif" alt="コピーライト">
</td>
</tr>
</table>
Internet Explorerでは、画像タグの前後に半角スペースとか改行があると、隙間ができます。
修正するとこんな感じ。
<table width="760" cellpadding="0" cellspacing="0" border="0">
<tr height="20">
<td><img src="img/copyright.gif" alt="コピーライト"></td>
</tr>
</table>
<tr height="20">
<td><img src="img/copyright.gif" alt="コピーライト"></td>
</tr>
</table>
HTMLだけでのセンター合わせは、BODYタグじゃなくて、その下のテーブルタグにalign="center"を付けます。
１つポイント
画像タグにはwidthとheightを、ちゃんと指定したほうがいいです。
ブラウザの動きとして、
(1)HTML文書を読み込む
(2)画像を読み込む
(3)サイズを知る
(4)表示領域を確定する
といった感じになってしまうので、表示中がぐちゃぐちゃします。
altを指定するのは、画像が表示できなかったときのため以外にも、『目の見えない人』が『音声ブラウザ』で閲覧することがあるからです。
スペーサーでもalt=""で指定したほうがいいらしい。
