javabeginr
asked on
Column problem
As you will see with the code posted below, I have text on the right side and images and text on the left. I'm trying to prevent the images from pulling apart (Image 1 and 2 are sliced images) and keep the text at the top of the table it's in. I hope this makes sense. The problem if I add text on the right side, the left side images pull apart and/or the text will not stay at the top of the table. Instead it goes down and doesn't stay in the position it was in before the text was inserted on the right side of the table. I'm wondering if there is a better way of building the html. So if I add text on the right side the text and images will stay in the same position, no matter how far the right side goes down. Also I've tried valign but that doesn't make a difference. If this doesn't make sense please ask questions. Thank You.
Code ------
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<TABLE WIDTH=771 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=2 ROWSPAN=5 valign="top"> <IMG SRC="image1.gif" ALT="" WIDTH=316 HEIGHT=375></TD>
<TD ROWSPAN=4> <IMG SRC="image2.gif" WIDTH=148 HEIGHT=132 ALT=""></TD>
<TD COLSPAN=10> <IMG SRC="image3.gif" WIDTH=307 HEIGHT=28 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=28 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=10><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="22%"><img src="button1.gif" width="69" height="32"></td>
<td width="7%"><img src="buttonspacer1.gif" width="20" height="32"></td>
<td width="39%"><img src="button2.gif" width="121" height="32"></td>
<td width="4%"><img src="buttonspacer2.gif" width="18" height="32"></td>
<td width="14%"><img src="button3.gif" width="72" height="32"></td>
<td width="14%"><img src="buttonspacer3.gif" width="7" height="32"></td>
</tr>
</table></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=32 ALT=""></TD>
</TR>
<TR>
<TD colspan="10"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<TR>
<TD> <IMG SRC="buttonspacer4.gif" WIDTH=17 HEIGHT=28 ALT=""></TD>
<TD COLSPAN=4> <IMG SRC="button4.gif" WIDTH=189 HEIGHT=28 ALT=""></TD>
<TD> <IMG SRC="buttonspacer5.gif" WIDTH=4 HEIGHT=28 ALT=""></TD>
<TD COLSPAN=2> <IMG SRC="button5.gif" WIDTH=72 HEIGHT=28 ALT=""></TD>
<TD COLSPAN=2> <IMG SRC="buttonspacer6.gif" WIDTH=25 HEIGHT=28 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=28 ALT=""></TD>
</TR>
</table> </TD>
<TD> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=28 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=10> <IMG SRC="nav_under.gif" WIDTH=307 HEIGHT=44 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=44 ALT=""></TD>
</TR>
<TR>
<TD WIDTH=455 HEIGHT=150 COLSPAN=11 ROWSPAN=2 ALIGN=left VALIGN=top> <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip consequat hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
et iust. adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip consequat hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
et iust
<ul>
<li>adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.</li>
<li>adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat.</li>
<li> adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. </li>
</ul>
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br>
adipiscing elit, sed diam nonummy nibh euismod tincidunt.</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="88" align="right" valign="top"><img src="image5.gif" width="120" height="85"></td>
</tr>
</table></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=243 ALT=""></TD>
</TR>
<TR>
<TD height="100" colspan="2" ROWSPAN=2 valign="top"> <table width="100%" height="91" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="11%" height="91"><img src="spacer.gif" width="34" height="83"></td>
<td width="81%">incidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip consequat hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
at vero eros et accumsan et iust . adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut.<br> </td>
<td width="8%"><img src="spacer.gif" width="26" height="8"></td>
</tr>
</table>
<table width="100%" height="89" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="10%" height="89"><img src="spacer.gif" width="34" height="15"></td>
<td width="39%"><img src="image4.gif" width="126" height="89"></td>
<td width="41%" valign="top">adipiscing elit <br>
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat.</span></td>
<td width="10%" valign="top"><img src="spacer.gif" width="26" height="8"></td>
</tr>
</table>
<img src="spacer.gif" width="1" height="1"><br> </TD>
<TD height="129"> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=129 ALT=""></TD>
</TR>
<TR>
<TD height="58" COLSPAN=11 valign="top"> <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="13">adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore</td>
</tr>
</table>
<img src="spacer.gif" width="25" height="57"> </TD>
</TR>
<TR>
<TD height="24" colspan="13"><img src="spacer.gif" width="761" height="26">
</TD>
<TD></TD>
</TR>
<TR>
<TD> <IMG SRC="spacer.gif" WIDTH=34 HEIGHT=1 ALT=""></TD>
<TD width="282"> <IMG SRC="spacer.gif" WIDTH=282 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=148 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=17 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=52 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=20 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=98 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=19 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=4 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=18 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=54 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=18 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=7 HEIGHT=1 ALT=""></TD>
<TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Code ------
---
Code ------
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<TABLE WIDTH=771 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=2 ROWSPAN=5 valign="top"> <IMG SRC="image1.gif" ALT="" WIDTH=316 HEIGHT=375></TD>
<TD ROWSPAN=4> <IMG SRC="image2.gif" WIDTH=148 HEIGHT=132 ALT=""></TD>
<TD COLSPAN=10> <IMG SRC="image3.gif" WIDTH=307 HEIGHT=28 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=28 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=10><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="22%"><img src="button1.gif" width="69" height="32"></td>
<td width="7%"><img src="buttonspacer1.gif" width="20" height="32"></td>
<td width="39%"><img src="button2.gif" width="121" height="32"></td>
<td width="4%"><img src="buttonspacer2.gif" width="18" height="32"></td>
<td width="14%"><img src="button3.gif" width="72" height="32"></td>
<td width="14%"><img src="buttonspacer3.gif" width="7" height="32"></td>
</tr>
</table></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=32 ALT=""></TD>
</TR>
<TR>
<TD colspan="10"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<TR>
<TD> <IMG SRC="buttonspacer4.gif" WIDTH=17 HEIGHT=28 ALT=""></TD>
<TD COLSPAN=4> <IMG SRC="button4.gif" WIDTH=189 HEIGHT=28 ALT=""></TD>
<TD> <IMG SRC="buttonspacer5.gif" WIDTH=4 HEIGHT=28 ALT=""></TD>
<TD COLSPAN=2> <IMG SRC="button5.gif" WIDTH=72 HEIGHT=28 ALT=""></TD>
<TD COLSPAN=2> <IMG SRC="buttonspacer6.gif" WIDTH=25 HEIGHT=28 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=28 ALT=""></TD>
</TR>
</table> </TD>
<TD> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=28 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=10> <IMG SRC="nav_under.gif" WIDTH=307 HEIGHT=44 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=44 ALT=""></TD>
</TR>
<TR>
<TD WIDTH=455 HEIGHT=150 COLSPAN=11 ROWSPAN=2 ALIGN=left VALIGN=top> <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip consequat hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
et iust. adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip consequat hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
et iust
<ul>
<li>adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.</li>
<li>adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat.</li>
<li> adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. </li>
</ul>
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br>
adipiscing elit, sed diam nonummy nibh euismod tincidunt.</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="88" align="right" valign="top"><img src="image5.gif" width="120" height="85"></td>
</tr>
</table></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=243 ALT=""></TD>
</TR>
<TR>
<TD height="100" colspan="2" ROWSPAN=2 valign="top"> <table width="100%" height="91" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="11%" height="91"><img src="spacer.gif" width="34" height="83"></td>
<td width="81%">incidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip consequat hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
at vero eros et accumsan et iust . adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut.<br> </td>
<td width="8%"><img src="spacer.gif" width="26" height="8"></td>
</tr>
</table>
<table width="100%" height="89" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="10%" height="89"><img src="spacer.gif" width="34" height="15"></td>
<td width="39%"><img src="image4.gif" width="126" height="89"></td>
<td width="41%" valign="top">adipiscing elit <br>
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat.</span></td>
<td width="10%" valign="top"><img src="spacer.gif" width="26" height="8"></td>
</tr>
</table>
<img src="spacer.gif" width="1" height="1"><br> </TD>
<TD height="129"> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=129 ALT=""></TD>
</TR>
<TR>
<TD height="58" COLSPAN=11 valign="top"> <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="13">adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore</td>
</tr>
</table>
<img src="spacer.gif" width="25" height="57"> </TD>
</TR>
<TR>
<TD height="24" colspan="13"><img src="spacer.gif" width="761" height="26">
</TD>
<TD></TD>
</TR>
<TR>
<TD> <IMG SRC="spacer.gif" WIDTH=34 HEIGHT=1 ALT=""></TD>
<TD width="282"> <IMG SRC="spacer.gif" WIDTH=282 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=148 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=17 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=52 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=20 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=98 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=19 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=4 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=18 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=54 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=18 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=7 HEIGHT=1 ALT=""></TD>
<TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Code ------
---
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Or you can use <div> tags to always align the left image to the right side and the right image to the left side.
That's all I added to your code...not sure if that is what SquareHead did. If so...my bad.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<TABLE WIDTH=771 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=2 ROWSPAN=5 valign="top">
<div align="right"><img src="image1.gif" alt="" width=316 height=375></div>
</TD>
<TD ROWSPAN=4>
<div align="left"><IMG SRC="image2.gif" WIDTH=148 HEIGHT=132 ALT=""></div>
</TD>
<TD COLSPAN=10> <IMG SRC="image3.gif" WIDTH=307 HEIGHT=28 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=28 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=10>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="22%"><img src="button1.gif" width="69" height="32"></td>
<td width="7%"><img src="buttonspacer1.gif" width="20" height="32"></td>
<td width="39%"><img src="button2.gif" width="121" height="32"></td>
<td width="4%"><img src="buttonspacer2.gif" width="18" height="32"></td>
<td width="14%"><img src="button3.gif" width="72" height="32"></td>
<td width="14%"><img src="buttonspacer3.gif" width="7" height="32"></td>
</tr>
</table>
</TD>
<TD> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=32 ALT=""></TD>
</TR>
<TR>
<TD colspan="10">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<TR>
<TD> <IMG SRC="buttonspacer4.gif" WIDTH=17 HEIGHT=28 ALT=""></TD>
<TD COLSPAN=4> <IMG SRC="button4.gif" WIDTH=189 HEIGHT=28 ALT=""></TD>
<TD> <IMG SRC="buttonspacer5.gif" WIDTH=4 HEIGHT=28 ALT=""></TD>
<TD COLSPAN=2> <IMG SRC="button5.gif" WIDTH=72 HEIGHT=28 ALT=""></TD>
<TD COLSPAN=2> <IMG SRC="buttonspacer6.gif" WIDTH=25 HEIGHT=28 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=28 ALT=""></TD>
</TR>
</table>
</TD>
<TD> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=28 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=10> <IMG SRC="nav_under.gif" WIDTH=307 HEIGHT=44 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=44 ALT=""></TD>
</TR>
<TR>
<TD WIDTH=455 HEIGHT=150 COLSPAN=11 ROWSPAN=2 ALIGN=left VALIGN=top>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip consequat hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iust. adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip consequat hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iust
<ul>
<li>adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li>adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li> adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </li>
</ul>
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br>
adipiscing elit, sed diam nonummy nibh euismod tincidunt.</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="88" align="right" valign="top"><img src="image5.gif" width="120" height="85"></td>
</tr>
</table>
</TD>
<TD> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=243 ALT=""></TD>
</TR>
<TR>
<TD height="100" colspan="2" ROWSPAN=2 valign="top">
<table width="100%" height="91" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="11%" height="91"><img src="spacer.gif" width="34" height="83"></td>
<td width="81%">incidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip consequat hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iust . adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.<br>
</td>
<td width="8%"><img src="spacer.gif" width="26" height="8"></td>
</tr>
</table>
<table width="100%" height="89" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="10%" height="89"><img src="spacer.gif" width="34" height="15"></td>
<td width="39%"><img src="image4.gif" width="126" height="89"></td>
<td width="41%" valign="top">adipiscing elit <br>
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</span></td>
<td width="10%" valign="top"><img src="spacer.gif" width="26" height="8"></td>
</tr>
</table>
<img src="spacer.gif" width="1" height="1"><br>
</TD>
<TD height="129"> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=129 ALT=""></TD>
</TR>
<TR>
<TD height="58" COLSPAN=11 valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="13">adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</td>
</tr>
</table>
<img src="spacer.gif" width="25" height="57"> </TD>
</TR>
<TR>
<TD height="24" colspan="13"><img src="spacer.gif" width="761" height="26"> </TD>
<TD></TD>
</TR>
<TR>
<TD> <IMG SRC="spacer.gif" WIDTH=34 HEIGHT=1 ALT=""></TD>
<TD width="282"> <IMG SRC="spacer.gif" WIDTH=282 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=148 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=17 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=52 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=20 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=98 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=19 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=4 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=18 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=54 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=18 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=7 HEIGHT=1 ALT=""></TD>
<TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>
That's all I added to your code...not sure if that is what SquareHead did. If so...my bad.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<TABLE WIDTH=771 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=2 ROWSPAN=5 valign="top">
<div align="right"><img src="image1.gif" alt="" width=316 height=375></div>
</TD>
<TD ROWSPAN=4>
<div align="left"><IMG SRC="image2.gif" WIDTH=148 HEIGHT=132 ALT=""></div>
</TD>
<TD COLSPAN=10> <IMG SRC="image3.gif" WIDTH=307 HEIGHT=28 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=28 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=10>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="22%"><img src="button1.gif" width="69" height="32"></td>
<td width="7%"><img src="buttonspacer1.gif" width="20" height="32"></td>
<td width="39%"><img src="button2.gif" width="121" height="32"></td>
<td width="4%"><img src="buttonspacer2.gif" width="18" height="32"></td>
<td width="14%"><img src="button3.gif" width="72" height="32"></td>
<td width="14%"><img src="buttonspacer3.gif" width="7" height="32"></td>
</tr>
</table>
</TD>
<TD> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=32 ALT=""></TD>
</TR>
<TR>
<TD colspan="10">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<TR>
<TD> <IMG SRC="buttonspacer4.gif" WIDTH=17 HEIGHT=28 ALT=""></TD>
<TD COLSPAN=4> <IMG SRC="button4.gif" WIDTH=189 HEIGHT=28 ALT=""></TD>
<TD> <IMG SRC="buttonspacer5.gif" WIDTH=4 HEIGHT=28 ALT=""></TD>
<TD COLSPAN=2> <IMG SRC="button5.gif" WIDTH=72 HEIGHT=28 ALT=""></TD>
<TD COLSPAN=2> <IMG SRC="buttonspacer6.gif" WIDTH=25 HEIGHT=28 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=28 ALT=""></TD>
</TR>
</table>
</TD>
<TD> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=28 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=10> <IMG SRC="nav_under.gif" WIDTH=307 HEIGHT=44 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=44 ALT=""></TD>
</TR>
<TR>
<TD WIDTH=455 HEIGHT=150 COLSPAN=11 ROWSPAN=2 ALIGN=left VALIGN=top>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip consequat hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iust. adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip consequat hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iust
<ul>
<li>adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li>adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li> adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </li>
</ul>
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br>
adipiscing elit, sed diam nonummy nibh euismod tincidunt.</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="88" align="right" valign="top"><img src="image5.gif" width="120" height="85"></td>
</tr>
</table>
</TD>
<TD> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=243 ALT=""></TD>
</TR>
<TR>
<TD height="100" colspan="2" ROWSPAN=2 valign="top">
<table width="100%" height="91" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="11%" height="91"><img src="spacer.gif" width="34" height="83"></td>
<td width="81%">incidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip consequat hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iust . adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.<br>
</td>
<td width="8%"><img src="spacer.gif" width="26" height="8"></td>
</tr>
</table>
<table width="100%" height="89" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="10%" height="89"><img src="spacer.gif" width="34" height="15"></td>
<td width="39%"><img src="image4.gif" width="126" height="89"></td>
<td width="41%" valign="top">adipiscing elit <br>
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</span></td>
<td width="10%" valign="top"><img src="spacer.gif" width="26" height="8"></td>
</tr>
</table>
<img src="spacer.gif" width="1" height="1"><br>
</TD>
<TD height="129"> <IMG SRC="spacer.gif" WIDTH=1 HEIGHT=129 ALT=""></TD>
</TR>
<TR>
<TD height="58" COLSPAN=11 valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="13">adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</td>
</tr>
</table>
<img src="spacer.gif" width="25" height="57"> </TD>
</TR>
<TR>
<TD height="24" colspan="13"><img src="spacer.gif" width="761" height="26"> </TD>
<TD></TD>
</TR>
<TR>
<TD> <IMG SRC="spacer.gif" WIDTH=34 HEIGHT=1 ALT=""></TD>
<TD width="282"> <IMG SRC="spacer.gif" WIDTH=282 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=148 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=17 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=52 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=20 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=98 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=19 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=4 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=18 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=54 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=18 HEIGHT=1 ALT=""></TD>
<TD> <IMG SRC="spacer.gif" WIDTH=7 HEIGHT=1 ALT=""></TD>
<TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>
ASKER
SqareHead,
Thanks for the help. It seems to me that you moved
<table width="100%" height="91" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="11%" height="91"><img src="spacer.gif" width="34" height="83"></td>
<td width="81%">incidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip consequat hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
at vero eros et accumsan et iust . adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut.<br> </td>
<td width="8%"><img src="spacer.gif" width="26" height="8"></td>
</tr>
</table>
<table width="100%" height="89" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="10%" height="89"><img src="spacer.gif" width="34" height="15"></td>
<td width="39%"><img src="image4.gif" width="126" height="89"></td>
<td width="41%" valign="top">adipiscing elit <br>
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat.</span></td>
<td width="10%" valign="top"><img src="spacer.gif" width="26" height="8"></td>
</tr>
</table>
--------------------------
to the top. So now it reads from left to bottom and from right to bottom. Is this how I should develop my pages all the time if I have a left and right column. Or did you make more changes that I didn't see?
-----
Thanks for the help. It seems to me that you moved
<table width="100%" height="91" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="11%" height="91"><img src="spacer.gif" width="34" height="83"></td>
<td width="81%">incidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip consequat hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
at vero eros et accumsan et iust . adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut.<br> </td>
<td width="8%"><img src="spacer.gif" width="26" height="8"></td>
</tr>
</table>
<table width="100%" height="89" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="10%" height="89"><img src="spacer.gif" width="34" height="15"></td>
<td width="39%"><img src="image4.gif" width="126" height="89"></td>
<td width="41%" valign="top">adipiscing elit <br>
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat.</span></td>
<td width="10%" valign="top"><img src="spacer.gif" width="26" height="8"></td>
</tr>
</table>
--------------------------
to the top. So now it reads from left to bottom and from right to bottom. Is this how I should develop my pages all the time if I have a left and right column. Or did you make more changes that I didn't see?
-----
Actually, I am in agreement with CobolDino & others on this one. I would tend to stay away from tables as much as possible and use more CSS positioning of DIVs. If you need help getting started with this, just post another question in the Cascading Style Sheets T/A -- https://www.experts-exchange.com/Web/Web_Languages/CSS/ asking for some good resources for getting started...
As for the changes I made to your code, yes that's all I did, move those two tables up to directly underneath image1... And I also threw a border on a few tables here and there so I could better see what was going on.
As for the changes I made to your code, yes that's all I did, move those two tables up to directly underneath image1... And I also threw a border on a few tables here and there so I could better see what was going on.
ASKER
SquareHead,
Well thanks for the help but I would have to disagree until all the old broswers in the world die. If I used CSS tables on an older broswer, all hell would break loose. It would be great to use CSS for fonts, tables, etc but as for this day and age, one needs to continue the old way until the older browsers are buried.
Well thanks for the help but I would have to disagree until all the old broswers in the world die. If I used CSS tables on an older broswer, all hell would break loose. It would be great to use CSS for fonts, tables, etc but as for this day and age, one needs to continue the old way until the older browsers are buried.
Well, thanks for the points & grade.
Which older browsers. Less than 2% are not at least complianto the core CSS! and less than half a percent have no CSS support. Inorder to support those you cannot support accessibility guidelines that make it possible of user with assistive devices able to use your site and close out user with handheld devices.
If yo are going to support all browser until they die then you will have to ge ride of the tables becaue they might still be somebody using Mosaic 1.0, NS2.0 or earlier and who knows what else.
I absolutely 100% can guarantee you that right now you are failing to support more users that you would be with full CCS layout management, and you don't have to drop support for the legacy browsers just freeeze the pages. USe broser detectio to deliver relic pages to relics. However if you check you server logs, my bet is that you will find like everyone else I tell to check the logs. Not using CSS means support for Ie 3 and earlies Netscrap 4.5 and ealier. Are there enough user coming in with those browsers to justify more than 5 minutes time a week... betcha not unless you have a very unusual site that attracts people using very old computers.
Cd&
If yo are going to support all browser until they die then you will have to ge ride of the tables becaue they might still be somebody using Mosaic 1.0, NS2.0 or earlier and who knows what else.
I absolutely 100% can guarantee you that right now you are failing to support more users that you would be with full CCS layout management, and you don't have to drop support for the legacy browsers just freeeze the pages. USe broser detectio to deliver relic pages to relics. However if you check you server logs, my bet is that you will find like everyone else I tell to check the logs. Not using CSS means support for Ie 3 and earlies Netscrap 4.5 and ealier. Are there enough user coming in with those browsers to justify more than 5 minutes time a week... betcha not unless you have a very unusual site that attracts people using very old computers.
Cd&
1. Add a strict doctype so the browsers have some idea of how to consistently render.
2. run it through the validators at w3c
3. Clean up all the garbage the the validators Identify
4. Get rid of all the loca sizing and use CSS
5. Experiment until you stumble o somthing that works on your computer and hope that everyone ele who looks at it has the same setup
OR...
Scrap the 20th century layout and move to CSS for layout management.
Cd&