Tables vs. CSS - Need advice

J

Jens Lenge

Hello world,

I play around with a table based layout
(http://www.photoss.de/test/layout-table.htm). It works perfectly with
Firefox, but shows some problems with Internet Explorer 6 which are
described on the webpage.

First, I would like to make the layout work for both Firefox and IE6.

Second, I have heard that CSS based layouts should be preferred over table
based ones. I tried to create a CSS based layout that looks the same and
behaves in the same way. I tried a number of approaches that I found on the
web, but up to now I couldn't find a CSS solution that really look and
behaves like the table.

Maybe someone can give me some hints that push me in the right direction?

Regards, Jens
 
B

Big Bill

Hello world,

I play around with a table based layout
(http://www.photoss.de/test/layout-table.htm). It works perfectly with
Firefox, but shows some problems with Internet Explorer 6 which are
described on the webpage.

First, I would like to make the layout work for both Firefox and IE6.

Second, I have heard that CSS based layouts should be preferred over table
based ones. I tried to create a CSS based layout that looks the same and
behaves in the same way. I tried a number of approaches that I found on the
web, but up to now I couldn't find a CSS solution that really look and
behaves like the table.

Maybe someone can give me some hints that push me in the right direction?

Regards, Jens

If you need the effect of a table, use a table. I think a lot of this
has come about from people thinking you can use css to make a table.
You can't, them's different animals. They behave different. So if you
need something that walks like a table, talks like a table, etc., use
a table.

BB
 
M

mscir

Jens said:
Hello world,
I play around with a table based layout
(http://www.photoss.de/test/layout-table.htm). It works perfectly with
Firefox, but shows some problems with Internet Explorer 6 which are
described on the webpage.
First, I would like to make the layout work for both Firefox and IE6.
Second, I have heard that CSS based layouts should be preferred over
table based ones. I tried to create a CSS based layout that looks the
same and behaves in the same way. I tried a number of approaches that I
found on the web, but up to now I couldn't find a CSS solution that
really look and behaves like the table.
Maybe someone can give me some hints that push me in the right direction?
Regards, Jens

How about something like this, it renders the same in my IE 6, Netscape
7.2, Firefox 1.0.1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Table Layout</title>
<style type="text/css">
body{
background-color: #000000;
padding: 0;
margin: 0;
border: 0;
font-family: "Times New Roman", Times, serif;
font-size: 1em;
width: 100%;
}

..wrapper{
margin: 0;
padding: 0;
border: 5px solid #000000;
background-color: #CCCCCC;
}
..left{
float: left;
background-color: #CCCCCC;
width: 120px;
padding: 5px;
}
..top{
margin: 0 0 0 130px;
background-color: #999999;
padding: 5px;
text-align: right;
}
..main{
margin: 0 0 0 130px;
background-color: #FFFFCC;
padding: 5px;
border-top: 5px solid #000000;
border-right: 0px solid #000000;
border-bottom: 5px solid #000000;
border-left: 5px solid #000000;
}
..bottom{
margin: 0 0 0 130px;
background-color: #999999;
padding: 5px;
text-align: right;
}
</style>
</head>

<body>

<div class='wrapper'>
<div class='left'>
<b>LEFT:</b><br>
This area goes from the top to the bottom of the main area with a
fixed width of 120px.<br><br>
Its height is automatically increased when its contents don't
fit.<br><br>
The height is also automatically increased or when the height of the
MAIN area increases.
</div><!-- left -->
<div class='top'>
<b>TOP:</b> Fixed height of 30px, increases if contents do not fit.
</div><!-- top -->
<div class='main'>
<b>MAIN:</b><br>
This area has a fixed width.
The height increases when its contents do not fit.<br>
The height is also automatically increased or when the height of
the left area increases.<br>
<br><b>Problems:</b><br><br>
1. The layout works for Firefox, but not for Internet Explorer 6:<br>
a) TOP and BOTTOM areas have too much height.<br>
b) IE6 adjusts the TOP height according to how much content is in
the LEFT area.<br>
<br>2. I'd like to get the same layout with DIV and CSS formatting
instead of a table.
</div><!-- main -->
<div class='bottom'>
<b>BOTTOM:</b> Fixed height of 30px, increases if contents do not fit.
</div><!-- bottom -->
</div><!-- wrapper -->
</body>
</html>
 
L

Lauri Raittila

Hello world,

I play around with a table based layout
(http://www.photoss.de/test/layout-table.htm). It works perfectly with
Firefox, but shows some problems with Internet Explorer 6 which are
described on the webpage.

I think this is easier to get working using CSS. It is impossible to do
any fixed height/width using table. (of course, fixed widths are usually
bad idea anyway.)
Second, I have heard that CSS based layouts should be preferred over table
based ones. I tried to create a CSS based layout that looks the same and
behaves in the same way. I tried a number of approaches that I found on the
web, but up to now I couldn't find a CSS solution that really look and
behaves like the table.

CSS layouts whitout css-tables wont usually work as table layouts. But in
this case, you don't want it to work like table.
Maybe someone can give me some hints that push me in the right direction?

I don't know about mscirs thing (because there was no URL), but I have
example:
http://www.student.oulu.fi/~laurirai/www/css/examples/float2col.html

Gougle groups using that url, and you see lots of discussion. This is
frequently asked question.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top