3
I'm having trouble between IE and FF. For once, IE behaves as I would expect, but FF doesn't.
Basically I have a container with two floating DIVs in it. One floats left and the other right. I then have a table which should fill between the two floating DIVs if there is space. If there's not space, it should push down and display as a separately centered table. IE (7) behaves as I would expect, but FF seems to overlay the right side of the table into the right-floated DIV causing garbled text.
Any insights would be greatly appreciated. Html follows.
link to page: http://www.ez-order-manager.com/y.php
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test Div</title>
<style type="text/css">
#divPage div, #divPage p {
margin: 5px;
}
.fullPage {
width:98%;
/* z-index:0; */
margin: 5px 5px 5px 5px;
padding: 1px 1px 1px 1px;
border: 1px solid black;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10pt;
}
.alignRight {
text-align:right;
font-weight:bold;
}
.alignCenter {
text-align:center;
}
.alignLeft {
text-align:left;
font-weight: normal;
margin: 5px 5px 5px 20px;
}
div.clear {
clear: both;
height: 1px;
margin: 0;
padding: 0;
line-height: 1px;
font-size:1px;
}
.divOrderDetail {
text-align:center;
width:98%;
margin: 5px;
padding: 5px;
border: 1px solid #FFCC00;
color:#990000;
}
.orderDetail th {
background-color:#F4F2F3;
font-size:larger;
font-weight:bold;
color:#990000;
}
.divOrderDetail table, .orderDetail table {
margin-bottom:0;
padding-bottom:0;
margin-left:auto;
margin-right:auto;
border:0;
font-size: 8pt;
}
.orderDetail {
font-size:8pt;
}
.orderDetail td.alignLeft, .orderDetail td.alignCenter, .orderDetail td.alignRightNo Bold {
color:blue;
}
.alignRightNoBo ld {
text-align:right;
}
</style>
</head>
<body>
<div id="divPage" class="fullPage ">
<div class="divOrder Detail">
<div id="anchorEditN ames" class="orderDet ail" align="left" style="float:le ft;color:blue;" >
<span id="anchorPayIn fo" style="backgrou nd-color:#F4F2F3;t ext-align:center;fo nt-weight:bold;col or:#990000;widt h:50%;">Bill To</span><br/>
Some Guy's Name<br/> Maybe a Company<br/> 123 SomeStreet Which is a loooonnnnnggggg addresss<br/> Apt ABC<br/> SomeCity<br/> SomeState<br/> (503) 123-4567<br/> <a href="mailto:fo o@example.com"> foo@example.com </a> </div>
<div align="left" class="orderDet ail" style="float:ri ght;color:blue; ">
<span style="backgrou nd-color:#F4F2F3;t ext-align:center;fo nt-weight:bold;col or:#990000;widt h:50%;">Ship To</span><br/>
Some Guy's Name<br/> Maybe a Company<br/> 123 SomeStreet Which is a loooonnnnnggggg addresss<br/> Apt ABC<br/> SomeCity<br/> SomeState<br/> (503) 123-4567<br/> <a href="mailto:fo o@example.com"> foo@example.com </a> </div>
<table class="orderDet ail cardInfoTab" border="0" cellpadding="0" cellspacing="0" style="margin-left:auto;margi n-right:auto;bord er:1px solid #FFCC00;" >
<tr>
<td colspan="6">
<span style="backgrou nd-color:#F4F2F3;t ext-align:center;fo nt-weight:bold;col or:#990000;widt h:50%;">
Card Info
</span>
</td>
</tr>
<tr>
<td class="alignRig ht">Method:</td>
<td class="alignLef t">A Payment method</td>
<td class="alignRig ht">Card #:</td>
<td class="alignLef t">123456789012 345</td>
<td class="alignRig ht">Exp.:</td>
<td class="alignLef t">03/2008</td>
</tr>
<tr>
<td class="alignRig ht">Auth:</td>
<td class="alignLef t">Some Authorization Code</td>
<td class="alignRig ht">AVS:</td>
<td class="alignLef t">YYY</td>
<td class="alignRig ht">CVV:</td>
<td class="alignLef t">666</td>
</tr>
<tr>
<td colspan="6">
<span style="backgrou nd-color:#F4F2F3;t ext-align:center;fo nt-weight:bold;col or:#990000;widt h:50%;">
Pay Provider Info
</span>
</td>
</tr>
<tr>
<td class="alignRig ht">Auth:</td>
<td class="alignLef t">Provider Specific Auth Code</td>
<td class="alignRig ht">Tx ID:</td>
<td class="alignLef t">Some Really Long Transaction ID 1234567890</td>
<td class="alignRig ht">Merch. ID:</td>
<td class="alignLef t">123-0987</td>
</tr>
<tr>
<td class="alignRig ht">Status:</td>
<td class="alignLef t">Charged</td>
<td class="alignRig ht">BuyerID:</td>
<td class="alignLef t">Some Buyer ID</td>
<td colspan="2">&nb sp;</td>
</tr>
<tr>
<td colspan="6" class="editLink ">
<a class="editLink " href="#">edit - not here</a>
</td>
</tr>
</table>
<div class="clear">& nbsp;</div>
</div>
</div>
</body>
</html>
[/html]
