...

View Full Version : Table-less Table not displaying in Mozilla



mlse
08-15-2005, 04:36 PM
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:



<!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.

mcdougals4all
08-15-2005, 06:03 PM
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:

<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.

oracleguy
08-15-2005, 06:43 PM
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.

mlse
08-15-2005, 10:50 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum