Why does my div disappear when I use position: relative in IE6?

Question

I have no fields applied to this particular div, no floats and more annoyingly it works on another page. The following is the css rule code:

#prizedraw-fliemore{ position: relative; top: 164px; left: -720px; z-index: 3000; } 

div appears when I use position: absolute, but it is useless to me. I have tried displaying, visibility and trying nothing to work. Can someone help me please? Thanks

Page Code:

 <div id="column-left-content"> <p class="height"><strong>Learn more about CAREFREE&reg; pantyliners and discover how they can help you feeling clean, fresh and protected all day long.</strong></p> </div> <div id="column-right-content"> <p><strong>Free to be me</strong> has been put together for you by the thoughtful makers of CAREFREE&reg;, who design feminine hygiene products to give you all the protection you need.<br /><br /> Now that you've reached puberty, there are things you need to know that you might not know already. CAREFREE&reg; has the answers to some of the questions you might just be asking... </p> </div> <div id="car-boxes"> <div class="car-nav"> <div class="container"> <a class='example5' href="lb/why.html" style="border:none;" rel="group"><img src="images/carefree/pantyliners.png" class="bw" style="border:none;" /></a> <img src="images/carefree/pantyliners-y.png" class="colour" alt="" /> </div> </div> <div class="car-nav"> <div class="container"> <a class='example5' href="lb/discharge.html" style="border:none;" rel="group"><img src="images/carefree/discharge.png" class="bw" style="border:none;" /></a> <img src="images/carefree/discharge-y.png" class="colour" alt="" /> </div> </div> <br /> <div class="car-nav"> <div class="container"> <a class='example5' href="lb/difference.html" style="border:none;" rel="group"><img src="images/carefree/difference.png" class="bw" style="border:none;" /></a> <img src="images/carefree/difference-y.png" class="colour" alt="" /> </div> </div> <div class="car-nav"> <div class="container"> <a class='example1' href="lb/right.html" style="border:none;" rel="group"><img src="images/carefree/right.png" class="bw" style="border:none;" /></a> <img src="images/carefree/right-y.png" class="colour" alt="" /> </div> </div> </div> <div id="prizedraw-car"> <a href="enter.php"><img src="images/prizedraw.png" alt="Read More" /></a> </div> </div> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-2268991-20"); pageTracker._trackPageview(); } catch(err) {} </script> </body> </html> 

Answer 1

My guess is that IE6 is positioning it on the screen, in other words, the point at which you think you belong to it is not what IE6 uses.

Can you do this by temporarily setting the top / left to 0px and seeing where it appeared?

EDIT - just looked at the code on one of my sites that does something similar.

It seems to me that you need to set the position: relative in the parent div, and then use the position: absolute and top / left on the child div.

Answer 2

Try setting position: relative to the parent div of the element you want to place. This sounds strange, because usually an absolute element requires a relative parent.

But I found that for older versions of IE, if you have a “disappearing relative div”, then creating its “parent sibling” can also solve some problems.

Answer 3

try removing {left: -720px;} and use the conditional stylesheet for IE. also try specifying a position relative to the parent # prizedraw-fliemore