position: relativeでIE6に余分な空白ができる

締切済

質問者：anygiven12
質問日時：2008/10/14 11:22
回答数：1件

position: relativeを使って、divボックスを移動させました。
が、IE6で見ると、本来そのdivが表示されるはずだった場所に空白のみが残ってしまい、困っています。（ie7、FireFox、Safariなどは大丈夫）
この空白を無くす方法をご存知の方、ご教示いただけませんでしょうか？

ソースは以下のような感じです。

－－－－－－－－－－－－－－－－－
<body>
■略■
<div id=\"outer\">
<div id=\"maincontents\">メインコンテンツが入っています。</div>
<div id=\"gazou\">メインコンテンツの右上に重ねて表示したいbox</div>
</div>
■略■
</body>

－－－－－－－－－－－－－－－－－
#gazou
{
position: relative;
top: -700px;
left: 300px;
width: 100px;
height: 200px;
background: url(images/gazou.gif) no-repeat;
}
－－－－－－－－－－－－－－－－－

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： ORUKA1951
回答日時：2008/10/14 18:12

典型的なIEのバグですね。

よくわからないのですが、なぜ[ top: -700px; ]とされているのですか？
通常はも兄弟要素の<div#maincontents要素>の大きさが内容によって伸縮するため、親要素である<div#outer要素>にposition: static;を指定して、その内部で
div#gazou{
　position: absolute;
　top: 0px;
　width: 400px;
　right: 0px;
}
だと思うのですが？？？

　