PDA

View Full Version : Position: Relative works in IE, until I resize the window!



AaronW
Aug 3rd, 2004, 01:54 PM
http://www.offtone.com/

In FireFox, that works just fine in all respects. Resize the window, and it all holds together. Now, if you do the same in IE, you'll notice that the floaters and footer remain the exact distance from the left that they started at. The only way to correct is to reload the page after you've resized.

Can anyone suggest a solution? Would be very much appreciated.

Thank you,
Aaron

Catman
Aug 3rd, 2004, 05:50 PM
Put this in your head element.


<script type="text/javascript">
<!--
onresize = function () { document.location.reload(); };
-->
</script>

AaronW
Aug 3rd, 2004, 06:11 PM
Ha, I figured someone would suggest that...

Was hoping, though, that someone would suggest an actual fix for the XHTML, or an explanation of why it's doing it and what I could do to stop it.

The reload on resize thing is rather annoying. I'd probably do something more along the lines of unhooking the stylesheet and re-hooking it to the site. No reloading, and hopefully it recalculates positions.

]|V|[agnus
Aug 3rd, 2004, 07:18 PM
Nice design. :thumbsup:

Why do those floats need position:relative anyway? Nothing is being positioned within' them, correct? Why else would you simply set position:relative but not actually offset its position?

AaronW
Aug 4th, 2004, 02:02 AM
The position: relative is neaded because they ARE positioned relative to their parents:

The floaters are sticking out -10px to the right of their parents.

The footer is shoved downward and out of its parent (to account for the rounded edges, which in CSS are a huge pain to implement... Especially with a pinstriped background :o)

]|V|[agnus
Aug 4th, 2004, 02:27 AM
...

You are offsetting the floats using margin and NOT positioning, so my comments and questions still stand.

AaronW
Aug 4th, 2004, 04:03 AM
Try removing the position rules and looking at in IE. Then you'll see what I mean :P

]|V|[agnus
Aug 4th, 2004, 08:50 AM
You mean what I meant? The solution to your problem? :D IE6 lookin' good sans position: relative...

AaronW
Aug 4th, 2004, 01:31 PM
With position: relative: http://www.offtone.com/temp.ie.with.jpg
Without position:relative: http://www.offtone.com/temp.ie.without.jpg

That's in IE6. Mozilla couldn't care less.

And no, z-index won't fix it :P