#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Posts
    4
    Rep Power
    0

    Unhappy


    Hi,

    I'm trying to setup a page on which the content is centered both horizontally and vertically. My approach:

    I use one table, set to 100% width and height and inside of it another one-cell table set to a fixed width and height. This centers the entire content of the page.

    Now, within that centered cell, I need to use DIV's as well. Below code works for me in NS (i.e. the DIV's stay aligned with the background image) but in IE, the DIV's shift vertically on resize.

    Here's the code:

    <div id="container" style="position:absolute; align=center; height:100%; width:100%">
    <center>
    <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
    <tr>
    <td width="100%" height="100%">
    <div align="center">
    <table border="0" cellpadding="0" cellspacing="0" width="750" height="479">
    <tr>
    <td background="images/bg.png">

    <div id="box1" style="position: relative; left: 40px; top: -60px;">
    <img src="images/nav1.gif" width="50" height="12"></div>
    <div id="box2" style="position: relative; left: 100px; top: -72px;">
    <img src="images/nav2.gif" width="50" height="12"></div>
    <div id="box3" style="position: relative; left: 160px; top: -84px;">
    <img src="images/nav3.gif" width="50" height="12"></div>

    </td>
    </tr>
    </table>
    </div>
    </td>
    </tr>
    </table>
    </center>
    </div>

    As far as I understand this has to do with IE's bug when using a combination of tables and relative positioning. Wonder if anyone knows a workaround WITHOUT!!! extensive JavaScript. I know it can be done with JS, but it's a rather dirty hack ...

    Any help greatly appreciated.
    Thanks
    Diego

  2. #2
  3. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Location
    Australia
    Posts
    23
    Rep Power
    0
    This might help. It will give you a layer in "around about" the center of the page.

    <div id="container" style="position:absolute; top:50%; left:50%">

    You should be able to put a smaller table/div inside this container with some negative top and left values to get the centering correct of the content...kinda like what you've been doing already.
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Posts
    4
    Rep Power
    0

    Talking


    You sure made my day!!!

    Just in case anyone is interested, here's the code:

    <div id="container" style="position:absolute; top:50%; left:50%">

    <div style="position:relative; top:-240px; left: -375px">
    <div style="position:absolute; width 750px; height 479px; top:0px; left: 0px">

    <img src="images/bg.png" width="750" height="479">
    <div id="box1" style="position: absolute; left: 250px; top: 200px; height: 300px; width: 200px;">
    <img src="images/nav1.gif" width="50" height="12"></div>
    <div id="box2" style="position: absolute; left: 100px; top: 80px;">
    <img src="images/nav2.gif" width="50" height="12"></div>
    <div id="box3" style="position: absolute; left: 160px; top: 100px;">
    <img src="images/nav3.gif" width="50" height="12"></div>

    </div>
    </div>

    </div>

    Doesn't work in Netscape ... but I couldn't care less as I already got a solution for NS.

    Thanks again!!!
    Diego

IMN logo majestic logo threadwatch logo seochat tools logo