Jennifer84
02-02-2012, 12:10 AM
So, I'm working within someone else's completely messed up, antiquated website, and I have the following problem.
I have a table with two columns. In the right column, I have a DIV, which I need to move 100px to the left, overlapping the first column of the table. It works fine on all modern browsers, but, of course, I have to find a way to get it to work in IE6+7, where the DIV essentially goes below the first table column and gets cut off.
I've tried z-index on the DIV, but no joy, and I'm really not sure this is possible at all. I can't do much to the parent table.
Is this a non-starter, or does anyone have any ideas?
Here's an example of the problem:
CSS
#layer {
width: 680px;
height: 300px;
display: block;
z-index:9999;
padding:16px;
background: #f0f;
margin: 10px 0 0 -100px;
HTML
<table width="600" border="1">
<tr>
<td>Loremipsumdolorsit</td>
<td><div id="layer"></div></td>
</tr>
</table>
I have a table with two columns. In the right column, I have a DIV, which I need to move 100px to the left, overlapping the first column of the table. It works fine on all modern browsers, but, of course, I have to find a way to get it to work in IE6+7, where the DIV essentially goes below the first table column and gets cut off.
I've tried z-index on the DIV, but no joy, and I'm really not sure this is possible at all. I can't do much to the parent table.
Is this a non-starter, or does anyone have any ideas?
Here's an example of the problem:
CSS
#layer {
width: 680px;
height: 300px;
display: block;
z-index:9999;
padding:16px;
background: #f0f;
margin: 10px 0 0 -100px;
HTML
<table width="600" border="1">
<tr>
<td>Loremipsumdolorsit</td>
<td><div id="layer"></div></td>
</tr>
</table>