IE Oddity – Absolute table to right of parent cell content, not below

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:

testing
Child table

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.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: