人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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>


宜しくお願い致します。

●質問者: ruijio
●カテゴリ:ウェブ制作
✍キーワード:background H2 margin padding PX
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● GoldenDawn
●60ポイント ベストアンサー

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

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

◎質問者からの返答

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

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

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

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


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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ