floating divs

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • tbirnseth
    New Member
    • Apr 2007
    • 3
    #1

    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.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]
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      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.

        Comment

        • tbirnseth
          New Member
          • Apr 2007
          • 3
          #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?

            Comment

            • drhowarddrfine
              Recognized Expert Expert
              • Sep 2006
              • 7434
              #4
              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.

                Comment

                • tbirnseth
                  New Member
                  • Apr 2007
                  • 3
                  #5
                  Originally posted by drhowarddrfine
                  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.

                    Comment

                    Previous template Next
                    Working...