CSSテクニックコミュの(IE6)border-bottomが消える

お知恵を拝借したいと思います。

添付図のh3ボックスの右下隅にコメントを入れたいと考えています。
h3は左寄せ・上下中央位置、p"genre"は右寄せ・下端傍位置テキストです。

ここで、字を大きくする or p"genre"の下端がh3の下端より上になると、
h3下のボーダーが消えます。調べた限りでは(win)IE6のみの現象です。
(win)firefox,(mac)IE5,NN7ではこの現象は起きません。

・この現象を回避する方法
・レイアウト方法がお馬鹿なので、別のp"genre"配置方法
御教示頂ければ幸いです。
ちなみに各要素のcssは以下の通りです。

body{
font-size: 91%;
font-style: normal;
font-weight: normal;
text-align: left;
letter-spacing: 0.01em;
line-height: 1.45em;
margin: 0px;}

.h3 {
font-size: 117%;
text-align: left;
height: 1.6em;
font-weight: bold;
margin: 0px;
padding-top: 0.6em;
padding-left: 15px;
border-bottom: 1px solid #606060; }

p.genre {
background-color: transparent;
font-weight: normal;
text-align: right;
margin: -1.7em 0px 1.2em 0px;/*-1.7em以下で起こる*/
padding: 0em 0.6em 0px 0px;}

p.main {
background-color: transparent;
font-weight: normal;
line-height: 150%;
text-align: left;
margin: 0em 0em 1.2em 15px ;
padding: 0em 1em 0em 0px;}

コメント(2)

最初
全て
最新の40件

[2] mixiユーザー 11月01日 00:43

>> Kaiserさん
仰る通りに新規div要素の中に両ブロックを配置し、
解決致しました。有難うございました！

ちなみにHTML（書き忘れてました）は上記御推測通りで、
h3要素のbackground,height,border等を新規div要素に移行し、
p.genreの上marginをやはりマイナスにして、
意図通りの配置となりました。

ログインすると、みんなのコメントがもっと見れるよ