CSSテクニックコミュのMacIE5.1でのListのfloat

質問いたします。どうぞよろしくお願いします。
添付画像の通り、リストに画像を割り当てたメニューナビを作りたいと考えています。

そこで、以下のようなソースを書きました。

----html部分----

<div id="contents">
<ul id="topmenu">
<li><img src="images/tit/ind_1.gif" alt="メニュー1" height="171" width="256" border="0"></li>
<li><img src="images/tit/ind_2.gif" alt="メニュー2" height="171" width="261" border="0"></li>
<li><img src="images/tit/ind_3.gif" alt="メニュー3" height="90" width="263" border="0"></li>
<li><img src="images/tit/ind_4.gif" alt="メニュー4" height="81" width="263" border="0"></li>
</ul>
</div>

----html部分ここまで----

----該当部CSS----

#contents {
margin: 0px;
padding: 0px }

#contents #topmenu {
margin: 10px 0px 0px;
padding: 0px;
width: 780px
}

#contents #topmenu li {
list-style-type: none;
float: left;
margin: 0px;
padding: 0px;
}

----該当部CSSここまで---

このソースで、windows用の主要なブラウザでは期待通りの表示がなされました。
が、MacIE5.1でのみ、block要素化した ulからオーバーフローしてしまい、二枚目のキャプチャ画像のようになってしまいます。

リスト表示をやめて、
ind_3.gifとind_4.gifをひとつのブロックにまとめてしまえば、期待通りの表示にはなるようですが、
できればそのような余計なdivを使わず、論理的な構成で成型したいと思っています。

何か方法がありましたら、教えてください！

コメント(7)

最初
全て
最新の40件

[1] mixiユーザー 11月24日 21:10

li に class を指定し、position ではダメですか？

[2] mixiユーザー 11月25日 00:02

マッツ様

実は、説明が足りなくて申し訳ありません。
親ブロックのid="contents"のさらに上の要素を左右autoで中央配置しているので
positionで数値をガッチリ決めることは難しいように思います。
各liに個別に指定を与える手しかないとは思うのですが…

今Mac Opera 6.3でも確認した所、overflowの仕方がちがっていたため、
他にやり方を考えなければなぁと思っていた所です（汗）
safariとFirefoxは問題ないのですがねぇ…

[3] mixiユーザー 11月25日 00:52

自分もposition指定かなと思うのですが。
Mac IEはこうゆうこじゃれたfloatは対応してくれないですよね。
もう開発も終了しただけに、あとはユーザー撲滅活動でも・・・(w

で、本題。
親のボックス(この場合はid="contents"ですね)に

position:relative;
top:0;
left:0;

を記述して、任意の子プロパティにposition:absolute;を指定すれば親divの左上(x=0,y=0)を基準に指定できますよ。

あと気になるんですが、これってoverflowっていうんでしょうか。overflowと聞くとoverflowプロパティだと思うんですけど・・・。

[4] mixiユーザー 11月25日 01:44

ざっくりーさま
お答えありがとうございます！
やっぱり、float使いばかりしているもので、positionを今ひとつ理解していないようです…

で、試してみたんですが、やはり問題ありそうな感じなのです。
やりかたがまずいのでしょうか…

----html部分---

<div id="contents">
<ul id="topmenu">
<li class="01"><img src="images/tit/ind_1.gif" alt="メニュー1" height="171" width="256" border="0"></li>
<li class="02"><img src="images/tit/ind_2.gif" alt="メニュー2" height="171" width="261" border="0"></li>
<li class="03"><img src="images/tit/ind_3.gif" alt="メニュー3" height="90" width="263" border="0"></li>
<li class="04"><img src="images/tit/ind_4.gif" alt="メニュー4" height="81" width="263" border="0"></li>
</ul>
</div>

----html部分ここまで----

----該当部CSS----

#contents {
position:relative;
top:0px;
left:0px;
}

#contents #topmenu {
margin: 10px 0px 0px;
padding: 0px;
width: 780px
}

#contents #topmenu li {
float:left;
list-style-type: none;
margin: 0px;
padding: 0px; }

#contents #topmenu li.01 {}

#contents #topmenu li.02 {}

#contents #topmenu li.03 {}

#contents #topmenu li.04 {
position:absolute;
top:90px;
left:517px;
}

---該当部CSSここまで----

以上のように書き直しmacでテストをしてみました。
safariでは期待通りの結果が得られました。
しかし、Operaでは、ind_3.gifに横並びになるようにind_4.gifがやはりはみ出てしまい、
IEは変化なしで上記の二枚目のキャプチャ通りの様子。
firefoxは大旨期待どおりですが、多分class="04"にあてた位置指定がまったく反映されていないようすです。
これはサファリでも同じことなのでしょう…

明日、またやりなおしてみます。
お二人とも、お声がけありがとうございましたー！

[5] mixiユーザー 11月25日 18:49

自分もやってみました。
.03 と .04 を float: right; にして、あと
.03 と .04 に height 指定する（firefox ズレ対処）
#topmenu に font-size: 1px; をいれる（WinIE ズレ対策）
P.S.
class属性値の最初は数字はダメじゃなかったっけ？仕様書では。
それによって指定が効かないってことではないようですけど。

[6] mixiユーザー 11月25日 21:02

ul#topmenu に position:relative を当て、
li に position:absolute で個々に個別の数値です。

なぜ #contents を親とするのですか？
ul#topmenu には width も当たっていますし問題なく動くと思いますが。

[7] mixiユーザー 11月29日 15:31

随分放置してしまいました…
申し訳ありません！が、

イチローさまとマッツさまの書かれてる方法でOKでした！
ありがとうございます！
#contents #topmenu
のほうにあてなかったのが問題のようでした。
有難うございました！

イチロー様
classの文頭数字はミスでした。他のページを作っているときにひっかかって調べたところ仕様にぶちあたりました…
ff用tipsなど細かいところをお教えくださりありがとうございます。

マッツさま
階層が深いことで自分でも混乱してたようです。
contentsは、このほかの指定に必要なためにあるオヤなのですが、
まだマークアップ自体をブラッシュアップする余地もあるようで、勉強になりました。
どうもありがとうございます。

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