Middle div should get remaining width. Works in Firefox but not IE. Why?
Question
I have a div containing 3 divs. The div to the left and right each have their width set to 200px and the middle div should get all the remaining width. This works fine in Firefox but not in IE8 and IE9.
Can someone please tell me why this doesn't work in IE?
<html>
<body>
<div id="outercontainer" style="width:100%;overflow:hidden;">
<div class"fixedtablediv" style="width:200px;float:right;">
<table id="signtable" class="patable">
<thead>
<tr style="height: 101px;" class="headstyle" id="signtableheadtr">
<td style="text-align: left;"><b>Summa</b></td>
<td style="text-align: left;"><b>Godk. <input name="trigger" tabindex="-1" value="appr" onclick="checkAll(0, this, this.value)" type="checkbox"></b></td>
<td style="text-align: left;"><b>Spärr <input name="trigger1" tabindex="-1" value="block" onclick="checkAll(0, this, this.value)" type="checkbox"></b></td>
</tr>
</thead>
<tbody>
<tr class="rowlight">
<td style="text-align: right;">40.00</td>
<td style="text-align: left;"><input name="appr" value="0" type="checkbox"></td>
<td style="text-align: left;"><input name="block" value="0" type="checkbox"></td>
</tr>
<tr class="rowdark">
<td style="text-align: right;">32.00</td>
<td style="text-align: left;"><input name="appr" value="1" type="checkbox"></td>
<td style="text-align: left;"><input name="block" value="1" type="checkbox"></td>
</tr>
</tbody>
</table>
</div>
<div class"fixedtablediv" style="width:200px;float:left;">
<table id="nametable">
<thead id="nametablehead" style="vertical-align:bottom;">
<tr class="headstyle" id='nametableheadtr'>
<td style="text-align: left;"><a class="" href="/hrm/web?palette=0&value=&funcid=F_PAC_10"><b>Firstname</b></a></td>
<td style="text-align: left;"><a class="" href="/hrm/web?palette=0&value=&funcid=F_PAC_11"><b>Lastname</b></a></td>
<td style="text-align: left;"><a class="" href="/hrm/web?palette=0&value=&funcid=F_PAC_12"><b>Id</b></a></td>
</tr>
</thead>
<tbody>
<tr class="rowlight" onmouseover="this.style.background = '#EED';" onmouseout="this.style.background = '';">
<td style="text-align: left;">Gunnar</td><td style="text-align: left;">Svensson</td>
<td style="text-align: left;">123</td>
</tr>
<tr class="rowdark" onmouseover="this.style.background = '#EED';" onmouseout="this.style.background = '';">
<td style="text-align: left;">Sven</td>
<td style="text-align: left;">Svensson</td>
<td style="text-align: left;">789</td>
</tr>
</tbody>
</table>
</div>
<div id="scrolldiv" style="overflow:auto;margin-left:200px;margin-right:200px;">
<table id="projecttable">
<thead id="projtablehead">
<tr class="headstyle">
<td colspan="47" style="text-align: left;"><b>Projects</b></td>
</tr>
<tr class="headstyle">
<td style="text-align: left;"><b>M123-ABC DBF Proc</b></td>
<td style="text-align: left;"><b>Meetings and Reviews</b></td>
<td style="text-align: left;"><b>R9/Offertarbete Max</b></td>
<td style="text-align: left;"><b>R9/Offertarbete flights</b></td>
<td style="text-align: left;"><b>R1/ABC12 Planning & Project control</b></td>
<td style="text-align: left;"><b>RU123/ABC12 Contract Admi</b></td>
<td style="text-align: left;"><b>RU13/ABC12 Product Assurance</b></td>
<td style="text-align: left;"><b>RU121/ABC12 LS Planning</b></td>
<td style="text-align: left;"><b>RU12242/ABC12 LS execution</b></td>
<td style="text-align: left;"><b>RU11/ABC12 LS Plan and Final REP.</b></td>
<td style="text-align: left;"><b>RU52/ABC12 LS Pre and post campaign</b></td>
<td style="text-align: left;"><b>RU61/ABC12 LS Campaign Mngmt</b></td>
<td style="text-align: left;"><b>RU62/ABC12 LS Campaign execution</b></td>
<td style="text-align: left;"><b>RU29/ABC12 P/L System engineering</b></td>
<td style="text-align: left;"><b>R1/Planning&Project control</b></td>
<td style="text-align: left;"><b>R1/Contract Admi</b></td>
<td style="text-align: left;"><b>R1/Prod Assurance</b></td>
<td style="text-align: left;"><b>R1/System engineering</b></td>
<td style="text-align: left;"><b>R1/B3 mgmt</b></td>
<td style="text-align: left;"><b>R1/B3 Meetings and Reviews</b></td>
<td style="text-align: left;"><b>R1/B3 Sys Eng</b></td>
<td style="text-align: left;"><b>R1/IMP Mgmt</b></td>
<td style="text-align: left;"><b>R1/IMP Meetings and Reviews</b></td>
<td style="text-align: left;"><b>R1/IMPACHT Sys Eng</b></td>
<td style="text-align: left;"><b>R1/CD mgmt</b></td>
<td style="text-align: left;"><b>R1/CD Sys Eng</b></td>
<td style="text-align: left;"><b>RA8/Management & PA</b></td>
<td style="text-align: left;"><b>RA8/C Re-entry cone</b></td>
<td style="text-align: left;"><b>RA9/Management and PA</b></td>
<td style="text-align: left;"><b>RA95/Ext Meetings and Design Review</b></td>
<td style="text-align: left;"><b>RA9/System Engineering</b></td>
<td style="text-align: left;"><b>RA9/New TMSystem dev. t.</b></td>
<td style="text-align: left;"><b>RA9/Guidance and control system</b></td>
<td style="text-align: left;"><b>RA95/ABC proc manuf. and design</b></td>
<td style="text-align: left;"><b>RA95/assembly and test</b></td>
<td style="text-align: left;"><b>RA9/ Proc manuf. and design</b></td>
<td style="text-align: left;"><b>RA9/assembly and test</b></td>
<td style="text-align: left;"><b>RA9/INA integration and test</b></td>
<td style="text-align: left;"><b>RA9/system integration and test</b></td>
<td style="text-align: left;"><b>RA9/Fin assembly</b></td>
<td style="text-align: left;"><b>RA9/motor</b></td>
<td style="text-align: left;"><b>RA9/transport</b></td>
<td style="text-align: left;"><b>RA9/review and end to end test</b></td>
<td style="text-align: left;"><b>RA9/Prep</b></td>
<td style="text-align: left;"><b>RA9/campaign</b></td>
<td style="text-align: left;"><b>RA9/Flight Work</b></td>
<td style="text-align: left;"><b>RA9/8 Study</b></td>
</tr>
</thead>
<tbody>
<tr class="rowlight" onmouseover="this.style.background = '#EED';" onmouseout="this.style.background = '';"> <td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"><span title="2013-03-04 8.00 Projekttid 2013-03-05 4.00 Projekttid 2013-03-06 3.00 Projekttid ">15.00</span></td><td style="text-align: right;"><span title="2013-03-06 5.00 Projekttid ">5.00</span></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"><span title="2013-03-07 8.00 Projekttid ">8.00</span></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td></tr>
<tr class="rowdark" onmouseover="this.style.background = '#EED';" onmouseout="this.style.background = '';"> <td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"><span title="2013-03-04 8.00 Projekttid 2013-03-05 8.00 Projekttid ">16.00</span></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"><span title="2013-03-06 8.00 Projekttid ">8.00</span></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
1 answers
solution1
-1 ACCPTED 2013-03-22 17:47:21
Looks like you are in quirksmode . You should include a DOCTYPE declaration ie
<!DOCTYPE html>
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
CSS DIV Default width looks good in IE. Not Firefox
CSS not loading in Firefox or IE. Works in Chrome
Different rendering from Chrome and Firefox when having floated children in a floated div with no width.
Why this button works in IE but not in Firefox?
Javascript that works in Firefox and not IE…why?
Setting the “location.hash” cannot work with the partial page postback in IE. It works in FireFox
Unable to find element with id : Issue only when executing on IE. Works fine for Firefox
Div 100% height works on Firefox but not in IE
ajax type:“GET” works for firefox and chrome but not for IE
IE has different height/width for div than Firefox
Related Tags