CSSについて質問です。


よくありがちな「サムネイル画像(img) + タイトル(h2) + 説明(p)」という構成をulとliを用いて実現したいのですが、

下記のソースをファイヤーフォックスで見るとOKなのですが、IE6や7で見ると、h2の部分が10数px分下に下がってしまいます。

画像とh2の上端をそろえるにはどうすればよいでしょうか?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
<style>
* {
margin:0;
padding:0;

}

ul {
width:220px;
list-style-type:none;

}

li {
background:#FFCCCC;
clear:both;
}

img {
float:left;
padding:0 5px 5px 0;
}

h4 {
font-size:14px;

}</style>
</head>

<body>
<ul>
<li>
<img src="#" width="75" height="75" alt="銀座 あいうえお" />
<h4><a href="#">銀座 あいうえお</a></h4>
<p>説明文説明文説明文説明文</p>
</li>
<li>
<img src="#" width="75" height="75" alt="渋谷 かきくけこ" />
<h4><a href="#">渋谷 かきくけこ</a></h4>
<p>説明文説明文説明文説明文</p>
</li>
</ul>
</body>
</html>


宜しくお願い致します。

回答の条件
  • 1人2回まで
  • 登録:2009/01/30 23:03:58
  • 終了:2009/02/03 17:41:11

ベストアンサー

id:GoldenDawn No.1

GoldenDawn回答回数426ベストアンサー獲得回数812009/01/31 14:17:41

ポイント60pt

記述されている HTML では h4 になっていますが……

一番手っ取り早いのは h2(4) のスタイルに display : inline を加えてやることだと思います。

id:ruijio

h4の件、すみません、記述ミスでした。

おっしゃるとおりにdisplay:inlineでうまくいきました。

自分でやった解決策はhxをフロートライトにし、widthをあたえ、text-align:leftを入れたというものです。

インライン要素に変換してしまったほうが、手っ取り早いですね。


でも、この現象はどういったことなのでしょうか。なぞですね。

2009/02/03 17:40:58

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません