Forum Moderators: open

Message Too Old, No Replies

Mysterious gaps and widths in Netscape 4

Old-skool table layout problems

         

encyclo

4:06 pm on Aug 20, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I must be getting rusty: it's been too long since I've built a good old Netscape 4.79 compatible, table-based layout, and I'm having problems getting simple three-column table to display correctly.

Here's the markup (the page is valid HTML 4.01 Transitional) with spacing left as-is:

<center><table width="715" cellpadding="0" cellspacing="0" bgcolor="#254A86"><tr><td colspan="3"><a href="/"><img src="toplogo1.jpg" width="715" height="124" border="0" alt="blablabla"></a></td></tr><tr><td width="162" bgcolor="#254A86" valign="top"><p>LH column</p></td>

<td width="394" bgcolor="#FFFFFF" align="left" valign="top">

<!-- main content section -->

<h1>title1</h1>
<p>blablabla</p>
<h2>title2</h2>
<p>blablabla</p>

</td>

<td width="159" bgcolor="#254A86" valign="top"><p>RH column</p></td>

</tr><tr><td colspan="3" width="100%" bgcolor="#FFFFFF">a search box here</td></tr><tr><td bgcolor="#FFFFFF" colspan="3" width="100%"><p class="footer" align="center">&copy; 2004, blablabla</p></td></tr></table></center>

The problems:

1. I get a 1px gap between the table rows, even with the cellspacing and cellpadding set to zero.

2. NN4.79 just won't respect the fixed widths for the columns - it makes the left column too narrow, and the right one too wide.

Does anyone remember the old-style table tricks to make everything hold together? NN4 compatibility is obligatory on this site, as the site owner uses it and can't upgrade.

isitreal

4:53 pm on Aug 20, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



When in doubt nest tables, you forgot border="0" on the table.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<center>
<table width="715" cellpadding="0" cellspacing="0" border="0" bgcolor="#254A86">
<tr>
<td height="124"><a href="/"><img src="toplogo1.jpg" width="715" height="124" border="0" alt="blablabla"></a></td>
</tr>
<tr>
<td>
<table width="715" cellpadding="0" cellspacing="0" border="0" >
<td width="162" bgcolor="#254A86" valign="top"><p>LH column</p></td>
<td width="394" bgcolor="#FFFFFF" align="left" valign="top">
<h1>title1</h1>
<p>blablabla</p>
<h2>title2</h2>
<p>blablabla</p></td>
<td width="159" bgcolor="#254A86" valign="top"><p>RH column</p></td></tr></table></td></tr>
<tr>
<td width="715" bgcolor="#FFFFFF">a search box here</td></tr><tr><td bgcolor="#FFFFFF" width="715"><p class="footer" align="center">&copy; 2004, blablabla</p></td>
</tr></table>
</center>
</body>

</html>

encyclo

8:10 pm on Aug 20, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanks for the tips, isitreal - your markup works perfectly.

you forgot border="0" on the table.

Doh! When you stare at your markup for too long, you miss the obvious!

When in doubt nest tables

Why does this not surprise me... I was hoping to avoid nesting, but it looks like I've got no choice here. I'll try not to think about the accessibility implications, though!