Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder mlse's Avatar
    Join Date
    Mar 2005
    Posts
    624
    Thanks
    20
    Thanked 19 Times in 18 Posts

    Table-less Table not displaying in Mozilla

    Hi,

    I have produced a table-less table (using DIVs as opposed to a TABLE) - See code posted below.

    It displays fine in IE6, but it looks like an abomination in Mozilla! I can see why it looks like an abomination in Mozilla: It's because Mozilla correctly interprets the float bits of the lh-col and rh-col styles and displays them on-top of non-floated stuff (and does not extend the table div downwards to accomodate the rows) - so it works in IE because of a convenient bug, rather than anything else!

    My question is; how do you get it to display correctly in Mozilla too? I would also be interested to know what Firefox does with the code I have posted.

    I have tried a variation using <span> - this works fine in IE6, but again goes screwy in Mozilla, because Mozilla appears to ignore the "width" style if it is specified for a span! (grumble).

    Anyway, here's the code example - it's all there, just cut-and-paste:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
     <HTML>
      <HEAD>
        <TITLE>A Table-less Table Example</TITLE>
        <STYLE type="text/css">
          body {
          text-align:center;
          background:#000000;
          font-family:sans-serif;
          font-size:20px;
          color:#FFFF00
          }
    
          div#table {
          width:20cm;
          background:#FFFFFF;
          color:#000000;
          padding:20px 0 20px 0;
          background:#F0F0F0
          }
    
          div#row {
          padding:0 0 0 0;
          margin:0 0 0 0
          }
          
          div#lh-col {
          background:#FF9090;
          width:30%;
          float:left;
          text-align:center;
          margin:0.5% 0 0.5% 4%;
          padding:3px 0 3px 0
          }
    
          div#rh-col {
          background:#A0A0FF;
          width:30%;
          float:right;
          text-align:center;
          margin:0.5% 4% 0.5% 0;
          padding:10px 0 10px 0
          }
        </STYLE>
      </HEAD>
      <BODY>
    
        <p>HERE'S A TABLE</p>
    
        <div id="table">
          <div id="row">
    	<div id="lh-col">Left Hand Column</div>
    	<div id="rh-col">Right Hand Column</div>
          </div>
          <div id="row">
    	<div id="lh-col">Left Hand Column</div>
    	<div id="rh-col">Right Hand Column</div>
          </div>
          <div id="row">
    	<div id="lh-col">Left Hand Column</div>
    	<div id="rh-col">Right Hand Column</div>
          </div>
          <div id="row">
    	<div id="lh-col">Left Hand Column</div>
          </div>
        </div>
    
        <P>THAT WAS THE TABLE</p>
        
      </BODY>
     </HTML>
    Mike.
    Last edited by mlse; 08-15-2005 at 05:40 PM.
    Die Welt ist ein Irrenhaus und hier ist die Zentrale!

  • #2
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What's the benefit of recreating a table with divs?

    If you need to display tabular data, use a table.

    To answer your question, try a clearing element:
    Code:
    <div style="clear:both;"></div>
        </div>
    
        <P>THAT WAS THE TABLE</p>
    You're also using the same id on multiple elements when you probably want them to share a class instead.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #3
    Rockstar Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    9,074
    Thanks
    1
    Thanked 328 Times in 324 Posts
    Quote Originally Posted by mcdougals4all
    What's the benefit of recreating a table with divs?

    If you need to display tabular data, use a table.
    I agree; that is what tables are ment for. Just because they are bad to use for layouts doesn't mean they can't ever be used again in their original capacity.
    OracleGuy

  • #4
    Regular Coder mlse's Avatar
    Join Date
    Mar 2005
    Posts
    624
    Thanks
    20
    Thanked 19 Times in 18 Posts
    Well, quite.

    I was just exploring the possibilities - like doing a web page with divs in 2 columns, that kind of thing.

    Anyway, thanks for your help!

    Mike.
    Die Welt ist ein Irrenhaus und hier ist die Zentrale!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •