Getting images to line up in tables

layout problem in old browsers

[liza]

I wrote several weeks ago about designing a site for a current browser and having it be unreadable in an older one. (See [webmasterworld.com...] The general consensus seemed to be that the site should be at least minimally functional for old browsers. Now I’m trying to site the site to attain that and am running into problems.

Here is the basic layout of the site:

Navigation in a narrow column on the left, main body on the right. There’s a small image that is supposed to be above the narrow column, and a horizontal header image above the main body. In the main body, there are four images of the same size, arranged in a grid of four – in other words, two on one line, two underneath. There’s a line or two of text under each of the four images.
Under that, there are several lines of text, a horizontal image, a few more lines of text, another horizontal image, and more text.

A simplified version of the code is below.

<table cellpadding="0" cellspacing="0" border="0" style="width: 100%;">
<tbody>
<tr>
<td valign="top"><img src="left.gif" alt=""
style="width: 140px; height: 70px;">
<br>
</td>
<td valign="top"><br>
</td>
<td valign="top"><img src="header.gif" alt=""
style="width: 500px; height: 40px;">
<br>
</td>
<td valign="top"><br>
</td>
</tr>
<tr>
<td valign="top"
style="width: 140px; background-color: rgb(204,255,255);">

<table cellpadding="5" cellspacing="0" border="0"
style="width: 100%; background-color: rgb(255,102,102);">
<tbody>
<tr>
<td valign="top" style="background-color: rgb(204,255,255);">link<br>
link<br>
link<br>
link<br>
link<br>
<br>
</td>
</tr>

</tbody>
</table>
<br>
</td>
<td valign="top" width="25"><br>
</td>
<td valign="top" width="500">text under header goes here.<br>

<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td valign="top" width="240"><br>
</td>
<td valign="top" width="10"><br>
</td>
<td valign="top" width="240"><br>
</td>
</tr>
<tr>
<td valign="top" width="200">text above 1<br>
<img src="1.gif" alt="" style="width: 150px; height: 100px;">
<br>
</td>
<td valign="top" width="25"><br>
</td>
<td valign="top" width="200">text above 2<br>
<img src="2.gif" alt="" style="width: 150px; height: 100px;">
&nbsp; <br>
</td>
</tr>
<tr>
<td valign="top" width="200"><br>
</td>
<td valign="top"><br>
</td>
<td valign="top" width="200"><br>
</td>
</tr>
<tr>
<td valign="top">text under 1. <br>
</td>
<td valign="top"><br>
</td>
<td valign="top">text under 2<br>
</td>
</tr>
<tr>
<td valign="top"><br>
</td>
<td valign="top"><br>
</td>
<td valign="top"><br>
</td>
</tr>
<tr>
<td valign="top">text above 4<br>
<img src="4.gif" alt="" style="width: 150px; height: 100px;">
&nbsp; <br>
</td>
<td valign="top"><br>
</td>
<td valign="top">text above 3<br>
<img src="3.gif" alt="" style="width: 150px; height: 100px;">
&nbsp; <br>
</td>
</tr>
<tr>
<td valign="top">text under 4<br>
</td>
<td valign="top"><br>
</td>
<td valign="top">text under 3<br>
</td>
</tr>

</tbody>
</table>
<br>
first line of text under table<br>
<img src="image.gif" alt=""
style="width: 500px; height: 40px;">
<br>
second line of text under table<br>
third line<br>
fourth line. another image is under this line.<br>
<img src="image.gif" alt=""
style="width: 500px; height: 40px;">
<br>
fifth line. there is an image above this line.<br>

<table cellpadding="0" cellspacing="0" border="1" width="100%"
align="left">
<tbody>
<tr>
<td valign="top">

<div align="center">&nbsp; table of more navigation goes here.<br>
</div>
</td>
</tr>

</tbody>
</table>
<br>

<div align="center">one more line goes here.<br>
</div>
<br>
</td>
<td valign="top" width="50"><br>
</td>
</tr>

</tbody>
</table>

When I look at this in an older browser, the text is where I wanted it, but the images are all jumbled above it. Instead of having images 1-4 arranged clockwise in a box, 4, 2, and 1 are in a horizontal line with 3 above it. Worse, the horizontal images that were supposed to be at the bottom are above them, and all of the other images are above the header.

Is there a way to sort this out without using CSS? Unfortunately, this design is rather dependant on nested tables and I don’t know any other way to do it. Thanks.

[Donboy]

I hate to reopen the book on this discussion, but since I wasn't privvy to the old discussion, here's my 2 bits...

I believe you should encourage all of your users to upgrade to a newer browser. It doesn't sound like too many people you'd have to convince, so that's good. For one thing, there are a security holes in older browsers that have been patched and updated in newer versions. If that's not enough to convince people, then you should remind them that many of the sites they view in Netscape 4 will look wrong (i.e. not as the designer intended) so not only are they seeing your pages wrong, but they are also probably seeing many other pages wrong too!

The first thing I see is that you may want to avoid using style sheet tags in your code, since NN4 tends to embrace CSS very poorly. Most of your tags for CSS look pretty good, but if you're designing for NN4, then you should probably avoid using them at all if you want them to really control appearance in that browser.

Also, when you want to have a blank cell in your table, I recommend putting &nbsp; instead of using a <br> tag. This may cause older browsers to display it poorly. In fact, I believe this is probably the root of your problem. Are you using a HTML editor to design these pages? Just curious.

[MichaelBluejay]

Maybe you could define what you mean by "old" browsers? NN4? Anything else?

Fact of the matter is, *LOTS* of stuff doesn't work with NN4, and anyone who uses NN4 is painfully aware of that, which is why there are so few people using NN4.

Do you really want to add a bunch of code to ensure compatibility for less than 0.1% of your users? Is it fair to your 99.9% of your users if your pages load slower because of any extra code you had to put in to ensure compatibility with ancient systems?

I'm responsible for thousands of pages of web space, and no one's ever complained to me about pages not working in NN4.

[iamlost]

You have:

<td valign="top" width="200">text above 2<br><img src="1.gif" alt="" style="width: 150px; height: 100px;"><br>
</td>

Unfortunately in NN4 among the many things it does not understand is a style statement in that location.
If the code is written:

<td valign="top" width="200">text above 1<br><img src="1.gif" alt="" width="150" height="100"><br>
</td>

then NN4 thinks it's wonderful.

One workaround is to switch to the NN4 old-style/no-style width/height declaration within the tables (which most compliant browsers should still recognize).

The problem with tables is that NN4 recognizes and tries to implement them - they do not always degrade very gracefully. Should you ever switch from tables to divs then NN4 will recognize little and the page will degrade to a text-browser like boring but legible page.

[normaldude]

I believe you should encourage all of your users to upgrade to a newer browser.

I disagree. That looks very unprofessional. Successful, market leading websites - like Yahoo, Amazon, Ebay, Google - look fine in all browsers.. even older browsers like Netscape 3.0 (javascript off).

From my experience, if a webpage looks ok in a..

- Current IE,
- Current Mozilla, and
- Netscape 3.0 (javascript off)

..then it will look ok in virtually ANY browser.. Opera, Safari, proprietary web terminal at an airport/internet cafe, whatever. I have yet to find an exception to that rule.

If you want a copy of Netscape 3.0 for backward testing, you can get it here:
[wp.netscape.com...]
[browsers.evolt.org...]

[Donboy]

She actually said in her original post that the users she's dealing with are a fairly small number of people who are using NN4.

[normaldude]

Ok, I rewrote your code from scratch. Now it should look identical in all browsers. IE, Mozilla, NN4, Opera, Safari, even Netscape 3.0.

========================
<html>
<head>
<title>Adjusted Page</title>
</head>

<body bgcolor="#ffffff" text="#000000"
MARGINHEIGHT="0" TOPMARGIN="0" MARGINWIDTH="0" LEFTMARGIN="0">

<!--- START:outside frame --->
<table width="640" border="0" cellspacing="0" cellpadding="0"><tr valign="top"><td>

<!--- START:3-column layout table --->
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr valign="top">

<!--- START:Main Area Column 1 --->
<td width="19%" bgcolor="#CCFFFF">
<img src="left.gif" width="140" height="70" alt="">

<table border=0 cellspacing=0 cellpadding=5><tr><td>
link<br>
link<br>
link<br>
link<br>
link<br>
link<br>
link<br>
link<br>
<br>
<br>
</td></tr></table>

</td>
<!--- END:Main Area Column 1 --->

<!--- START:Main Area Column 2 --->
<td width="1%" nowrap>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<!--- END:Main Area Column 2 --->

<!--- START:Main Area Column 3 --->
<td width="80%">
<img src="header.gif" width="500" height="40" alt="">

<!--- Vertical Spacer ---><table height=20 border=0 cellspacing=0 cellpadding=0><tr><td></td></tr></table>

text under header goes here.

<!--- Vertical Spacer ---><table height=10 border=0 cellspacing=0 cellpadding=0><tr><td></td></tr></table>

<!--- START:2x2 Grid Table --->
<table width="100%" border=0 cellspacing=0 cellpadding=0 >
<tr valign="top">
<td width="50%">
text above 1<br>
<img src="1.gif" width="150" height="100" alt=""><br>
text under 1</td>
<td width="50%">
text above 2<br>
<img src="2.gif" width="150" height="100" alt=""><br>
text under 2</td>
</tr>
<tr>
<td height=20>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr valign="top">
<td>
text above 3<br>
<img src="3.gif" width="150" height="100" alt=""><br>
text under 3</td>
<td>
text above 4<br>
<img src="4.gif" width="150" height="100" alt=""><br>
text under 4</td>
</tr>
</table>
<!--- END:2x2 Grid Table --->
<br>
first line of text under table<br>
<img src="image.gif" width="500" height="40" alt="">
second line of text under table<br>
third line<br>
fourth line. another image is under this line.<br>
<img src="image.gif" width="500" height="40" alt="">
fifth line. there is an image above this line.

<table width="100%" border=1 cellspacing=0 cellpadding=0><tr align="center"><td>
table of more navigation goes here.
</td></tr></table>

<center><div align="center">
one more line goes here.
</div></center>

</td>
<!--- END:Main Area Column 3 --->

</tr></table>
<!--- END:3-column layout table for main area --->

</td></tr></table>
<!--- END:outside frame --->

</body>
</html>
========================

Things I did:

- Used HTML 3.2 instead of CSS attributes. Your website should never "blow up" if CSS fails.
So instead of <img src="image.gif" style="width: 500px; height: 40px;">
..I used <img src="image.gif" width="500" height="40">

- I split the page into 3 columns.

- I commented the <table> and <td> tags. Thus, it's easier to know where a certain table or column starts or ends, and which <table> tag matches which </table> tag.

- In many cases, instead of <div align="center">
..I put the center attribute in the <td> tag.. like.. <td align="center">

- If all the cells in a row had <td valign="top"> I placed the valign attribute in the <tr> tag.
Less redundant, less code.

- Instead of hard coding table and cell widths, I find it's more efficient to have an outside "framing" table where I state the hard width. Then for all inside tables and cells, I use percentages. That way, if I want to make the page wider/narrower, all the inside cells will self-adjust accordingly.

- Got rid of <tbody> tags. Not needed.

Now your page should look good in all browsers. IE, Mozilla, NN4, Opera, Safari, even Netscape 3.0.

[liza]

Thank you to all. Normaldude, you are a lifesaver. I tried your adjusted code with my real images and text, and it is perfect.

To answer everyone's questions, by older browsers, I mean NN 4.8. And yes, I understand that very few people still use it, but I am making this site for an institution that has some really antiquated equipment, and I didn't want to risk the slight chance that someone there would see the site looking like a mess. For an editor, I used Composer from NN 7.0.

Follow-up question: if I understand everyone correctly, should I not use CSS when making tables? I'm actually just starting to learn CSS -- so that I don't have to use tables any more -- so I thought doing it that way might make a better transition when I make the switch. Forgive me if this is a ridiculous question. I admit I'm quite mystified by CSS.

[Donboy]

Well, since you have to write your HTML for such older Netscape browsers, you may not be able to get away with very much CSS. You just need a good book on CSS. As a beginners guide, I recommend HTML and CSS by Elizabeth Castro. It's a very good book for learning the basics. There are also tables in the book that explain what CSS properties work well with what browsers. Of course there are plenty of other guides you can get that list all of the CSS properties and what browsers they will work with. That way, you know what CSS tags you can get away with and which ones should be avoided. Of course there's no substitute like experimenting on your own.

[normaldude]

Follow-up question: if I understand everyone correctly, should I not use CSS when making tables? I'm actually just starting to learn CSS -- so that I don't have to use tables any more..

People will have different views on this. You could say that people fall into two groups..

Group A) Don't use tables. Do pure-CSS designs.

Group B) Use HTML tables.

I'm in "Group B". And if you look at the successful, market leading websites - like Amazon, Yahoo, Ebay, Google, Match.com, Monster.com, Dell.com, etc - they all fall into "Group B" too.

My view is that CSS produces inconsistent results across different platforms and browsers. It's ok to use CSS for minor effects like removing underlines from some links, or the occassional hover effect. But your website shouldn't "blow up" if CSS fails for the visitor.

So I recommend becoming familiar with HTML tables, commenting your code cleanly where certain major columns/tables start & end (see my example), and test your pages in a current IE, a current Mozilla, and Netscape 3.0 (javascript off). If a page looks ok in those 3 browsers, then it will look ok in virtually ANY browser.. Opera, Safari, proprietary web terminal at an airport/internet cafe, whatever. With HTML tables, it is much easier to put together a layout that works in 99.999% of browsers.

You'll see experienced coders constantly struggling for cross-browser compatibility with their pure-CSS designs. I recommend saving yourself that aggravation, follow in the footsteps of market leaders - like Amazon, Yahoo, Ebay, Google, Match.com, Monster.com, Dell.com - and use HTML tables.

Once you have some experience hand coding HTML (I use text editors like UltraEdit or Homesite), and you've built up a few templates of code snippets that you know work in all browsers, building HTML table layouts become very easy. 90% of your code will be copy & pasted from your existing templates & snippets.

And again, I highly recommend that you comment your major <table> and <td> tags (see how I did it). That way, you won't lose track of which <table> and <td> tags go with which </table> and </td> tags (which is probably the biggest reason people get frustrated when hand coding HTML tables)

[liza]

OK, one more: Donboy mentioned not using <br> in blank cells. But am I OK to use it to create blank lines within a cell of text? For example, in normaldude's corrected page, he added a small table as a vertical spacer under the header image. Using the same example, say I have more text than is shown here -- 4 or 5 lines of text, a blank line, 4 or 5 more lines of text and another blank line, etc.-- could I just use a couple of <br> after each paragraph? I know using too many is sloppy, but when I try to use blank cells instead to create spaces, that's when I seem to get into trouble.

[normaldude]

OK, one more: Donboy mentioned not using <br> in blank cells. But am I OK to use it to create blank lines within a cell of text? For example, in normaldude's corrected page, he added a small table as a vertical spacer under the header image. Using the same example, say I have more text than is shown here -- 4 or 5 lines of text, a blank line, 4 or 5 more lines of text and another blank line, etc.-- could I just use a couple of <br> after each paragraph? I know using too many is sloppy, but when I try to use blank cells instead to create spaces, that's when I seem to get into trouble.

Yes, you can always use <br> to create space between lines of text.

The vertical spacer I used just gives a little more control on exactly how much space you want to create. For example, if you wanted exactly 23 pixels of vertical space, you could just put:

<!--- Vertical Spacer ---><table height=23 border=0 cellspacing=0 cellpadding=0><tr><td></td></tr></table>