Question

This is a rather random problem. I’m using CSS3Pie to handle CSS3 compatibility in IE, but I’ve run into a snag. With PIE in a lot of cases you need to use position:relative for it to work properly in IE.

This becomes an issue when I use it on containing wrappers, as it then moves in the zero reference inside of the layout. The software we use for mapping on our sites uses an absolute position of the top left corner of the browser as its point of reference for calculating positioning. Ideally our software would be more flexible and not reliant on an absolute position like that, but that’s probably not going to change anytime soon.

So getting to my question, is it possible to somehow take an element out of the flow of the layout and refer back to the original 0,0 top left position while being contained within a relatively positioned object? I thought maybe z-index might work, but it doesn’t make the element refer back to absolute 0,0.

The most simple workaround is to not apply PIE to my wrappers, but then that also removes rounded corners and dropshadows from my layout wrapper. That isn’t the end of the world, but ideally I’d like to come up with a solution.

Answer 1

$(document).ready(function() {
    var el = $('#absolute'); // element we want to work with
    el.clone().appendTo('body'); // clone and append to body
    el.remove(); // remove element
});

This is a little improvement of Wilson Page‘s code. Tested so far only on localhost, but it did the trick. Tested with IE6/7/8 + CSS3PIE enabled.

Wanted to put this up on public webserver, but it turns out they haven’t enabled *.htc support, and when using it with PIE.php (the script provided with PIE) — it didn’t work.

Will do some more testing later on when I get back to office and start pushing system admins to enable *.htc support on server. hehe

And, I fully tested Sebastian Patane Masue‘s script, it did the job! +1 @ Sebastian.

P.S. With fully I mean with CSS3PIE enabled and properties added to actual style.

EDIT: Just gave this a one more try, and the results are pretty annoying. It works on localhost flawlessly, but is pretty bugged when viewing it remotely. Have no idea what is causing that…