My img tag bumps the rest of the data out

windows · Jan 10, 2008

Ok. I have a table, then a table in that. In in the table in that I have this code, which includes another table. 
 
<table width="750" align="center" cellpadding="0" cellspacing="0"> 
<tr> 
<td width="150" height="100" valign="top" align="center"> 
Navigation 
</td> 
<td height="100" width="250" valign="top" class="latest"> 
<img src=http://www.htmlforums.com/archive/index.php/"images/border.gif"> 
<table cellpadding="0" border="0" cellspacing="0"> 
<tr> 
<td height="10"> 
Latest Mixes 
</td> 
</tr> 
<tr> 
<td height="90" width="67> 
Anime: 
<img src=http://www.htmlforums.com/archive/index.php/"images/game.gif"> 
</td> 
<td height="90 width="67> 
VG: 
<img src=http://www.htmlforums.com/archive/index.php/"images/game.gif"> 
</td> 
<td height="90 width="67> 
Original 
<img src=http://www.htmlforums.com/archive/index.php/"images/game.gif"> 
</td> 
</tr> 
</table> 
</td> 
</tr> 
</table> 
 
 
What's happening though, is that in the first table. I have the <td> code, in that <td> I have a table which has the Latest Mixes part. The problem is that the latest mixes part doesn't go inside the <td> part that the table is in. It comes outside of it. How would I get it in? 
 
 
I'll try and simplify. 
 
<table> 
<td> 
<table> 
<td> 
latest mixes 
</td> 
</table> 
</td> 
</table> 
 
This appears as so: 
 
code : <table> <td> 
-------------------- 
Whatever is in this <td> tag appears in this box. 
-------------------- 
code : <table> <td> 
But whatever is in this <td> appears outside the box. 
 
I want it like this 
code : <table> <td> 
------------------- 
box 
<table> <td> 
box 
</td> 
</table> 
------------------- 
</td> 
</table> 
 
 
What is my problem?Two things... you need to colspan the first TD of the second table. You must have the same amount of Cols through out an individual table or use colspan to merge them. 
 
Secondly always close your TD's on the same line they start. 
 
Try this out: 
<table width="750" align="center" cellpadding="0" cellspacing="0"> 
<tr> 
<td width="150" height="100" valign="top" align="center">Navigation</td> 
<td height="100" width="250" valign="top" class="latest"><img src=http://www.htmlforums.com/archive/index.php/"images/border.gif"> 
<table cellpadding="0" border="0" cellspacing="0"> 
<tr> 
<td colspan="3" height="10">Latest Mixes</td> 
</tr> 
<tr> 
<td height="90" width="67>Anime: <img src=http://www.htmlforums.com/archive/index.php/"images/game.gif"></td> 
<td height="90 width="67>VG: <img src=http://www.htmlforums.com/archive/index.php/"images/game.gif"></td> 
<td height="90 width="67>Original <img src=http://www.htmlforums.com/archive/index.php/"images/game.gif"></td> 
</tr> 
</table> 
</td> 
</tr> 
</table>That didn't do it :\ 
 
I'll give you the full code for the page, I changed a couple things to get it to work better. And <td> tags don't have to closed on the same line... 
 
 
<html> 
<head> 
<title>Sound Tempest - Layout</title> 
<style> 
.header { 
background-image: 
url("images/header.gif"); 
background-repeat: repeat-x 
} 
.bar { 
background-image: 
url("images/bar.gif"); 
background-repeat: repeat-x 
} 
.latest { 
background-image: 
url("images/bg.gif"); 
background-repeat: repeat-x 
} 
</style> 
</head> 
<body bgcolor="F0F0F0"> 
<table width="750" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000" style="border-collapse: collapse" border="1"> 
<tr> 
<td colspan="2" height="100" width="100%" class="header"> 
<img src=http://www.htmlforums.com/archive/index.php/"images/logo.gif"><img src="images/expandlogo.gif"> 
</td> 
</tr> 
<tr> 
<td colspan="2" height="25" width="100%" class="bar"> 
Welcome back USERNAME 
</td> 
</tr> 
<tr> 
<td width="750" height="200" bgcolor="#FFFFFF"> 
<table width="750" align="center" cellpadding="0" cellspacing="0"> 
<tr> 
<td width="150" height="160" align="center"> 
Navigation 
</td> 
<td height="200" width="500" class="latest"> 
<img src=http://www.htmlforums.com/archive/index.php/"images/border.gif"> 
<table cellpadding="0" border="0" cellspacing="0" width="250" height="100"> 
<tr> 
<td colspan="3" height="5"> 
Latest Mixes 
</td> 
</tr> 
<tr> 
<td width="60"> 
Anime: 
<img src=http://www.htmlforums.com/archive/index.php/"images/game.gif"> 
</td> 
<td width="60"> 
VG: 
<img src=http://www.htmlforums.com/archive/index.php/"images/game.gif"> 
</td> 
<td width="60"> 
Original 
<img src=http://www.htmlforums.com/archive/index.php/"images/game.gif"> 
</td> 
</tr> 
</table> 
</td> 
</tr> 
</table> 
</td> 
</tr> 
</table> 
</body> 
</html>First of all, keep your CSS statements on the same line. YOu have it written like this: 
 
 
.header { 
background-image: 
url("images/header.gif"); 
background-repeat: repeat-x 
} 
 
 
Write it like this: (don't forget red-highlighted data, which you did) 
 
.header { 
background-image: url("images/header.gif"); 
background-repeat: repeat-x; 
} 
 
<td>'s must be on the same line, otherwise it'll screw up the code, thus the page look. It doesn't matter if the line wraps in the text editor, but just make sure there are no spaces in between the td's (excluding word spacing). 
 
Write your <td>'s like this: 
 
<td width="60">Anime: <img src=http://www.htmlforums.com/archive/index.php/"images/game.gif"></td> 
 
NOTE: Your other <tags> don't matter if they are on different lines. 
 
Also, you need a DTD and a <meta> tag for the CHARset; which maybe you already have and simply didn't paste. 
 
Gandalf

Thanks for pointing out the TD issue before I got back in there.

My img tag bumps the rest of the data out

windows

Guest