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;
}