Simple HTML that comes out looking way off?

Answer 1

Might wanna try a valign on the TD tags. valign="middle" for all of them.

Answer 2

Use a fixed width for your table, and each td tag. You have the width of the table set to 100%, and a fixed width on the first tag. The second and third td tags are adjusting based on the content within the td tags to fill the 100% width on the table tag.

Answer 3

To add to Pete's answer, and to use the CSS rather than inline presentational-markup, you may want to try adding vertical-align: middle to the css for the table-cells.

As an afterthought, you may want to add a line-height: 100px (or however high your image is, plus a little padding) to your CSS for the cells containing the images, and specify line-height: 50px (50% of the line-height of the image cells) for the cells containing descriptive text, I'm not sure it'll work, but it sometimes works for centring text when vertical-align doesn't.

Answer 4

try temporarily adding a border to the table so you can see where the image and text are getting aligned in their respective tds. Also, do you need to use a span for the description text?

Answer 5

What browser? I copy-pasted your HTML (added html & body tags), and copy-pasted your CSS (added head & style tags), and the vertical alignment is accurate -- doesn't match the problem in your picture.

Try adding a border to various elements, see if that sheds light on the crazy. And make sure you don't have typos between your code and the code pasted here.

Answer 6

Are you using a CSS reset file? This looks like a CSS thing to me. Maybe line-height?

I'm not sure it matters, but I would switch from using the break and span to using heading and paragraph tags and then just style those.

  <td valign="middle">
    <h2>Test Product</h2>
    <p>This has a short description.</p>
  </td>