Table Alignment Varies in Browser/Platform

[Guest_imported]

Oy vey...

I'm new to this HTML stuff and it came upon me to design a marketing e-mail for my employer. So I've had to take a crash-course. I started out in Microsoft Word/Office 2000 (for PC) for it's WYSIWYG features and conversion to HTML. End result looked fine in IE, but crashed Netscape 4.7 consistently.

After much fiddling, I opted to re-code all the HTML myself. Even though it's not the current standard, I ditched CSS in favor of basic HTML. I found that many of the Word-generated CSS tags were causing my crashing problems, plus I wanted compatibility with older browsers.

Long story short - I finally ended up with a page that looks great in PC IE 5 and Netscape 6. The HTML (though messy) checks out on verifiers like Web Site Garage, Bobby, and W3C. However, when viewed on our Mac (in both IE 4.5 and Netscape 4.7), the long table on the right shifts down underneath the main table. It should remain up and to the right of the body. In fact, this is how it displays in IE 5 and Netscape 6.

How is it that the current versions of of IE and Netscape know where to render the table, but the older versions don't? If the code is wrong, shouldn't it be consistently wrong? Or, is it a platform issue - PC vs. Mac?

I figure I've done something wrong - left out a piece of code somewhere, or nested things improperly - but I don't know what. I've found tables to be pretty confusing so far, anyway.

Here's the temporary URL for my page:

http://home.earthlink.net/~kuxhouse/collegecampusplanit.htm

Any fix-it comments would be appreciated, as I'm nearly at the end of my rope. I apologize in advance for messy code - I'm still trying to figure things out. Thanks.

 

[jaredn]

welcome to the browser war, my friend:

http://hotwired.lycos.com/webmonkey/authoring/browsers/

you're probably not doing anything wrong... even microsoft can't agree with itself when creating the same browser on two different platforms. the link above and this one should get you started learning the differences:

http://hotwired.lycos.com/webmonkey/reference/browser_chart/index.html

jared@aauser.com

 

[zefir]

Lippschitz: of course it´s not easy to read the source file.
Please check: do you have really this construction ?
<TR>
<TD>
Content
</TD>
</TR>
Perhaps you missed the </TD> ?
G.Hoffmann

 

[Guest_imported]

<Lippschitz: of course it´s not easy to read the source file.

Yeah, sorry about that. Imagine how I feel - I've been staring at it for days. Is there an easy way to clean it up? In terms of formatting, should I have taken anything specific into consideration when I started out? With no style sheets, it quickly became a sprawling mess.

My table begins like this:

<TABLE BORDER=&quot;0&quot; CELLPADDING=&quot;0&quot; CELLSPACING=&quot;0&quot; WIDTH=&quot;100%&quot; ALIGN=&quot;left&quot; VALIGN=&quot;top&quot; BGCOLOR=&quot;FFFFFF&quot;>
<TR VALIGN=&quot;top&quot;>
<TD ALIGN=&quot;left&quot; VALIGN=&quot;top&quot;>
<TABLE BORDER=&quot;0&quot; CELLPADDING=&quot;0&quot; CELLSPACING=&quot;0&quot; WIDTH=&quot;60%&quot; ALIGN=&quot;left&quot;>
<TR VALIGN=&quot;top&quot;>
<TD ALIGN=&quot;left&quot; VALIGN=&quot;top&quot; COLSPAN=&quot;2&quot; &amp;nbsp;>
<P ALIGN=&quot;left&quot;>
<FONT FACE=&quot;Arial, helvetica&quot; SIZE=+3 COLOR=&quot;#666699&quot;><B>For 13 years, we’ve reached the college market <U>DAILY...</U></B></FONT>

...etc.

At top is the overall table. The second set of <TABLE><TR><TD> is for the nesting of the first two columns. The &amp;nbsp is there because I read that Netscape doesn't render otherwise empty tables. I've viewed the page with and without it though, and it doesn't seem to make a difference.

After my first section, I close up </TR> and </TD> and start another row broken into two columns. Copy in one:

</TR>
</TD>
<TR VALIGN=&quot;center&quot;>
<TD ALIGN=&quot;left&quot; VALIGN=&quot;center&quot; COLSPAN=&quot;1&quot; WIDTH=&quot;75%&quot; HEIGHT=&quot;325&quot;>
<P ALIGN=&quot;left&quot;>
<FONT FACE=&quot;Arial, helvetica&quot; SIZE=-1 COLOR=&quot;#000000&quot;><IMG WIDTH=&quot;15&quot; HEIGHT=&quot;13&quot; SRC=&quot;image003.gif&quot; ALT=&quot;*&quot;>Full-Color Laminated Covers<BR>

...etc.

and an image in the other:

</TD>
<TD ALIGN=&quot;left&quot; VALIGN=&quot;center&quot; COLSPAN=&quot;1&quot; WIDTH=&quot;25%&quot; HEIGHT=&quot;325&quot;>
<FONT FACE=&quot;Arial, helvetica&quot; COLOR=&quot;#000000&quot;>
<IMG WIDTH=&quot;180&quot; HEIGHT=&quot;287&quot; SRC=&quot;image004.gif&quot; ALT=&quot;Book Ruler and CD&quot;></FONT>
</TD>

Then, a small cell with a HR and some copy that extends across the two columns...

<TR VALIGN=&quot;top&quot;>
<TD ALIGN=&quot;left&quot; VALIGN=&quot;top&quot; COLSPAN=&quot;2&quot; WIDTH=&quot;100%&quot;>
<HR NOSHADE SIZE=&quot;7&quot; WIDTH=&quot;100%&quot; COLOR=&quot;#666699&quot;>
<P ALIGN=&quot;left&quot;>
<FONT FACE=&quot;Arial, helvetica&quot; SIZE=+3 COLOR=&quot;#800080&quot;><B>To request more information, contact:</B></FONT></P>
</TR>
</TD>

Followed immediately by another separation of image/text columns:

<TR VALIGN=&quot;center&quot;>
<TD ALIGN=&quot;center&quot; VALIGN=&quot;center&quot; COLSPAN=&quot;1&quot; WIDTH=&quot;40%&quot; HEIGHT=&quot;275&quot;>
<FONT FACE=&quot;Arial, helvetica&quot; COLOR=&quot;000000&quot;><IMG WIDTH=&quot;216&quot; HEIGHT=&quot;216&quot; SRC=&quot;image005.gif&quot; ALT=&quot;The College Campus Plan-It, Inc.&quot;></FONT>
</TD>
<TD ALIGN=&quot;left&quot; VALIGN=&quot;center&quot; COLSPAN=&quot;1&quot; WIDTH=&quot;60%&quot; HEIGHT=&quot;275&quot;>
<P ALIGN=&quot;left&quot;>
<FONT FACE=&quot;Arial, helvetica&quot; SIZE=+1 COLOR=&quot;000000&quot;><B>Kathe Stewart</B></FONT><BR>

After my URL link at the bottom , one last row across both columns with a HR in it. Then my next nested table, to run in the last (third) column vertically down the right of the page. As I mentioned, it displays correctly this way in IE 5 and Netscape 6 on PC. It stacks flush left underneath my main table on Mac IE 4.5/NS 4.7.

<FONT FACE=&quot;Arial, helvetica&quot; SIZE=2><B><A href=&quot;[URL unfurl="true"]http://www.collegeplan-it.com/&quot;>http://www.collegeplan-it.com/</A></B></FONT></P>[/URL]
</TD>
<TR VALIGN=&quot;top&quot;>
<TD ALIGN=&quot;left&quot; VALIGN=&quot;top&quot; COLSPAN=&quot;2&quot; WIDTH=&quot;100%&quot; HEIGHT=&quot;100%&quot;>
<HR NOSHADE SIZE=&quot;19&quot; WIDTH=&quot;100%&quot; COLOR=&quot;#666699&quot; ALIGN=&quot;left&quot;>
</TR>
</TD>
<TABLE ALIGN=&quot;left&quot; VALIGN=&quot;top&quot; BORDER=&quot;0&quot; CELLSPACING=&quot;0&quot; CELLPADDING=&quot;10&quot; BGCOLOR=&quot;#CC99FF&quot; WIDTH=25%>
<TD ALIGN=&quot;left&quot; VALIGN=&quot;top&quot; COLSPAN=&quot;1&quot;>
<P ALIGN=&quot;left&quot;>
<FONT FACE=&quot;Arial, helvetica&quot; SIZE=4 COLOR=&quot;#800080&quot;><B><U>FACTS</U></B></FONT><BR>
<FONT FACE=&quot;Arial, helvetica&quot; SIZE=3 COLOR=&quot;#000000&quot;><B>We are the #1 provider of 100% customized college planners &amp; handbooks.</B></FONT></P>

Whew. Nothing else table-related until the end of my document:

</TABLE>
</TD>
</TR>
</TABLE>
</TABLE>
</BODY>
</HTML>

Seemed a little odd to me that I had to close up so many tables, but I kept running into verification errors until this is what I came up with.

Hope that makes a little better sense. It barely does to me, though - which can't be a good thing.

If anyone has any feedback as to how the page views on their respective browsers/platforms, that may also prove helpful.

Thanks.

 

[zefir]

Lippschitz: I see now, that you use a sort of cascaded tables.
This is certainly a high risc.
Why can´t you organize the page with exactly ONE table,
using the mentioned TD,TR structure ?
For me it´s logical like
Begin
Begin
Content1
End
Begin
Content2
End
End
I am NOT very clever, but I use a simple subset of HTML,
thus no severe problems with old and new different browsers.

http://www.fho-emden.de/~hoffmann

G.Hoffmann

 

[tanderso]

First, you should indent things according to how deep in the table they are defined. Second, you have to open and close tags in a nested fashion. Eg:

<table>
<tr>
<td>
first column
</td>
<td>
second column
</td>
</tr>
</table>

Each column inside your cells can be a table of its own if you want. But you have to nest it properly... close your td before you close your tr, etc.
Sincerely,

Tom Anderson
CEO, Order amid Chaos, Inc.

http://www.oac-design.com