Solved

Liquid layout with a css floated TABLE not working in Mozilla

Posted on 2004-10-22
511 Views
Last Modified: 2006-11-17
I have been trying (for 2 days) to create a css layout that consists of tabular data and an image aligned to the right of the entire table.  You can view the page at:

http://www.cbg.ie/testfloat1.html

I would like the table to "jump" underneath the image if the browser window is too small to fit the data and image side by side.  The page is behaving correctly in IE6/PC, but in Firefox the image overlaps the table as you decrease the size of the viewport.

I have attempted to create the layout using floated divs for the tabular data instead of a TABLE, which can be seen here:

http://www.cbg.ie/testfloat1a.html

Again this page works satisfactorily in IE6, but in Firefox it seems that it will not flow text within a floated div (see the Notes div, that jumps underneath the image immediately the photo comes in contact with it, as opposed to the text flowing within the div).  Also, I have used a <div style="clear: left"> to stack the tabular data on top of one another, (clear: both would immediately push it beneath the floated right image), but in Firefox when the data divs are pushed below the image, they do not stack correctly.  (Even though this seems to be a correct interpretation of the property!)

Basically, I will award the points to anyone who can mimic the IE6 behaviour of either page in Firefox.

0
Question by:barnakles
    15 Comments
     
    LVL 30

    Expert Comment

    by:GrandSchtroumpf
    <?xml version="1.0"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <style type="text/css">
    body {
      background: #F9F9F9;
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica, sans-serif;
    }

    .CarPicture {
      float:            right;
      padding:          10px;
    }

    .CarData {
      padding:          10px;
    }

    .LabelDet{
      width:            120px;
      font-weight:      bold;
      float:            left;

    }

    .DataDet{
      padding-left:     125px;
    }

    .RowDet{
      padding:          2px;
    }

    </style>
    <body stats=1>

    <div style="float:left;padding:10px; background-color: #FFFFFF; display:block">

      <div class="CarPicture">
        <img class="PicLarge" src="carphotos/DSC_6352.jpg" />
      </div>


      <div class="CarData">

        <div class="RowDet">
          <div class="LabelDet">
            Make:
          </div>
          <div class="DataDet">
            BMW
          </div>
        </div>


        <div class="RowDet">
          <div class="LabelDet">
            Model:
          </div>
          <div class="DataDet">
            Alpina M5
          </div>
        </div>


        <div class="RowDet">
          <div class="LabelDet">
            Engine:
          </div>
          <div class="DataDet">
            3.2 Petrol
          </div>
        </div>


        <div class="RowDet">
          <div class="LabelDet">
            Body:
          </div>
          <div class="DataDet">
            Saloon
          </div>
        </div>


        <div class="RowDet">
          <div class="LabelDet">
            Transmission:
          </div>
          <div class="DataDet">
            Tiptronic
          </div>
        </div>


        <div class="RowDet">
          <div class="LabelDet">
            Price:
          </div>
          <div class="DataDet">
            <strong>&euro;65,995</strong>
          </div>
        </div>


        <div class="RowDet">
          <div class="LabelDet">
            Notes:
          </div>
          <div class="DataDet">
            to their ad, this woud beef up these results nicely. to their ad, this woud beef up these results nicely.
          </div>
        </div>

      </div>

    <!--Data -->
    </div>

    </body>
    </html>
    0
     
    LVL 30

    Expert Comment

    by:GrandSchtroumpf
    this works fine except for an small indent (i would say 5px... just about 125-120...) of the first line in IE6.
    0
     
    LVL 30

    Expert Comment

    by:GrandSchtroumpf
    actually, the indent was only 2px and due to the RowDet padding
    use the following to correct it:

    .RowDet{
      padding:          0px;
      padding-top:      2px;
      padding-bottom:   2px;
    }
    0
     
    LVL 30

    Expert Comment

    by:GrandSchtroumpf
    forget my last comment, there's still a small indent event without the padding... i will take a look at it...
    0
     
    LVL 30

    Expert Comment

    by:GrandSchtroumpf
    and you also need to add "clear: left;" to LabelDet
    .LabelDet{
      width:            120px;
      padding:          0px;
      font-weight:      bold;
      float:            left;
      clear:            left;
    }
    0
     
    LVL 30

    Expert Comment

    by:GrandSchtroumpf
    i played a little bit with it, but could not find a way to avoid the indent in IE.
    here is my last version with sizes as 'em' for all texts (it looks better when you change the font size).  i also changed the colors and added borders to be able to see the div's size and location.

    body {
      background: silver;
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica, sans-serif;
    }

    .CarAdvert {
      padding:          10px;
      background-color: #FFFFFF;
      display:          block;
    }

    .CarPicture {
      float:            right;
      border:           1px solid black;
      width:            400px;
    }

    .CarData {
      background-color: ivory;
      border:           1px solid black;
      margin-right:     410px;
    }

    .LabelDet{
      float:            left;
      clear:            left;
      width:            9em;
      font-weight:      bold;
    }

    .DataDet{
      margin-left:      9em;
      text-indent:      0px;
    }

    .RowDet{
      margin:           .5em;
    }
    0
     

    Author Comment

    by:barnakles
    GrandSchtroumpf, thanks for your help with this - however my initial request was to code the page in such a way that allowed the Data section to jump beneath the Photo in Firefox, which is still not happening in my version (Firefox 1.0 preview release).

    Your version does perform more consistently across the 2 browsers, particularly with flowing text, which I am pleased with.  The 2 frustrating bugs in IE6 are that, when the Data Jumps beneath the Photo, the rows of text do not align properly (there seems to be a break above the text in the 2nd column).  Is this the indent error you refer to.  The indentation looks OK in my browser, including the first line.  More importantly, some text seems to go "missing" altogether from the data column.  Does this happen on yours?  (I am testing on IE6).  For example, the top row ( Make | BMW) only displays (Make:  ) when the viewport is reduced in size

    To be honest, I am not too bothered if the Data does not jump below the Photo in Firefox as it is still marginal, but if I cannot find a solution to these IE bugs I will have to revert back to my original code.  I am going to have a play with your solution to see if I can resolve them, if you have any more developments please post them.

    The code I am currently using is as follows:

     <?xml version="1.0"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <style type="text/css">
    body {
      background: silver;
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica, sans-serif;
    }

    .CarAdvert {
      padding:          10px;
      background-color: #FFFFFF;
      display:          block;
    }

    .CarPicture {
      float:            right;
      border:           1px solid black;
      width:            400px;
    }

    .CarData {
      background-color: ivory;
      border:           1px solid black;
      margin-right:     410px;
    }

    .LabelDet{
      width:            120px;
      padding:          0px;
      font-weight:      bold;
      float:            left;
      clear:            left;
    }


    .DataDet{
      margin-left:      9em;
      text-indent:      0px;
      background: red;
    }

    .RowDet{
      margin:           .5em;
    }

    </style>
    <body stats=1>

    <div style="float:left;padding:10px; background-color: #FFFFFF; display:block">

      <div class="CarPicture">
        <img class="PicLarge" src="carphotos/DSC_6352.jpg" />
      </div>


      <div class="CarData">

        <div class="RowDet">
          <div class="LabelDet">
            Make:
          </div>
          <div class="DataDet">
            BMW
          </div>
        </div>


        <div class="RowDet">
          <div class="LabelDet">
            Model:
          </div>
          <div class="DataDet">
            Alpina M5
          </div>
        </div>


        <div class="RowDet">
          <div class="LabelDet">
            Engine:
          </div>
          <div class="DataDet">
            3.2 Petrol
          </div>
        </div>


        <div class="RowDet">
          <div class="LabelDet">
            Body:
          </div>
          <div class="DataDet">
            Saloon
          </div>
        </div>


        <div class="RowDet">
          <div class="LabelDet">
            Transmission:
          </div>
          <div class="DataDet">
            Tiptronic
          </div>
        </div>


        <div class="RowDet">
          <div class="LabelDet">
            Price:
          </div>
          <div class="DataDet">
            <strong>&euro;65,995</strong>
          </div>
        </div>


        <div class="RowDet">
          <div class="LabelDet">
            Notes:
          </div>
          <div class="DataDet">
            to their ad, this woud beef up these results nicely. to their ad, this woud beef up these results nicely.
          </div>
        </div>

      </div>

    <!--Data -->
    </div>

    </body>
    </html>
    0
     
    LVL 30

    Expert Comment

    by:GrandSchtroumpf
    if i were you, i would simply use a table, the data you want to display IS tabular data.
    according to guidelines, tables should just not be used for doing page layout...
    CSS positioning is still inconsistent accross browsers (especially margins and paddings).
    0
     

    Author Comment

    by:barnakles
    Yes, I think I will - as I had done in my first example:

    http://www.cbg.ie/testfloat1.html

    Which works perfectly in IE6.  The main problems I wanted to try and address was the behaviour of this page in Firefox when the viewport is reduced:

    <li>Photo overlaps the text </li>
    <li>Table does not jump below photo (not essential)</li>

    I would certainly accept a solution based on this page that "locked" the data table at its minimum width to display the data alongside the photo.  However I have tried messing with min-width and margins with no joy.  If you have any suggestions on this I would appreciate it.
    0
     
    LVL 30

    Expert Comment

    by:GrandSchtroumpf
    sorry, i don't have much time to play with that now.
    you might want to try something with "display: inline".
    i have tested it, but then, the table does not wrap the "notes".
    setting the width of the table will work, but then you don't have the resize function

        <table class="Result" cellspacing="1" cellpadding="1">
            ...
        </table>
        <img class="PicLarge" src="carphotos/DSC_6352.jpg" style="display: inline" />

    with

    table.Result {
      background-color: #F0F0F0;
      margin-bottom: 15px;
      display: inline;
      width:300px;
      vertical-align: top;
    }
    0
     
    LVL 30

    Expert Comment

    by:GrandSchtroumpf
    hehehe, i found the solution.

    for some reason, firefox chose not to have the table wrap under the right-floating image.
    but if you add some text (or an image) before the table, it wraps as usual.
    so, what's the difference between a table and some plain text?
    the table has   "display: block;"
    while text has   "display: inline;"

    so, i tried using "display: inline;" on the table and that does the job :°)

    look at next post for full code example.
    0
     
    LVL 30

    Expert Comment

    by:GrandSchtroumpf
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <style type="text/css">

    body {
      background: #F9F9F9;
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica, sans-serif;
    }

    table.Result th {
      background-color: #FFF;
      padding: 0px 3px 0px 3px;
    }

    table.Result tr.ResultRow1 {
      background: #FFFFFF;
    }

    table.Result tr.ResultRow2 {
      background: #FCFCFC;
    }

    table.Result td {
      vertical-align:top;
      padding: 0px 8px 0px 8px;
    }

    table.Result {
      display: inline;
      background-color: #F0F0F0;
      margin-bottom: 15px;
    }

    div.CarAd {
      padding:10px;
      background-color: #FFFFFF;
    }

    div.CarImage {
      float: right;
    }

    div.CarData {
    }

    </style>
    </head>
    <body>

    <div  class="CarAd">

      <div class="CarImage">
        <img width="400" height="294" class="PicLarge" src="carphotos/DSC_6352.jpg" alt="car picture" /></div>

      <div class="CarData">
        <table class="Result" cellspacing="1" cellpadding="1">
          <tr class="ResultRow1">
            <td>Make</td>
            <td>BMW</td>
          </tr>
          <tr class="ResultRow2">
            <td>Model</td>
            <td>Alpina M5</td>
          </tr>
          <tr class="ResultRow1">
            <td>Engine</td>
            <td>3.2 Petrol</td>
          </tr>
          <tr class="ResultRow2">
            <td>Body</td>
            <td>Saloon</td>
          </tr>
          <tr class="ResultRow1">
            <td>Transmission</td>
            <td>Tiptronic</td>
          </tr>
          <tr class="ResultRow2">
            <td>Price</td>
            <td><strong>&euro;65,995</strong></td>
          </tr>
          <tr class="ResultRow1">
            <td>Year</td>
            <td>2004</td>
          </tr>
          <tr class="ResultRow2">
            <td>Colour</td>
            <td>Regal Blue</td>
          </tr>
          <tr class="ResultRow1">
            <td>Mileage</td>
            <td>12,500</td>
          </tr>
          <tr class="ResultRow2">
            <td>Doors</td>
            <td>4</td>
          </tr>
          <tr class="ResultRow1">
            <td>Notes</td>
            <td>Approx 50 words of text can appear in here, this woud beef up these results nicely.</td>
          </tr>
        </table>
      </div>

    <!--Data -->
    </div>

    </body>
    </html>
    0
     
    LVL 30

    Accepted Solution

    by:
    actually in my last post, i changed a few things from your original post

    if you take your original http://www.cbg.ie/testfloat1.html file
    and just add the "display: inline;" to the table.Result css rule, it will all work fine:

    table.Result {
      background-color: #F0F0F0;
      margin-bottom: 15px;
      display: inline;
    }

    this was so simple... but so hard to find.
    0
     

    Author Comment

    by:barnakles
    I can't believe that was all it was - thanks, it is performing perfectly in both browsers now.
    0
     
    LVL 30

    Expert Comment

    by:GrandSchtroumpf
    you are welcome.
    <:°)
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Cisco Complete Network Certification Training

    If you’re an IT engineer or technician, it's time you take your career to the next level. This elite training bundle is brimming with all of the information you need to learn to sit for Cisco CNNA, CCNP, and CCENT certification exams.

    "I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
    CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
    In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

    845 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    7 Experts available now in Live!

    Get 1:1 Help Now