CSSテクニックコミュのFire Foxで画像位置がうまく表示できないのですが・・・

こんにちは。
CSSではじめてレイアウトを組んでいるのですが、FireFoxでうまく表示できなくて困っています。（IEでは大丈夫）

下記の「example.gif」という画像なんですが、CSSで設定した位置に表示できなくて、「header_tx005.gif」の横に出てきてしまいます。
（検索ボックスと重なって）

下記ソースで原因わかる方がいらっしゃいましたら、教えてください。
どうぞ宜しくお願いいたします。

HTML////

<div id="searchArea">
<p id="searchText"><img src="img/usr/header_tx005.gif" alt="商品キーワードでさがす/感性フレーズで探す" width="150" height="50" />
<form action="/shop/goods/search.aspx" method="post">
<input name="radio" type="radio" id="radio1" value="" checked="checked"/>
<input name="radio" type="radio" value="" id="radio2"/>
<input name="keyword" type="text" id="search" />
<input type="hidden" name="search" value="x" />
</p>
<input type="image" src="http://www.yumetai.co.jp/img/usr/header_bt002.gif" alt="検索" name="Input" id="searchBtn" class="rollover" />
</form>
<div id="example"><img src="img/usr/example.gif" alt="（例）「二つ折り財布」「スタイリッシュな」" width="200" height="15" />
</div>
</div>

CSS//
* html #header #headUtility #searchArea {
height: 50px;
}

#header #headUtility #searchArea #searchText {
float: left;
vertical-align: bottom;
}

#header #headUtility #searchArea #search {
position: absolute;
top: 2px;
left: 180px;
width: 230px;
min-height: 23px;
vertical-align: top;
margin: 5px 0 0 5px;
padding-top:2px;
}

* html #header #headUtility #searchArea #search {
min-height: 0px;
height: 23px;
margin: 4px 0 0 5px;
}

*:first-child+html #header #headUtility #searchArea #search {
min-height: 19px;
}
#header #headUtility #searchArea #searchBtn {
position: absolute;
top: 2px;
left: 420px;
width: 41px;
height: 24px;
margin: 5px 0 0 5px;
}

}
#header #headUtility #searchArea #example {
position: absolute;
left: 187px;
width: 200px;
height: 15px;
bottom: 0px;
}

#header #headUtility #searchArea #radio1 {
position: absolute;
top: 0px;
left: 150px;
margin-top: 0px;
margin-right: 0;
margin-bottom: 0;
margin-left: 5px;
}

#header #headUtility #searchArea #radio2 {
position: absolute;
top: 16px;
left: 150px;
margin-top: 0px;
margin-right: 0;
margin-bottom: 0;
margin-left: 5px;
}

コメント(4)

最初
全て
最新の40件

[2] mixiユーザー 06月06日 17:29

#header #headUtility #searchArea #example　が

position: absolute; なのに、top値の指定がないですね。
だから、top:0と解釈されてこうなっているのではないかと。

[3] mixiユーザー 06月07日 11:58

マークアップはこうした方がいいのではないでしょうか。

<div id="searchArea">
<p class="searchText"><img src="img/usr/header_tx005.gif" alt="商品キーワードでさがす/感性フレーズで探す" width="150" height="50" /> </p>
<div class="searchForm">
<form action="/shop/goods/search.aspx" method="post">
～略～
</form>
</div>
<div class="example"><img src="img/usr/example.gif" alt="（例）「二つ折り財布」「スタイリッシュな」" width="200" height="15" />
</div>
</div>

position: absolute; は記述せずfloatで配置する方が自然かと思います。

[4] mixiユーザー 06月08日 00:08

searchTextに高さ指定していないのでは？firefoxの場合CSSでのボックスとかは大体高さ指定していないとそんなような現象が起こることもあります。

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