#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2002
    Location
    Bay Area California
    Posts
    371
    Rep Power
    14

    Problem with CSS absolute positioning and table in IE


    My Web site utilizes a CSS template for all its pages that consists of a sidebar <div> along the left side of the screen and an absolutely positioned content area <div> for the right.

    I discovered when using a <table> in the "content" division that has a width of 100% (to fill the content area's width), IE on Windows renders this wider than the screen. All other browsers on Mac and Windows seem to handle this fine. Here is a simple HTML page to illustrate the problem:
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd"
    >
    <
    html lang="en">
    <
    head>
        <
    title>SafariBug</title>
        <
    style>
            
    #sidebar {
                
    border4px solid blue;
                
    width170px;
                
    padding3px 3px 3px 3px;
            }
            
    #content1 {
                
    positionabsolute;
                
    border4px solid green;
                 
    top8px;
                 
    left200px;
                 
    right6px;
                 
    widthauto;
            }
        </
    style>
    </
    head>
    <
    body>
        <
    div id='sidebar'>                <!-- BEGIN Sidebar Division -->
        
    Sidebar
        
    <br><br><br><br><br><br>
        </
    div>                            <!-- END Sidebar Division -->

        <
    div id="content1">             <!-- BEGIN content division -->
        <
    table width='100%' border="1" cellspacing="2" cellpadding="2">
            <
    tr>
                <
    td>Table1 Cell1</td>
            </
    tr>
        </
    table>
        </
    div>                            <!-- END content division -->
    </
    body>
    </
    html
    I desperately need a solution or workaround for this problem. I have the ability to apply seperate style sheets for different platforms and browsers, so a solution in CSS would be great! Thanks for your help.
  2. #2
  3. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    KY, USA
    Posts
    15
    Rep Power
    0
    I've had a similar problem out of IE 6.0 with a design I've been working on.

    Apparently, the tables are not inheriting the width of their parent element and instead are wanting to take their width as a percentage of the original screen width.

    I've went back and "encased" my <table>'s with 100% width divs

    PHP Code:
    <body>
        <
    div id='sidebar'>                <!-- BEGIN Sidebar Division -->
        
    Sidebar
        
    <br><br><br><br><br><br>
        </
    div>                            <!-- END Sidebar Division -->

        <
    div id="content1">             <!-- BEGIN content division -->
            <
    div style="width:100%;">
                <
    table width='100%' border="1" cellspacing="2" cellpadding="2">
                <
    tr>
                <
    td>Table1 Cell1</td>
                </
    tr>
                </
    table>
            </
    div>
        </
    div>                            <!-- END content division -->
    </
    body>
    </
    html
    So far that's worked on my design - hope it works for you!
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2002
    Location
    Bay Area California
    Posts
    371
    Rep Power
    14
    Schwarzwald, I tried your example but it did not work. IE is still drawing the table the original width of the window, not the remaining width??? Did you try the html code I posted with your fix? If it does work for you, let me know what version and platform of IE you are running. I know that IE 5.2.2 and IE 5.2.3 on the Mac do not have this problem, it seems to be limited to IE for Windows?

    I am running IE v 6.0.2800.1106xpsp1.

    Thanks for the help.
  6. #4
  7. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    KY, USA
    Posts
    15
    Rep Power
    0
    Hmm, you're right, I'm sorry bout that.
    :\

    I worked around in IE some and came up with this..it doesn't use absolute positioning but it uses CSS, at least for the solution:
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd"
    >
    <
    html lang="en">
    <
    head>
        <
    title>SafariBug</title>
        <
    style>
            
    #sidebar {
                
    border4px solid blue;
                
    width170px;
                
    padding3px 3px 3px 3px;
                
    float left;
            }
            
    #content1 {
                
    float left;
                
    margin-left 12px;
                
    border4px solid green;
            }
        </
    style>
    </
    head>
    <
    body>
        <
    div id='sidebar'>                <!-- BEGIN Sidebar Division -->
        
    Sidebar
        
    <br><br><br><br><br><br>
        </
    div>                            <!-- END Sidebar Division -->

        <
    div id="content1">             <!-- BEGIN content division -->
                <
    table width='100%' border="1" cellspacing="2" cellpadding="2">
                <
    tr>
                <
    td>Table1 Cell1</td>
                </
    tr>
                </
    table>
        </
    div>                            <!-- END content division -->
    </
    body>
    </
    html
    It works right in IE's crazy rendering engine (6.0.2600 - pre SP-1), but won't display properly in Netscape 7.1 or Opera. (I checked 'em).

    See if that works, if not, I'll go back to the drawing board.
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2002
    Location
    Bay Area California
    Posts
    371
    Rep Power
    14
    SchwarzwaldThanks again for the post. I'll try out the latest code you sent this weekend and see if that helps the situation out. Stupid thing works fine in IE on the Mac and that has been discontinued!! You'd think Microsoft could get it right on their own platform!
  10. #6
  11. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    5
    Rep Power
    0

    <td width="100">


    If your still needing a fix for your above code,
    I found <td width="100"> in your contents are works for me.
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    5
    Rep Power
    0

    ooops the above should be 100%


    <td width="100%> as well as your <table="100%"............
  14. #8
  15. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2002
    Location
    Bay Area California
    Posts
    371
    Rep Power
    14
    No, that does not work using the example code I provided, try it yourself. The problem is with IE and how it interprets the browser window width with absolutely positioned elements in CSS. Netscape on Mac and Win and Safari on Mac do not exhibit this problem.

    I still do not have a workaround other than to hardcode an exact width for the elements which is not a good fix.

IMN logo majestic logo threadwatch logo seochat tools logo