...

View Full Version : Need to lift nested DIV above table in IE6/7



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>

Excavator
02-02-2012, 04:26 PM
Hello Jennifer84,
z-index (http://www.w3schools.com/cssref/pr_pos_z-index.asp) is only going to work on a positioned element and the bit of CSS you've provided doesn't show #layer being positioned.

We'd really need more code or a link to the site to see exactly how to do it but you could try this -
#layer {
width: 680px;
height: 300px;
top: 200px; /*adjust as needed*/
left: 200px; /*adjust as needed*/
position: absolute;
display: block;
z-index:9999;
padding:16px;
background: #f0f;
}

Here is a quick tutorial on positioning basics (http://www.barelyfitz.com/screencast/html-training/css/positioning/) that may help.

Jennifer84
02-02-2012, 05:44 PM
Thanks for the feedback, Excavator. I had actually tried with positioning, and just left the lone z-index in the example CSS by mistake. Although positioning technically works, I can't use it in this instance.

Luckily, I found that the site in question actually has a ton of other problems, which fail even worse on older browsers, so I've managed to talk the client into a complete site make-over, and won't have to deal with this issue after all. Everybody wins. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum