教えてはてなダイアリー

カテゴリ*[買い物]で表示すると崩れまくります。よくわかりません。なぜですか。あとid:kimchiさんからの指摘(id:kimchi:20050421:1114078206)。これも買い物カテゴリ関連。俺のHTMLがおかしいからに違いないのですけども、何がおかしいのかがよくわからない。

MTでいうMainIndexなページだとちゃんと<div class=”hatena-asin-detail">は閉じられているのに、個別ページやカテゴリページになるとこれが閉じられなくなるという症状。コメントをはさんでいるからでしょうか。

自己回答。やはりコメントのせいでした。

<div class="hatena-asin-detail-foot"><!----></div>

このようなインチキなHTMLを、以下のように直した。

<div class="hatena-asin-detail-foot">dummy</div>

そしてCSSで hatena-asin-detail-foot というクラスを display:none; にした。これにて解決。Amazonリンク生成のXSLTも書き直さねば……。

追記：display:none だと写真がはみ出しちゃうからわざわざコメント化していたのだった……。dummyを背景と同色表示することにしまふ……。こうすると、フッター部分に妙な隙間があいてしまう。敗北感……。もっといい方法があったら是非教えてください。中身のない空のdivを作ることにものすごい抵抗を感じるところが敗北の原因だと思う。そもそも見栄えのためだけに存在する<div class="hatena-asin-detail-foot">自体が許せん。はてなのHTMLでそんなことにこだわってどうするっていう。

追記2：CSS神id:chepookaさんから回答が。div.hatena-asin-detail-footの中は空欄でよくて、よくて、よくて……よくない！ そこを素直にやれていれば、元々CSSにはclear:both;を記述してあったので何も問題は起きなかったのですけども、「空divは神をも怖れぬ究極の悪行」と祖父母から教えられてきたので、苦し紛れにコメント(<!---->)を入れたのが不具合の始まりでした。この世に存在しないもの(フッタ)をマークアップすることは俺には出来ない……。存在しないなら存在させてやればいいのです。ってもう本末転倒というか何が何やら。HTML的にもCSS的にもスマートな解答はないものでしょうか。俺はasin記法を使っていないので、HTMLを根本的に改変するのがいいような気がします。空要素を使わずに、スマートに回り込みを解除する方法を引き続き募集しております。brが最適解でしょうか。

追記3：これは素敵だ！ id:hkn:20040920#1095620727 macな人には泣いてもらおうと思います。

追記4：エクセレント！ 完全解決しました。id:chepookaさんありがとう。XSLTも書き換えて、Amazonリンク生成時に div.hatena-asin-detail-foot を吐き出さないようにした。HTMLには割とこだわるくせにCSSのValidateには全く無頓着です。