table problem

[gamer10101]

i'm having a little trouble with a table on my page. it works just fine in firefox but not in IE. heres a bit of my code, im stumped on whats wrong in it. i'm writing a script for an online store for fun which i'm sure i wont be publishing. my problem is the description cell starts lined up with the bottom of the img when it should be right underneath the name. instead it stretches out the name cell to the size of the image. everything else works out fine in the page (most of which was removed for simplicity). thanks for any help you guys can come up with.

<table border=0 cellspacing=0 cellpadding=4>
  <tr>
    <td rowspan=2 valign=top>
      <img height=240 src=myimg.jpg class=ProductImage></a>
    </td>
    <td width=300 valign=top height=50>
      <span class=ProductName>myname</span>
    </td>
    <td align=right valign=top width=80 height=50>
      <font color=green><b>myprice</b></font>
    </td>
  </tr>
  <tr>
    <td colspan=2 rowspan=2 width=380 valign=top height=5>
      description
    </td>
  </tr>
  <tr>
    <td align=right valign=top height=50>
    <form method=get action="/cart.php">      Order: <input type=text name=quantity value=0 size=1><br>
      <input type=submit value="Order Now!">
      </form>
    </td>
  </tr>
  <tr>
    <td valign=bottom align=left colspan=3>
      specs
    </td>
  </tr>
</table>

[jeremy]

Which version of IE?

[gamer10101]

Originally Posted by jeremy

Which version of IE?

7.0, although i prefer 6

[dflem2003]

You should use embedded tables for more complex organization. (Well, you should really position everything with CSS--not to be confused with css-positioning--, but for your purpose tables are acceptable).

here is my version, which works both in IE and Firefox. I set border to 1 so you can see if everything is properly set, you can set it to zero though.

<table border=1 cellspacing=0 cellpadding=4>
	<tr>
		<td valign=top>
			<img height=240 src=myimg.jpg class=ProductImage></a>
		</td>
		<td valign=top>
			<table border="1" width="100%" height="100%">
				<tr>
					<td width=300 valign=top height=50>
						<span class=ProductName>myname</span>
					</td>
					<td align=right valign=top width=80 height=50>
						<font color=green><b>myprice</b></font>
					</td>
				</tr>
				<tr>
					<td colspan=2 width=380 valign=top height=5>
					description
					</td>
				</tr>
			</table>
		</td>

	</tr>
	
	<tr>
		<td align=right valign=top height=50 colspan=2>
			<form method=get action="/cart.php">      Order: <input type=text name=quantity value=0 size=1><br>
			<input type=submit value="Order Now!">
			</form>
		</td>
	</tr>
	<tr>
		<td valign=bottom align=left colspan=2>
		specs
		</td>
	</tr>
</table>

[gamer10101]

Originally Posted by dflem2003

You should use embedded tables for more complex organization. (Well, you should really position everything with CSS--not to be confused with css-positioning--, but for your purpose tables are acceptable).

here is my version, which works both in IE and Firefox. I set border to 1 so you can see if everything is properly set, you can set it to zero though.

thanks for the tip, works fine that way. i still can't get around what was wrong with my code though, did you see anything that might have screwed things up? i'm still gonna play around with it a bit later on to find out for future reference, and so i can sleep at night. this has been bugging me for a while now. i had another problem with ie/firefox a bit ago with a double mysql insert in firefox. problem was an empty img src address that i left empty because i hadn't made the image yet. it took me some time to figure that out too.

[dflem2003]

Actually yeah, now that I look at it again, the problem is that you put a rowspan=2 in the description <td>. Take that out. It should only have a colspan=2.

You can also put a colspan of 3 where the form is, to push that out to the right. Here is the code. Wow, I guess for an html old-timer like me it takes a while sometimes. I think its because I take a different approach to these things... hmm....

Heres the code, with only the rowspan taken out of the <td> tag of the description cell, and a rowspan=3 added to the form cell.

<table border=0 cellspacing=0 cellpadding=4>
  <tr>
    <td rowspan=2 valign=top>
      <img height=240 src=myimg.jpg class=ProductImage></a>
    </td>
    <td width=300 valign=top height=50>
      <span class=ProductName>myname</span>
    </td>
    <td align=right valign=top width=80 height=50>
      <font color=green><b>myprice</b></font>
    </td>
  </tr>
  <tr>
    <td colspan=2 width=380 valign=top height=5>
      description
    </td>
  </tr>
  <tr>
    <td align=right valign=top height=50 colspan=3>
    <form method=get action="/cart.php">      Order: <input type=text name=quantity value=0 size=1><br>
      <input type=submit value="Order Now!">
      </form>
    </td>
  </tr>
  <tr>
    <td valign=bottom align=left colspan=3>
      specs
    </td>
  </tr>
</table>