I was recently working to help with a small issue where you absolutely position an element, but it shows to the right of the content in the parent element.
We wanted to be able to do this:
The following code works on FireFox, but not IE 7 or 8:
This was a quickly typed example, so please ignore the lack of quotes around things etc… 🙂
<table border=1 width="100%"> <tr> <td>testing <table style="position: absolute;" border=1> <tr> <td>Child table</td> </tr> </table> </td> </tr> </table>
But doing this does:
<table border=1 width="100%"> <tr> <td><div>testing</div> <table style="position: absolute;" border=1> <tr> <td>Child table</td> </tr> </table> </td> </tr> </table>
What seems to be happening is that the table is considered a block level element while not-absolutely positioned (If you removed the absolute positioning the table would be under the “testing” string in the table cell) but when it is absolutely positioned it is considered to be a span element in relation to it’s parent cell… Absolute will just lift the element outside of it’s container element, but keep it in the same location… unless you specify otherwise.
So by adding the div around the “testing” text you are forcing the absolutely positioned element/table underneath the “testing” text and it will be lived outside of the parent container/element at that position.