Responsive Web forms/ Website for Internet Explorer 8

Question

I am trying to create a responsive website that will fit in, In any browser and screen resolution. I though that would be easy but it lead me to my wrong impression. Specially that most of the future user that i will be dealing with is using Internet Explorer 8.

My problem is when i zoom in or re - size the window, I come up with this. Please click the link to see the photo.

Tinypic image

Here is my css and HTML markup.

CSS

*
            {
                padding:0;
                margin:0;
            }

            html
            {
                overflow:auto;
            }

            html, body
            {
                margin:auto;
                width:100%;
                height:100%;
                overflow:auto;
                margin:auto;
                background:#eee;
            }

            .placeholder
            {
                color:#aaa;
            }

            .main
            {
                width:100%;
                height:100%;
                overflow:auto;

            }

            .nav
            {
                width:9%;
                min-width:9%;
                background:#111;
                text-align: center;
                position:absolute;
            }

            .panel
            {
                min-height:100%;
            }

            .nav ul
            {
                margin-top:110%;
            }

            .nav ul a
            {
                text-decoration:none;
                border:none;
            }

            a img
            {
                border:0;
                outline:none;

            }

            a:active, a:focus
            {
                outline:none;
                border:none;
            }


            .nav li
            {
                display:block;
                float:center;
                color:#fff;
                text-align:center;
            }


            .nav #logout, #add, #view, #setting
            {
                border-bottom:1px solid #3a3a3a;
            }

            .nav #add
            {
                border-top:1px solid #3a3a3a;
            }

            .nav li:hover
            {
                background:#333;

            }

            .nav li img
            {
                padding:20px 0 20px 0;
                height:55%;
                width:55%;
            }

            .nav_text
            {
                color:#777;
                font-family:helvetica;
                font-size: 70%;
                text-align:center;
                margin-top:-10px;
                text-indent:-5px;
                margin-bottom:5px;
            }

            .main_bar
            {
                display:inline-block;
                margin-right:3%;
                background:#fff;
                float:right;
                width:75%;
                border-bottom:10px solid #3498db;
                margin-top:10px;
                background:rgba(255,255,255,0.2);
                box-shadow:rgba(0,0,0,0.9) 0 1px 4px 0;
                border-bottom:10px solid #0dabc9;
                /*zoom: 1;
                filter:progid:DXImageTransform.Microsoft.Shadow(Color=#c0c0c0, Strength=8, Direction=0),
                       progid:DXImageTransform.Microsoft.Shadow(Color=#c0c0c0, Strength=8, Direction=90),
                       progid:DXImageTransform.Microsoft.Shadow(Color=#c0c0c0, Strength=8, Direction=180),
                       progid:DXImageTransform.Microsoft.Shadow(Color=#c0c0c0, Strength=8, Direction=300);
                */
            }

            .tool_bar
            {
                width:10%;
                background:#333;
                height:50%;
                float:right;
                position:relative;
                margin-right:2%;
                margin-top:10px;
                border-top:30px solid #3498db;
            }

            .second_bar
            {
                display:block;
                margin-right:15%;
                background:#fff;
                float:right;
                width:75%;
                border-bottom:10px solid #3498db;
                margin-top:10px;
                background:rgba(255,255,255,0.2);
                box-shadow:rgba(0,0,0,0.9) 0 1px 4px 0;
                border-bottom:10px solid #0dabc9;
                zoom:1;
                filter:progid:DXImageTransform.Microsoft.Shadow(Color=#c0c0c0, Strength=8, Direction=0),
                       progid:DXImageTransform.Microsoft.Shadow(Color=#c0c0c0, Strength=8, Direction=90),
                       progid:DXImageTransform.Microsoft.Shadow(Color=#c0c0c0, Strength=8, Direction=180),
                       progid:DXImageTransform.Microsoft.Shadow(Color=#c0c0c0, Strength=8, Direction=300);
            }

            .draft
            {   
                position:relative;
                font-weight:bold;
                font-size:11px;
                font-family:Helvetica;
                color:#555;
                padding:4px;

            }

            .draft span
            {
                position:absolute;
                display:inline-block;
                width:25px;
                border:1px solid #2980b9;
                padding:5px;
                border-radius:3px 0 0 3px;
                /*background:#bdc3c7;*/
                background:#2980b9;
            }

            .draft span img
            {
                vertical-align:bottom;
                width:16px;
                height:16px;
                padding:0px 5px;

            }

            .draft input[type=textbox]
            {
                /*position:absolute;*/
                border:1px solid #b0b0b0;
                border-radius:0 5px 5px 0;
                padding:5px;
                margin-left:-1px;
                width:155px;
                padding-left:45px;
            }


            .draft input[type=textbox]:focus
            {
                outline:none;
            }

HTML

<body>
                <div class = "main">
                <div class = "nav panel">
                <ul>
                <li id = "add"><a href = "#"><img src = "images/add.png"><p class = "nav_text">ADD</p></a></li>
                <li id = "view"><a href = "#"><img src = "images/add.png"><p class = "nav_text">VIEW</p></a></li>
                <li id = "setting"><a href = "#"><img src = "images/add.png"><p class = "nav_text">MAINTENANCE</p></a></li>
                <li id = "logout"><a href = "#"><img  src = "images/add.png"><p class = "nav_text">LOGOUT</p></a></li>
                </ul>
                </div>
                <div class = "tool_bar"></div>
                <div class = "main_bar">
                    <table class = "tabledraft">
                        <tr>
                        <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td>
                        <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td>
                        <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td>
                        </tr>
                        <tr>
                        <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td>
                        <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td>
                        <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td>
                        </tr>
                        <tr>
                        <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td>
                        <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td>
                        </tr>
                        <tr>
                        <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td>
                        <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td>
                        </tr>
                    </table>
                </div>

            </div>
            </body>
            </html>

Answer 1

I have seen the CSS, most of them are in % like width, but not this

.draft span
        {
            position:absolute;
            display:inline-block;
            width:25px;
            border:1px solid #2980b9;
            padding:5px;
            border-radius:3px 0 0 3px;
            /*background:#bdc3c7;*/
            background:#2980b9;
        }

where width is 25px, what exactly happens here is , when zoom-in or Out is done, 25px will remain as fixed, what i suggest is try to add it px to %, to your requirement then you wont be having any problem

NOTE

When you use css to div or td make sure the parent class is in % or px, it depend on that how you write css to chill class, its always to manage in %

check these 3 images from Chrome,IE(11) and FF

  <div id="Main">sdfasfa

        <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td>

        <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td>
        <td class = "draft"><span><img src = "images/adver.png"></span><input type = "textbox" placeholder = "Platform"></td>
        </tr>

and css for above is

#Main
{
Border:1px solid red;
height:50%;
width:70%;
background-color:silver;
}
.draft
{   

font-weight:bold;
font-size:11px;
font-family:Helvetica;
color:#555;
padding:1%;
 border:1px solid black;
width:20%;
}

.draft span
{

display:inline-block;
width:15%;
border:1px solid #2980b9;
padding:1%;
border-radius:3px 0 0 3px;
/*background:#bdc3c7;*/
background:#2980b9;
}

.draft span img
{
vertical-align:bottom;
width:5%;
height:5%;
padding:0px 5px;

}

.draft input[type=textbox]
{
/*position:absolute;*/
border:1px solid #b0b0b0;
border-radius:0 5px 5px 0;
padding:2%;
margin-left:1px;
width:65%;
padding-left:5%;
}


.draft input[type=textbox]:focus
{
    outline:none;
}