ログインしてさらにmixiを楽しもう

コメントを投稿して情報交換!
更新通知を受け取って、最新情報をゲット!

CSSテクニックコミュの相対配置したボックスの中身が表示されません…(MacIE5のみ)

  • mixiチェック
  • このエントリーをはてなブックマークに追加
相対配置したボックスの中身が表示されません…(MacIE5のみ)

色々position属性について調べたんですが、
こういった問題は載っていなかったので質問させてください。

現在、ある会社の採用サイトを作成しているのですが、
メインのボックスに対してふたつのボックスを
左側をabsolute、右側をrelativeにして
(右側が長くなるため)ボックスを配置しています。
問題は、この右側のrelativeにしたボックスの中身が表示されなくなることです。
(MacIE5のみ。Firefox、safari、winIE6では現象なし)
しかも、ボックス内のh2要素以前は表示され、そのあとの要素がすべて
表示されないのです。
ただ、このボックスを絶対配置にするとなぜか中身は表示されます。
他のブラウザでは正常に表示されているだけに、原因が分かりません…。
なにかご存知の方いましたらアドバイス頂けないでしょうか?
ちなみにソースは以下になります。

HTML
------------------------------
<div id="c-contents_box"><!-- c-contents_box -->
<div id="prof_box"><!-- prof_box -->
<h2><img src = "images/title-prof.jpg" width="420" height ="26" alt="PRO FILE -先輩社員メッセージ-" /></h2>
<div class="prof_mem"><!-- prof_mem -->
<p>
<a href="profile/index.html" title=""><img src = "images/prof-img01.jpg" width="110" height ="110" alt="" /></a>
</p>
<p>
<a href="profile/index.html" title="">□□□□<br />□□□□</a>
</p>
<p>
営業二課<br />□□□□
</p>
</div><!-- /prof_mem -->
<div class="prof_mem"><!-- prof_mem -->
<p>
<a href="profile/emura.html" title=""><img src = "images/prof-img02.jpg" width="110" height ="110" alt="" /></a>
</p>
<p>
<a href="profile/emura.html" title="">□□□□<br />□□□□</a>
</p>
<p>
営業三課<br />□□□□
</p>
</div><!-- /prof_mem -->
<div class="prof_mem"><!-- prof_mem -->
<p>
<a href="profile/suzuki.html" title=""><img src = "images/prof-img03.jpg" width="110" height ="110" alt="" /></a>
</p>
<p>
<a href="profile/suzuki.html" title="">□□□□<br />□□□□</a>
</p>
<p>
<span>営業一課<br />□□□□</span>
</p>
</div><!-- /prof_mem -->
<div class="clear"></div>
</div><!-- /prof_box -->
<div id="info_box"><!-- info_box -->
<h2><img src = "images/title-info.jpg" width="279" height ="26" alt="INFORMATION -お知らせ-" /></h2>
<dl>
<dt>[2006.4.3]</dt>
<dd>
採用サイトをアップしました。<br />
</dd>
</dl>
<p class="entry">
<a href="entry/index.html" title="エントリーはこちらから"><img src = "images/entry.gif" width="189" height ="44" alt="エントリーはこちらから" /></a>
</p>
</div><!-- /info_box -->
</div><!-- /contents-box -->


CSS
-------------------------------------
/********/
/* top css */
/********/

#prof_box{
min-height: 230px;
_height: 230px;
position: absolute;
top: 0;
left: 0;
width: 420px;
}

#prof_box .prof_mem{
float: left;
padding: 10px 15px;
width: 110px;
}

#prof_box .prof_mem p{
text-align: center;
margin-bottom: 2px;
}

#info_box{
border-left: solid 1px #333333;
position: relative;
top: 0;
left: 420px;
width: 280px;
min-height: 220px;
_height: 220px;
padding-bottom: 30px;
}

#info_box dl{
margin-left: 15px;
margin-top: 15px;
}

#info_box dl dt{
color: #DA0B02;
}

#info_box dl dd{
margin-bottom: 20px;
}

#info_box .entry{
width: 100%;
text-align: center;
}

コメント(2)

overflowを指定してみるとか?
や、当てずっぽうです。
>ginnezさん

とりあえず、相対配置から絶対配置にして
応急処置しました;;
てか、忙しくて全然ここを見れてませんでした、すいません;
いちおうあとでginnezさんの言われた方法を試してみますね!
ありがとうございました。

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

mixiユーザー
ログインしてコメントしよう!

CSSテクニック 更新情報

CSSテクニックのメンバーはこんなコミュニティにも参加しています

星印の数は、共通して参加しているメンバーが多いほど増えます。

人気コミュニティランキング