Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need to lift nested DIV above table in IE6/7

    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>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello Jennifer84,
    z-index 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 -
    Code:
    #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 that may help.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •