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

    Join Date
    Aug 2003
    Posts
    3
    Rep Power
    0

    Angry CSS and XHTML 1.1 Resize Issue (Percentage Widths) Internet Explorer


    When using css width: 100%; on the body and then using multiple elements within the body also with percentage values i've noticed that when resizing with internet explorer (on Windows XP with the refreshing while resizing) the blocks will drop sometimes, as if they're too big for the width and drop to a 'new line'.

    for example:
    2 divs within a body of 100% width, div 1 (70%), div 2 (30%) and both div's floating left, or one left and one right. While SLOWLY manually resizing Internet Explorer at certain points in the resize the div 2 (30%) will drop below the div 1, and from what i can see, for no reason at all.

    Note: I am using the most up to date version of Internet Explorer (Version: 6.0.2).

    I have also tested this on, Firebird 0.6, Mozilla 1.4x, Opera 7.11 and Konquerer 3.1.0 and NONE of these had the same resizing error.


    i have noticed this a few times before and managed to get away with losing a percentage here and there to make the page acceptable but still not how i would like it, and now it's really starting to get to me.

    The code i am working on is located at:

    http://www.cheatstreet.com/divtest/divtest3.html

    I have checked both the .html document and external style sheet for validity with www.w3c.org and both are valid (though i may have made some slight alterations since validating and pasting my code here, i don't think i altered anything to 'invalidate' the code).

    if you just want to see the code then i'll paste here:


    // BEGIN layout.css


    html
    {
    height: 100%;
    overflow: auto;
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    }

    body
    {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    height: 100%;
    background-color: #f1f1f1;
    color: #000000;
    overflow: auto;
    }

    img
    {
    border: 0;
    }

    #menu-bar
    {
    float: left;
    width: 22%;
    height: 100%;
    background-color: #f8f8f8;
    color: #000000;
    overflow: auto;
    margin: 0;
    padding: 0;
    border: 0;
    }

    #main-container
    {
    float: right;
    width: 78%;
    height: 100%;
    background-color: #ff0000;
    color: #000000;
    margin: 0;
    padding: 0;
    border: 0;
    }

    #in
    {
    margin: auto;
    width: 96%;
    height: 35%;
    background-color: #f4f4f4;
    color: #000000;
    overflow: auto;
    }

    #out
    {
    margin: auto;
    margin-bottom: 2%;
    width: 96%;
    height: 33%;
    background-color: #f8f8f8;
    color: #000000;
    overflow: auto;
    }


    // BEGIN divtest3.html


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    <head>
    <title>index</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta name="author" content="Paul" />
    <meta name="keywords" content="layout" />
    <meta name="description" content="layout design" />
    <link href="layout.css" type="text/css" rel="stylesheet" />
    </head>

    <body>


    <div id="menu-bar">
    MENU
    </div>

    <div id="main-container">

    <table cellspacing="0" cellpadding="0" style="margin: auto; border:0; padding:0; width: 96%;">
    <tr>
    <td style="height: 2%; background-color: #ffffff;">
    <table cellspacing="1" cellpadding="0" style="margin: auto; border:0; padding:0; width: 100%;">
    <tr>
    <td style="height: 2%; background-color: #cc00ee;">Test</td>
    <td style="height: 2%; background-color: #cc00ee;">Test</td>
    <td style="height: 2%; background-color: #cc00ee;">Test</td>
    <td style="height: 2%; background-color: #cc00ee;">Test</td>
    <td style="height: 2%; background-color: #cc00ee;">Test</td>
    <td style="height: 2%; background-color: #cc00ee;">Test</td>
    <td style="height: 2%; background-color: #cc00ee;">Test</td>
    <td style="height: 2%; background-color: #cc00ee;">Test</td>
    <td style="height: 2%; background-color: #cc00ee;">Test</td>
    <td style="height: 2%; background-color: #cc00ee;">Test</td>
    </tr>
    </table>
    </td>
    <td style="width: 20px; background-color: transparent;"></td>
    </tr>
    </table>

    <div id="out">
    Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1 Div1
    </div>

    <div style="clear:both; border:0; padding:0;"></div>

    <table cellspacing="0" cellpadding="0" style="margin: auto; border:0; padding:0; width: 96%;">
    <tr>
    <td style="height: 2%; background-color: #ffffff;">
    <table cellspacing="1" cellpadding="0" style="margin: auto; border:0; padding:0; width: 100%;">
    <tr>
    <td style="height: 2%; background-color: #cc00ee;">Test</td>
    <td style="height: 2%; background-color: #cc00ee;">Test</td>
    <td style="height: 2%; background-color: #cc00ee;">Test</td>
    <td style="height: 2%; background-color: #cc00ee;">Test</td>
    <td style="height: 2%; background-color: #cc00ee;">Test</td>
    <td style="height: 2%; background-color: #cc00ee;">Test</td>
    <td style="height: 2%; background-color: #cc00ee;">Test</td>
    <td style="height: 2%; background-color: #cc00ee;">Test</td>
    <td style="height: 2%; background-color: #cc00ee;">Test</td>
    <td style="height: 2%; background-color: #cc00ee;">Test</td>
    </tr>
    </table>
    </td>
    <td style="width: 20px; background-color: transparent;"></td>
    </tr>
    </table>

    <div id="in">
    Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2 Div2
    </div>

    </div>

    </body>

    </html>


    Has anyone come up with a solution?
    Last edited by Gratzy; August 21st, 2003 at 01:10 PM.
  2. #2
  3. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    3
    Rep Power
    0
    bump
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    3
    Rep Power
    0
    Had to use position: absolute; in the end with top: 0; and right: 0; and left: 0; on the relavent blocks. Kinda lame that IE messes it up because it can't handle the percentage correctly... one day Microsoft will get it right i guess.

IMN logo majestic logo threadwatch logo seochat tools logo