- 締切済み
position: relativeでIE6に余分な空白ができる
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; } －－－－－－－－－－－－－－－－－
- anygiven12
- お礼率100% (2/2)
- HTML
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
回答No.1
典型的なIEのバグですね。 よくわからないのですが、なぜ[ top: -700px; ]とされているのですか？ 通常はも兄弟要素の<div#maincontents要素>の大きさが内容によって伸縮するため、親要素である<div#outer要素>にposition: static;を指定して、その内部で div#gazou{ position: absolute; top: 0px; width: 400px; right: 0px; } だと思うのですが？？？
お礼
ご回答いただきましてありがとうございます。 教えていただきましたソースでうまくいきました。 空白が残るのはIEのバグなんですね。。。 positionについても不勉強なので、もっと精進したいと思います！