Web Hosting Talk






PDA

View Full Version : Mixing CSS layout with tables

Evolver
10-18-2006, 12:54 PM
I'm building a new site and need to minimize the amount of tables I'm using for layout.

So basically this is what I want to do

header image
table
bottom image

Below is what I'm using for the markup. It seems to work ok In Opera/FireFox but in IE 6 I get a space between the header image and the table but not the bottom image. Also in Netscape 4 the margin : auto does't work and the table stays to the left of the screen. I can fix that using text-align : center but then it center aligns all the table text in the other browsers. I can get rid of the space in IE6 by using margin-bottom : -4px; for the top image but not sure if its the right way.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />

<STYLE TYPE="text/css">

<!--

body {
margin: 0;
background: #FFFFFF
font-face: Verdana, Arial,Times New Roman;

}

table { margin: auto;

}

-->
</style>

</head>
<body>
<div style="text-align: center;">
<img src="images/top_banner.gif" border="0" alt="Green Cross Logo" />
</div>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="605" height="800" bgcolor="#F4F4F4" valign="top">Content</td>
<td width="5" bgcolor="#F4F4F4" valign="top"><img src="images/cell_seperator.gif" alt="" /></td>
<td width="170" bgcolor="#F4F4F4" valign="top">Navigation</td>
</tr>
</table>
<div style="text-align: center;">
<img src="images/bottom_banner.gif" />
</div>
</body>
</html>


This is what it looks like in IE6

http://www.iroxy.ca/gc/test.gif


Thanks
lordgema
10-18-2006, 10:21 PM
Why not make in all css? If the table is not for displaying a result set then, it doesn't make sense to use tables.
Evolver
10-18-2006, 10:42 PM
Why not make in all css? If the table is not for displaying a result set then, it doesn't make sense to use tables.

Well I dont have the time to learn full css layout for this project. So need to go gradual.
Evolver
10-19-2006, 03:55 AM
Any one else have any suggestions?
Evolver
10-20-2006, 10:32 PM
So I've read up on this for days and no one has a solution. I found wo other posts that had a similar problem but the solution on those sites didn't help.

Anyone?
bumS lie 714
10-20-2006, 11:00 PM
Hi, I'm a little tipsy so please forgive me.

You can go to, www.kewlpix.us, look at the source and the css file. I believe it what you want to do.

Sorry, if it doesn't help but I think it may answer your question.
Evolver
10-21-2006, 01:45 AM
^ Thanks for the help but not what I was looking for. I managed to get it working. Not sure if its done properly but it'll have to do.

This is what I got. I had to give the top banner image a negative margin-buttom

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">

<style type="text/css">

<!--

body {
margin : 0;
background : #FFFFFF
font-face : Verdana, Arial,Times New Roman;
}


#center
{
text-align: center;
}


.centertable {

margin-left: auto;
margin-right: auto;
text-align: left;
top-margin: -5px;

}

-->
</style>

</head>
<body>
<div style="text-align :center; margin-bottom: -5px;">
<img src="images/top_banner.gif" alt="Green Cross Logo">
</div>
<div id="center">
<table class="centertable" cellpadding="0" cellspacing="0" border="0" >
<tr>
<td width="780" height="800" bgcolor="#F4F4F4" valign="top">Content</td>
</tr>
</table>
</div>
<div style="text-align :center;">
<img src="images/bottom_banner.gif" alt="">
</div>
</body>
</html>