By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,739 Members | 1,059 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,739 IT Pros & Developers. It's quick & easy.

floating divs

P: 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.alignRightNoBold {
color:blue;
}
.alignRightNoBold {
text-align:right;
}

</style>
</head>

<body>
<div id="divPage" class="fullPage">

<div class="divOrderDetail">
<div id="anchorEditNames" class="orderDetail" align="left" style="float:left;color:blue;">

<span id="anchorPayInfo" style="background-color:#F4F2F3;text-align:center;font-weight:bold;color:#990000;width: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:foo@example.com">foo@example.com</a> </div>

<div align="left" class="orderDetail" style="float:right;color:blue;">
<span style="background-color:#F4F2F3;text-align:center;font-weight:bold;color:#990000;width: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:foo@example.com">foo@example.com</a> </div>

<table class="orderDetail cardInfoTab" border="0" cellpadding="0" cellspacing="0" style="margin-left:auto;margin-right:auto;border:1px solid #FFCC00;" >
<tr>
<td colspan="6">
<span style="background-color:#F4F2F3;text-align:center;font-weight:bold;color:#990000;width:50%;">
Card Info
</span>
</td>
</tr>
<tr>

<td class="alignRight">Method:</td>
<td class="alignLeft">A Payment method</td>
<td class="alignRight">Card #:</td>
<td class="alignLeft">123456789012345</td>
<td class="alignRight">Exp.:</td>
<td class="alignLeft">03/2008</td>

</tr>
<tr>
<td class="alignRight">Auth:</td>
<td class="alignLeft">Some Authorization Code</td>
<td class="alignRight">AVS:</td>
<td class="alignLeft">YYY</td>
<td class="alignRight">CVV:</td>

<td class="alignLeft">666</td>
</tr>
<tr>
<td colspan="6">
<span style="background-color:#F4F2F3;text-align:center;font-weight:bold;color:#990000;width:50%;">
Pay Provider Info
</span>
</td>
</tr>

<tr>
<td class="alignRight">Auth:</td>
<td class="alignLeft">Provider Specific Auth Code</td>
<td class="alignRight">Tx ID:</td>
<td class="alignLeft">Some Really Long Transaction ID 1234567890</td>
<td class="alignRight">Merch. ID:</td>

<td class="alignLeft">123-0987</td>
</tr>
<tr>
<td class="alignRight">Status:</td>
<td class="alignLeft">Charged</td>
<td class="alignRight">BuyerID:</td>
<td class="alignLeft">Some Buyer ID</td>

<td colspan="2">&nbsp;</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]
Apr 22 '07 #1
Share this Question
Share on Google+
4 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Your markup is far more difficult than it needs to be and combining css in the head with inline styles and deprecated markup complicates debugging further. In addition, IE, all versions, has issues with floats and margins set to auto (and floats in general). On top of that, you set some elements to a width of 98% and 50% but a browser would not know what that is a percent of; iow, you have no reference for those percentages.

Am I correct that you designed this using IE first and then tested in Firefox? Since IE7 is nine years behind web standards, that would be the backwards thing to do. Always test in a modern browser first, such as Firefox or Opera or anything but IE, then we can adjust for IEs quirks and bugs.
Apr 22 '07 #2

P: 3
I have not been able to get FF to behave correctly at all. The only way I can keep it from creating a mess is to enclose the table in a floated left div. Then, it always pushes down regardless of whether the table/div will fit in the space (not what I would like nor what I'd expect correct behavior to be).

Regarding the widths... Since they are all percentages, I'd assumed the browsers could accurately calculate the absolute widths based on the size of the window.

How would you structure this so the table lies betwen the two divs (centered) when it fits and pushes down (centered) when it doesn't. If I put a div around the table and give it an absolute width, IE then behaves the same as FF when the div/table won't fit. I.e. the right side of the table overlays the right-floated div.

Like to get some consistency. Is that possible?
Apr 22 '07 #3

drhowarddrfine
Expert 5K+
P: 7,435
I have not been able to get FF to behave correctly at all.
But it is FF, or any standards compliant browser, you should be working with first. Getting it to work in IE first but not FF just tells us something is wrong with the markup. But if it works in FF then it likely works everywhere and we only have to make adjustments for IE.
I'd assumed the browsers could accurately calculate the absolute widths based on the size of the window.
Widths are based on the size of the parent. The parent is not always the window or viewport. In some browsers, the window size must also be set. In others, they ignore it or guess at a number. IE guesses but that isn't what it's supposed to do.

If I had more time today I'd play with this but I'm in and out.
Apr 22 '07 #4

P: 3
If I had more time today I'd play with this but I'm in and out.
Usually I work strictly in FF. I was surprised this time (since I use this approach on other pages too) that I couldn't get this one to behave as I'd expect.

Any help you could provide would be appreciated. But I did want it to remain relative (to browser window) widths versus fixed.

Let me know if you come up with something that will have the table stay between the floated divs (if it fits) and will push down (centered) if it doesn't. Trying to utilize the real estate as much as possible.

Again, I appreciate any help you can provide.
Apr 23 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.