I am making a site compatable with IE8.
My site is working fine on IE7 and not working properly on IE8.(some alignments are not proper).
I have noticed the property text-align:right is not working as expected in IE8.
Could you please list the properties that are not worked as expected in IE8?
Many Thanks
Abdul
Hi Abdul do you have a link to the site so we can see the problem and maybe solution
If you want percentage height to work then you need to base it on something known which means setting html and body both to height:100%.
html,body{height:100%}
It doesn’t work in anything but IE6 and IE7. It doesn’t work in IE8, IE9, Firefox, Opera, Chrome, Safari and so on.
Hi Paul,
It is working fine with the changes you have suggested.
Many Thanks for your help.
Abdul
Hi Paul,
It is working fine after making the changes suggested by you.
Many Thanks for your help.
-Abdul Gafar
Hi Paul,
I have made changes as you suggested and it is working fine. However I have got another problem regarding the <div> tag (<div id=“document”>).
I have attached the code below:
Its height is defined as 15%. The content of this tag is displayed in scroll bar as expected in IE6 and IE7.
However if I try to run this code in IE8, the conetent is not displayed in scroll bar, as expected in IE6 or IE7.
Could you please help me in solving this problem. I need the scroll bar to be displayed in IE8 also.
Please find the 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"> --%>
</body>
Thanks in advance.
Abdul Gafar
Try this:
.price-info .separator {
[B] height:0;[/B]
border-top:1px solid #000000;
[B] padding:0[/B]
}
[B].header-basic table.price-info{float:right}[/B]
Hi Doboe,
The site which I have working is not accessible from outside.
I am attaching the code, It is working fine in IE6 and IE7.
It is not working as expected in IE8.
This code contains 2 tables; one is left aligned(the default property) and the second table is right aligned (by setting the property text-align:right in class .header-basic table.layout td.col2 )
The second table is right aligned in ie6 and ie7 and not in id8…?
The line under the Tax field also displaying a white space in ie8.
I am using this html in a frame which can be expandable.
Could you please explain how to make this code to compatable in IE8?
It is greate if you list the propeties which IE8 is not supported and the alternate solution for this?
Many Thanks in advance,
Abdul
Following is the 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:67%; 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;}
.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:1px; border-top:1px solid #000000;}
.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;}
</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="header-header"> --%>
</div> <%-- class="document"> --%>
</body>