Why does my div disappear when i use position:relative in IE6? - html

Question

I have no margins applied to this particular div, no floats and more annoyingly it works on a different page. Below is the code for the css rule:
#prizedraw-fliemore{
position: relative;
top: 164px;
left: -720px;
z-index: 3000;
}
The div shows up when i use position:absolute but that is useless to me. I have tried display, visibility and nothing i try works. Can someone help me out please? Thanks
The page code is:
<div id="column-left-content">
<p class="height"><strong>Learn more about CAREFREE® 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®, 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® 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">
<img src="images/prizedraw.png" alt="Read More" />
</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 off the screen, in other words the point you think you are relative to is not the point IE6 is using.
Are you able to make it appear by temporarily setting top/left to 0px and seeing where it shows up?
EDIT - Just looked up some code on one of my sites that does something similar.
I think you need to set position:relative on the parent div then use position:absolute and top/left on the child div.

Answer 2

Try to set position: relative on the parent div of the element you want to position.
It sounds wierd, because usually an absolute element needs a relative parent.
But I found that for older versions of IE, if you have a 'disappearing relative div', then making its' parent relative as well might solve you some problems.

Answer 3

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