Hi Experts,
The height property of <div> tag is not working in IE8 where as the same code works fine in IE6 and IE7.
Please see the #document css class in attached code:
Please suggest to solve this problem.
code:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="">
<head>
<meta http-equiv=“Content-type” content=“text/html;charset=UTF-8” />
<title>
</title>
<style type="text/css">
@media screen {
body.order
{height:100%; margin:0px; color:#000000; background:#FFFFFF; width:100%; vertical-align: top;}
}
@media screen {
#document {width:100%; height:15%; overflow:auto; overflow-x:hidden; border-top:0px; margin-top: 0px; padding: 0px; }
}
.document-header {width:100%; margin: 0px; margin-left: 0px; padding: 0px; text-align:left; color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:10px; }
.header-basic, .header-itemdefault, .header-additional, .header-docflow
{margin: 0px; padding: 0px; width: 100%;}
.header-basic table.layout {margin: 0px; padding: 0px; width: 100%}
.header-basic table.layout td.col1 {margin: 0px; padding: 0px; vertical-align: top;}
.header-basic table.layout td.col2 {margin: 0px; padding: 0px; vertical-align: top; text-align: right;float:right;}
.header-general {margin: 1ex 0 0 0; padding: 0px;}
.header-general td {margin: 0px; padding: 0px;}
.header-general .identifier {text-align: left; width: 11em; vertical-align:middle; width:140px; word-wrap: normal; border-collapse: collapse; }
.header-general .identifier-multiline {width:11em; text-align:left; vertical-align:top;}
.header-general .value {padding-left: 1px; vertical-align:middle;}
.header-general img {border: 0px; width:16px; height:16px; vertical-align: -6%} /* for icons after select-boxes /
.header-general .img-1 {width:16px; height:16px; vertical-align: bottom;} / for icons after input fields /
.header-general .img-2 {width:16px; height:16px; margin-top: -3px; margin-bottom: -10px; vertical-align: -25%} / for icons after normal text */
.price-info {width: 25em; border-collapse:collapse; margin-top: 6px;}
.price-info .separator {height:0px; border-top:1px solid #000000;padding:0px;}
.price-info .identifier {width: 11em; text-align:left; vertical-align:middle; }
.price-info .identifier-1 {width: 11em; text-align:left; vertical-align:top; }
.price-info .value {text-align:right; padding-left:2px; vertical-align:top; background-color: #CCCCCC;}
.price-info .value-1 {text-align:left; padding-left:2px; vertical-align:top; }
.price-info td {margin-top:0px; border:0px; padding:2px;}
.document-items {width:100%; margin-top:5px;}
.itemlist {width:100%; border:1px solid #CDCDCD; border-collapse:collapse;
margin-left:0px; margin-top:15px; padding:0px; color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:10px;}
.itemlist th {background:#CCCCCC; border:1px solid #FFFFFF; text-align: center;
padding:3px 6px 6px 6px}
.itemlist td {border-style:solid; border-color:#CCCCCC; border-right:1px; border-left:0px;
border-bottom:0px; border-top:0px; vertical-align:middle; padding:3px; margin:0px;}
.itemlist img {width:51px; height:20px; border:0px}
</style>
</head>
<body class="order">
<div id="document"> <%-- level: sub1 --%>
<div class="document-header"> <%-- level: sub2 --%>
<div class="header-basic"> <%-- level: sub3 --%>
<table class="layout" border="0">
<tr>
<td class="col1">
<table class="header-general" summary="" border="0">
<tr>
<td class="identifier">
<label for="customerNumber"> Your Reference</label>
</td>
<td class="value"> Some reference
</td>
</tr>
<tr>
<td class="identifier">
<label for="poNumber">Your Description</label>
</td>
<td class="value">
Some description
</td>
</tr>
<tr>
<td class="identifier">
<label for="headerDescription"> Account number</label>
</td>
<td>
111212
</td>
</tr>
<tr>
<td class="identifier">Account Name</td>
<td class="value">
Account some name
</td>
</tr>
</table>
</td>
<td class="col2">
<table class="price-info" summary="" border="0">
<tr>
<td class="identifier" scope="row">Total Netprice</td>
<td class="value" >10000
</td>
</tr>
<tr>
<td class="identifier" scope="row">Freight</td>
<td class="value">10000</td>
</tr>
<tr>
<td class="identifier" scope="row">Taxes</td>
<td class="value">100</td>
</tr>
<tr>
<td colspan="2" class="separator"></td>
</tr>
<tr>
<td class="identifier" scope="row">Total Gross price</td>
<td class="value">10100</td>
</tr>
<tr>
<td class="identifier-1" scope="row">Terms of Payment</td>
<td class="terms"> 3 days </td>
</tr>
</table>
</td>
</tr>
</table> <%-- class="layout"> --%>
</div> <%-- class="header-basic"> --%>
</div> <%-- class="document-header"> --%>
<div class="document-items">
<table class="itemlist" >
<tr>
<th class="item" scope="col">Number</th>
<th class="product" scope="col">Product Number</th>
<th class="qty" scope="col">Qunantity</th>
<th class="desc" scope="col">Product Name</th>
<th class="ref-doc" scope="col">Contract</th>
<th class="qty-avail" scope="col">Available</th>
<th class="date-on" scope="col">Date</th>
<th class="price" scope="col">Price </td>
<th class="delete" scope="col">DEl</th>
</tr>
<tr>
<td> 1 </td>
<td> Name </td>
<td>300 </td>
<td> Product name </td>
<td>Contract </td>
<td>25 </td>
<td> 09/10/2010 </td>
<td> 100 </td>
<td> N </td>
</tr>
</table>
</div> <%-- class="document-items"--%>
</div> <%-- class="document"> --%>
</body>
Many Thanks,
Abdul Gafar