こんにちは。Nalelu広報部のマカロンです。
いやぁ～、腰を痛めると辛いですよねぇ～。
隣のブラウニーがちょっとだけ元気になりました。
良かったね。ブラウニー！！
ちょっと安心したマカロンです。
今日の話は無駄に長いです…。
（しかもAmebaで「続きを読む」みたいなたたみ方が分からない…）
さて先日、HTMLのソースをいじる仕事が入りまして。
そこにformタグで情報を送るような修正をしておりました。
ソースを修正した後、IEやFirefoxなどでも動作確認し、
「よし、よし。これでOKさ！
」
と思い、サーバにアップしたところ、どうもFirefox4では
動かないことが判明。
6つボタンがあるところの下4つにリンクが貼られてなく
ボタンが動かないとのこと。
何故…。何故に…。IEやFirefox3.6では動いていたのに…。
その後、Chromeでも確認したら動かなかった…。るるる。
考えていてもしょうがないので、動いているところと
動いてないところの差異をとってみました。
【リンクが正常に動作するソース】
<h1 id="header">
<img src="images/1.jpg" alt="head image" usemap="#Link1" />
<map name="Link1">
<form name="form1" action="next.html" method="post">
<input type="hidden" name="code" value="AAA_01234">
<area shape="rect" coords="550,380,784,418" href="#" onclick="document.form1.submit();return false;" alt="AAA" />
</form>
</map>
</h1>
【リンクが動作しないソース】
<p class="campaign">
<img src="images/2.jpg" alt="middle image" usemap="#Link2" />
<map name="Link2">
<form name="form2" action="next.html" method="post">
<input type="hidden" name="code" value="BBB_1234">
<area shape="rect" coords="240,310,490,370" href="#" onclick="document.form2.submit();return false;" alt="BBB" />
</form>
</map>
</p>
もしかして、h1タグで囲っているのとpタグで囲っているという違い？
そこでpタグについて調べると以下のようなことが分かりました。
pタグの中にはインライン要素しか入れられません。
むむむ。
ってことは、pタグで内包出来るタグはインライン要素のみなのね。
formタグはブロックレベル要素なのね…。
なるほど、それじゃ上手く動かないよねぇ～。（文法間違ってるし！）
pタグで内包しないで、divタグで囲うことにしました。
divタグは子要素がブロックレベル、インラインでも大丈夫なので。
それでちゃんと動作するようになりました。
お勉強になりましたわぁ～。
っという訳で、また次回！ マカロンでした。