473,320 Members | 1,961 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

floating divs

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
4 2910
drhowarddrfine
7,435 Expert 4TB
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
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
7,435 Expert 4TB
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
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

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

Similar topics

0
by: Olly | last post by:
I am using the following pure css layout with a header and footer: http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM.mhtml The left column floats to the left of the main content (middle...
18
by: day | last post by:
I know I've seen this issue described before, but I can't find it, or the solution now that I need it. I have some css-specified floating divs that contain images or text. The text divs have a...
6
by: veerleverbr | last post by:
Hi, I have the following html: <div id="content"> <div id="leftpart">...</div> <div id="rightpart">...</div> </div> leftpart en rightpart are in the css set to float left. The content of...
12
by: meltedown | last post by:
I would like the floating divs to float and then the header to come after them , on the left. That's what I thought clearing the floats was for, but in this example, the header is to the right of...
1
by: StevePBurgess | last post by:
I have a website which, on the main page, has two floating divs. One contains a list of navigation menu items and the other is themain content of the page. Occasionally that div that contains...
2
by: Arnost Sobota | last post by:
Hello, Suppose I want to play with DIVs as if they were type characters. I have a series of fixed-height (width is of no importance) blocks which must follow one another from left to right, with...
3
by: kent | last post by:
Hi, For the code below, only "aaa" has a red background but "bbb" and "ccc" don't have it: <div style="background: red">aaa <div style="float:left">bbb</div> <div...
2
by: Gary | last post by:
I am new at this, css, and am having trouble doing what I want to do. I want div columns on the left and right that have a background image. Then I want a div in the center, of fixed width, with...
11
by: yawnmoth | last post by:
How do you get both of these div's to have a 100% width? (1): <div style="float: left; background: black; color: white">Hello, world! </div> <div style="clear: both; background: blue; color:...
4
dlite922
by: dlite922 | last post by:
This is just barely above my head when it comes to css. I have a div that needs to contain rows of floating divs, but I need each row not to wrap on to the next one and continue to go right. The...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.