disfunktion
02-05-2006, 07:04 AM
Hi guys,
This is my first post here and I really need some help with this.
I have a table with images and text in various cells. When I load text into it and make it expand vertically (as it is designed to), the images separate from one another and go all funny...but they're aligned properly vertically, etc...
I've attached a screenshot outlining my problem areas.
Here is my code:
<!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">
<head>
<title>hoax :: no dignity, no shame</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
body {
background-color: #9C9987;
}
a:link {
color: #FF0000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #666666;
}
a:hover {
text-decoration: underline;
color: #FF0000;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('images/r3c4-newsover.gif','images/r4c4-bioover.gif','images/r5c4-showsover.gif','images/r6c4-mediaover.gif','images/r7c4-merchover.gif','images/r8c4-contactsover.gif')">
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="20"><img src="images/r1c1.jpg" width="20" height="25" hspace="0" vspace="0" /></td>
<td width="415" height="25"><img src="images/r1c2.gif" width="415" height="25" align="top" /></td>
<td width="25"><img src="images/r1c3.gif" width="25" height="25" /></td>
<td width="23"><img src="images/r1c4.gif" width="160" height="25" /></td>
<td width="17"><img src="images/r1c5.gif" width="20" height="25" /></td>
</tr>
<tr>
<td valign="top" width="20" height="52"><img src="images/r2c1.gif" width="20" height="52" hspace="0" vspace="0" /></td>
<td width="415" height="52" valign="top" background="images/r5c2-maincontentback.jpg"><img src="images/r2c2.gif" width="415" height="52" hspace="0" vspace="0" align="top" /></td>
<td valign="top" background="images/r10c3.gif" width="25" height="52"><img src="images/r2c3.jpg" width="25" height="52" /></td>
<td colspan="2" rowspan="7" valign="top"><table width="180" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="160"><img src="images/r2c4.gif" width="160" height="52" /></td>
<td width="340"><img src="images/r2c5.gif" width="20" height="52" /></td>
</tr>
<tr>
<td><a href="index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('News','','images/r3c4-newsover.gif',1)"><img src="images/r3c4-news.gif" alt="News" name="News" width="160" height="43" border="0" id="News" /></a></td>
<td><img src="images/r3c5.gif" width="20" height="43" /></td>
</tr>
<tr>
<td><a href="bio.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bio','','images/r4c4-bioover.gif',1)"><img src="images/r4c4-bio.gif" alt="Band Biography" name="Bio" width="160" height="25" border="0" id="Bio" /></a></td>
<td><img src="images/r4c5.gif" width="20" height="25" /></td>
</tr>
<tr>
<td><a href="shows.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Shows','','images/r5c4-showsover.gif',1)"><img src="images/r5c4-shows.gif" alt="Shows" name="Shows" width="160" height="32" border="0" id="Shows" /></a></td>
<td><img src="images/r5c5.gif" width="20" height="32" /></td>
</tr>
<tr>
<td><a href="media.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Media','','images/r6c4-mediaover.gif',1)"><img src="images/r6c4-media.gif" alt="Media" name="Media" width="160" height="36" border="0" id="Media" /></a></td>
<td><img src="images/r6c5.gif" width="20" height="36" /></td>
</tr>
<tr>
<td><a href="merch.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Merch','','images/r7c4-merchover.gif',1)"><img src="images/r7c4-merch.gif" alt="Merchandise" name="Merch" width="160" height="34" border="0" id="Merch" /></a></td>
<td><img src="images/r7c5.gif" width="20" height="34" /></td>
</tr>
<tr>
<td><a href="contacts.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contacts','','images/r8c4-contactsover.gif',1)"><img src="images/r8c4-contacts.gif" alt="Contact Us" name="Contacts" width="160" height="34" border="0" id="Contacts" /></a></td>
<td><img src="images/r8c5.gif" width="20" height="34" /></td>
</tr>
<tr>
<td background="images/r10c4.gif"><img src="images/r9c4.jpg" width="160" height="169" /></td>
<td><img src="images/r9c5.gif" width="20" height="169" /></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top"><img src="images/r3c1.gif" width="20" height="43" hspace="0" vspace="0" /></td>
<td valign="top" background="images/r5c2-maincontentback.jpg" height="43"><img src="images/r3c2.gif" width="415" height="43" hspace="0" vspace="0" align="top" /></td>
<td valign="top" background="images/r10c3.gif"><img src="images/r3c3.jpg" width="25" height="43" /></td>
</tr>
<tr>
<td valign="top"><img src="images/r4c1.jpg" width="20" height="25" hspace="0" vspace="0" /></td>
<td valign="top" background="images/r5c2-maincontentback.jpg" height="25"><img src="images/r4c2.gif" width="415" height="25" hspace="0" vspace="0" align="top" /></td>
<td valign="top" background="images/r10c3.gif"><img src="images/r4c3.jpg" width="25" height="25" /></td>
</tr>
<tr>
<td valign="top"></td>
<td rowspan="6" valign="top" background="images/r5c2-maincontentback.jpg"><table width="90%" align="center"><td>
<p>Test content.<br />
<br />
Test content.<br />
<br />
Test content.<br />
<br />
Test content.<br />
<br />
Test content.<br />
<br />
Test content.<br />
<br />
Test content.<br />
<br />
Test content.<br />
<br />
Test content.<br />
<br />
Test content.<br />
<br />
Test content.<br />
<br />
Test content.<br />
<br />
Test content.<br />
<br />
Test content.</p>
<p><br />
Test content. </p>
<p><br />
Test content. </p>
<p><br />
Test content. </p>
<p><br />
Test content. </p>
<p><br />
Test content. </p>
<p><br />
Test content. </p>
<p><br />
Test content. <br />
</p></td></table></td>
<td background="images/r10c3.gif"><img src="images/r5c3.gif" width="25" height="32" /></td>
</tr>
<tr>
<td valign="top"></td>
<td background="images/r10c3.gif"><img src="images/r6c3.gif" width="25" height="36" /></td>
</tr>
<tr>
<td valign="top"></td>
<td background="images/r10c3.gif"><img src="images/r7c3.gif" width="25" height="34" /></td>
</tr>
<tr>
<td valign="top"></td>
<td background="images/r10c3.gif"><img src="images/r8c3.gif" width="25" height="34" /></td>
</tr>
<tr>
<td valign="top"></td>
<td background="images/r10c3.gif"><img src="images/r9c3.gif" width="25" height="169" /></td>
<td valign="top" background="images/r10c4.gif"><img src="images/r10c4.gif" width="160" height="70" /></td>
<td valign="top"> </td>
</tr>
<tr>
<td></td>
<td valign="top" background="images/r10c3.gif"><img src="images/r10c3.gif" width="25" height="70" /></td>
<td valign="top" background="images/r10c4.gif"><img src="images/r10c4.gif" width="160" height="70" /></td>
<td valign="top" background="images/r10c5-rightbarback.gif"><img src="images/r10c5-rightbarback.gif" width="20" height="70" /></td>
</tr>
<tr>
<td></td>
<td><img src="images/r11c2.gif" width="415" height="55" /></td>
<td><img src="images/r11c3.gif" width="25" height="55" /></td>
<td><img src="images/r11c4.gif" width="160" height="55" /></td>
<td><img src="images/r11c5.gif" width="20" height="55" /></td>
</tr>
<tr>
<td colspan="5"><img src="images/r12bottombar.jpg" width="640" height="5" /></td>
</tr>
<tr>
<td></td>
<td> <img src="images/zapunxlogo.gif" width="113" height="35" /></td>
<td></td>
<td><img src="images/blackpaperlogo.gif" width="114" height="35" /></td>
<td></td>
</tr>
</table>
</body>
</html>
Your help would be greatly appreciated. :)
Thanks in advance,
Matt.
This is my first post here and I really need some help with this.
I have a table with images and text in various cells. When I load text into it and make it expand vertically (as it is designed to), the images separate from one another and go all funny...but they're aligned properly vertically, etc...
I've attached a screenshot outlining my problem areas.
Here is my code:
<!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">
<head>
<title>hoax :: no dignity, no shame</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
body {
background-color: #9C9987;
}
a:link {
color: #FF0000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #666666;
}
a:hover {
text-decoration: underline;
color: #FF0000;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('images/r3c4-newsover.gif','images/r4c4-bioover.gif','images/r5c4-showsover.gif','images/r6c4-mediaover.gif','images/r7c4-merchover.gif','images/r8c4-contactsover.gif')">
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="20"><img src="images/r1c1.jpg" width="20" height="25" hspace="0" vspace="0" /></td>
<td width="415" height="25"><img src="images/r1c2.gif" width="415" height="25" align="top" /></td>
<td width="25"><img src="images/r1c3.gif" width="25" height="25" /></td>
<td width="23"><img src="images/r1c4.gif" width="160" height="25" /></td>
<td width="17"><img src="images/r1c5.gif" width="20" height="25" /></td>
</tr>
<tr>
<td valign="top" width="20" height="52"><img src="images/r2c1.gif" width="20" height="52" hspace="0" vspace="0" /></td>
<td width="415" height="52" valign="top" background="images/r5c2-maincontentback.jpg"><img src="images/r2c2.gif" width="415" height="52" hspace="0" vspace="0" align="top" /></td>
<td valign="top" background="images/r10c3.gif" width="25" height="52"><img src="images/r2c3.jpg" width="25" height="52" /></td>
<td colspan="2" rowspan="7" valign="top"><table width="180" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="160"><img src="images/r2c4.gif" width="160" height="52" /></td>
<td width="340"><img src="images/r2c5.gif" width="20" height="52" /></td>
</tr>
<tr>
<td><a href="index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('News','','images/r3c4-newsover.gif',1)"><img src="images/r3c4-news.gif" alt="News" name="News" width="160" height="43" border="0" id="News" /></a></td>
<td><img src="images/r3c5.gif" width="20" height="43" /></td>
</tr>
<tr>
<td><a href="bio.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bio','','images/r4c4-bioover.gif',1)"><img src="images/r4c4-bio.gif" alt="Band Biography" name="Bio" width="160" height="25" border="0" id="Bio" /></a></td>
<td><img src="images/r4c5.gif" width="20" height="25" /></td>
</tr>
<tr>
<td><a href="shows.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Shows','','images/r5c4-showsover.gif',1)"><img src="images/r5c4-shows.gif" alt="Shows" name="Shows" width="160" height="32" border="0" id="Shows" /></a></td>
<td><img src="images/r5c5.gif" width="20" height="32" /></td>
</tr>
<tr>
<td><a href="media.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Media','','images/r6c4-mediaover.gif',1)"><img src="images/r6c4-media.gif" alt="Media" name="Media" width="160" height="36" border="0" id="Media" /></a></td>
<td><img src="images/r6c5.gif" width="20" height="36" /></td>
</tr>
<tr>
<td><a href="merch.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Merch','','images/r7c4-merchover.gif',1)"><img src="images/r7c4-merch.gif" alt="Merchandise" name="Merch" width="160" height="34" border="0" id="Merch" /></a></td>
<td><img src="images/r7c5.gif" width="20" height="34" /></td>
</tr>
<tr>
<td><a href="contacts.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contacts','','images/r8c4-contactsover.gif',1)"><img src="images/r8c4-contacts.gif" alt="Contact Us" name="Contacts" width="160" height="34" border="0" id="Contacts" /></a></td>
<td><img src="images/r8c5.gif" width="20" height="34" /></td>
</tr>
<tr>
<td background="images/r10c4.gif"><img src="images/r9c4.jpg" width="160" height="169" /></td>
<td><img src="images/r9c5.gif" width="20" height="169" /></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top"><img src="images/r3c1.gif" width="20" height="43" hspace="0" vspace="0" /></td>
<td valign="top" background="images/r5c2-maincontentback.jpg" height="43"><img src="images/r3c2.gif" width="415" height="43" hspace="0" vspace="0" align="top" /></td>
<td valign="top" background="images/r10c3.gif"><img src="images/r3c3.jpg" width="25" height="43" /></td>
</tr>
<tr>
<td valign="top"><img src="images/r4c1.jpg" width="20" height="25" hspace="0" vspace="0" /></td>
<td valign="top" background="images/r5c2-maincontentback.jpg" height="25"><img src="images/r4c2.gif" width="415" height="25" hspace="0" vspace="0" align="top" /></td>
<td valign="top" background="images/r10c3.gif"><img src="images/r4c3.jpg" width="25" height="25" /></td>
</tr>
<tr>
<td valign="top"></td>
<td rowspan="6" valign="top" background="images/r5c2-maincontentback.jpg"><table width="90%" align="center"><td>
<p>Test content.<br />
<br />
Test content.<br />
<br />
Test content.<br />
<br />
Test content.<br />
<br />
Test content.<br />
<br />
Test content.<br />
<br />
Test content.<br />
<br />
Test content.<br />
<br />
Test content.<br />
<br />
Test content.<br />
<br />
Test content.<br />
<br />
Test content.<br />
<br />
Test content.<br />
<br />
Test content.</p>
<p><br />
Test content. </p>
<p><br />
Test content. </p>
<p><br />
Test content. </p>
<p><br />
Test content. </p>
<p><br />
Test content. </p>
<p><br />
Test content. </p>
<p><br />
Test content. <br />
</p></td></table></td>
<td background="images/r10c3.gif"><img src="images/r5c3.gif" width="25" height="32" /></td>
</tr>
<tr>
<td valign="top"></td>
<td background="images/r10c3.gif"><img src="images/r6c3.gif" width="25" height="36" /></td>
</tr>
<tr>
<td valign="top"></td>
<td background="images/r10c3.gif"><img src="images/r7c3.gif" width="25" height="34" /></td>
</tr>
<tr>
<td valign="top"></td>
<td background="images/r10c3.gif"><img src="images/r8c3.gif" width="25" height="34" /></td>
</tr>
<tr>
<td valign="top"></td>
<td background="images/r10c3.gif"><img src="images/r9c3.gif" width="25" height="169" /></td>
<td valign="top" background="images/r10c4.gif"><img src="images/r10c4.gif" width="160" height="70" /></td>
<td valign="top"> </td>
</tr>
<tr>
<td></td>
<td valign="top" background="images/r10c3.gif"><img src="images/r10c3.gif" width="25" height="70" /></td>
<td valign="top" background="images/r10c4.gif"><img src="images/r10c4.gif" width="160" height="70" /></td>
<td valign="top" background="images/r10c5-rightbarback.gif"><img src="images/r10c5-rightbarback.gif" width="20" height="70" /></td>
</tr>
<tr>
<td></td>
<td><img src="images/r11c2.gif" width="415" height="55" /></td>
<td><img src="images/r11c3.gif" width="25" height="55" /></td>
<td><img src="images/r11c4.gif" width="160" height="55" /></td>
<td><img src="images/r11c5.gif" width="20" height="55" /></td>
</tr>
<tr>
<td colspan="5"><img src="images/r12bottombar.jpg" width="640" height="5" /></td>
</tr>
<tr>
<td></td>
<td> <img src="images/zapunxlogo.gif" width="113" height="35" /></td>
<td></td>
<td><img src="images/blackpaperlogo.gif" width="114" height="35" /></td>
<td></td>
</tr>
</table>
</body>
</html>
Your help would be greatly appreciated. :)
Thanks in advance,
Matt.