解決済み

position:absoluteが表示されない

  • すぐに回答を!
  • 質問No.6619799
  • 閲覧数637
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 80% (24/30)

今adobeのspryメニューバー(垂直)を使用しているのですが、
position:absoluteを設定している要素がIEだと指定した場所でなく、
右端の方に表示されてしまいます。

<ul id="MenuBar3" class="MenuBar01">
<li><a class="MenuBarItemSubmenu" href="#"><img src="●○.gif" width="240" height="45" border="0" /></a>
<ul>
<li><a href="#">項目 1.1</a></li>
<li><a href="#">項目 1.2</a></li>
<li><a href="#">項目 1.3</a></li>
</ul>
</li>
</ul><br clear="left">

ここから▼
<ul>
<li><a href="#">項目 1.1</a></li>
<li><a href="#">項目 1.2</a></li>
<li><a href="#">項目 1.3</a></li>
</ul>
ここまで▲
が、ずれてしまいます。


ul.MenuBar01
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 240px;
float: left;
}

ul.MenuBar01 li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 240px;
}

ul.MenuBar01 ul
{
margin: 0 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 210px;
left: -1000em;
top: 0;
}

色々調べ、親要素にwidth: 100%;を入れたり、position: absolute;の入ったところにclear:bothをいれたりもしたのですが、いっこうにIEが直ってくれません。

どのようにすれば正しく表示されるでしょうか?
どうぞアドバイスをお願い致します。

こちらのサイトを参考にしました。
http://jmblog.jp/archives/180
http://www.buzz727.jp/2007/12/ieabsolute.html

質問者が選んだベストアンサー

  • 回答No.1

ベストアンサー率 74% (56/75)


<ul>
<li><a href="#">項目 1.1</a></li>
<li><a href="#">項目 1.2</a></li>
<li><a href="#">項目 1.3</a></li>
</ul>
</li>
<br style="clear:both;">   <!-- ←この文を色々移動させてみる-->
</ul>

としてみて 実験してみてください。

float と position で IE6 だと absoluteの BOXが 消えてしまうバグの対処法を書きました。
お礼コメント
my_alice

お礼率 80% (24/30)

ご回答ありがとうございます。

苦戦した結果、やはりfloat: left;が問題だったようで、
float: left;をul.MenuBar01ではなく#MenuBar3につけたら何故かIEでもちゃんと見ることが出来ました。

ありがとうございました!
投稿日時 - 2011-03-28 19:13:08
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

ピックアップ

ページ先頭へ