CSS and tables

I have a page with a table, the table has 2 columns and 7 rows. Basically the page is supposed to be a discography, with album covers on the left, and track listing etc on the right. I'm trying to align the cover imgs and the text to the left and the top of each cell, using CSS. I'm stuck! I can get the img moving where it's supposed to, but not the text. Can anyone help?
Here's the html of a sample cell I can't get working, and below that the corresponding CSS. Any help appreciated.

<tr class="album">
		   <td width="200px" class="album"><img src="images/phmcover.jpg" width="200" height="200"
				      alt="Pretty Hate Machine Album Cover" title="Pretty Hate Machine Album Cover">

		   </td>
		   <td class="albuminfo">	
			<h3>Pretty Hate Machine</h3>

			<h4>Released: October 20, 1989.</h4>

			<p>Track listing</p>

   			   <ol class="tracklisting">
			      <li>"Head Like a Hole" - 4:59</li>
   			      <li>"Terrible Lie" - 4:38</li>
   			      <li>"Down in It" - 3:46</li>
   			      <li>"Sanctified" - 5:48</li>
   			      <li>"Something I Can Never Have" - 5:54</li>
   			      <li>"Kinda I Want To" - 4:33</li>
   			      <li>"Sin" - 4:06</li>
   			      <li>"That's What I Get" - 4:30</li>
   			      <li>"The Only Time" - 4:47</li>
  			      <li>"Ringfinger" - 5:40</li>
			   </ol>


		   </td>
		</tr>

Code (markup):

here's the CSS:

tr.album {

   text-align: left;
   vertical-align: top;

   }

td.albuminfo {


   vertical-align: top;
   padding: 5px;

   }

Code (markup):

 

1) remove the tr and the td....
just use .album,....
2) Try to use span or div

 

Sorry, I'm a bit confused, do you mean replace the td.albuminfo and tr.album with just table.album? Sorry, I'm a CSS noob!

 

I'm taking a really rough guess here:

<tr class="album">
		   <td width="200" valign="top"><img src="images/phmcover.jpg" width="200" height="200"
				      alt="Pretty Hate Machine Album Cover" title="Pretty Hate Machine Album Cover">

		   </td>
		   <td valign="top">	
			<h3>Pretty Hate Machine</h3>

			<h4>Released: October 20, 1989.</h4>

			<p>Track listing</p>

   			   <ol class="tracklisting">
			      <li>"Head Like a Hole" - 4:59</li>
   			      <li>"Terrible Lie" - 4:38</li>
   			      <li>"Down in It" - 3:46</li>
   			      <li>"Sanctified" - 5:48</li>
   			      <li>"Something I Can Never Have" - 5:54</li>
   			      <li>"Kinda I Want To" - 4:33</li>
   			      <li>"Sin" - 4:06</li>
   			      <li>"That's What I Get" - 4:30</li>
   			      <li>"The Only Time" - 4:47</li>
  			      <li>"Ringfinger" - 5:40</li>
			   </ol>


		   </td>
		</tr>

HTML:

This is without CSS, is this what you mean?

 

That's sort of what I mean, but I'm trying to do it using css. I think I've been looking at it for so long that it doesn't make any sense now!

 

Eum, this is with CSS, what you just placed
I mean:
your CSS:

.album {

   text-align: left;
   vertical-align: top;

   }

.albuminfo {


   vertical-align: top;
   padding: 5px;

   }

Code (markup):

 

What he means is to completely convert it to CSS and get rid of tables.

 

Vertical align isn't a CSS property. So that may be part of why it doesn't work.

Anyhow, for this sort of thing using tables is perfectly alright. It's what tables were made for. 'tabular data' is the technical term.

if this doesn't work:

tr.album {

   text-align: left;}

Code (markup):

try

table tr.album {

 text-align: left;}

Code (markup):

 

I scrapped the old stuff and just tried this and it works:

td {

   vertical-align: top;

}

Code (markup):

Only problem is, it looks perfect in IE but the alignment is a little bit out in firefox. Any ideas on how to get them looking the same?

 

Strangely, I've learned there were IE related issues with the "vertical-align" attribute.
I'd try not to use it at all if possible.

 

Do you know what I'd be best substituting it for?

 

Top and bottom margin/padding is what I'd use instead as a workaround. I know that isn't a perfect alternative, but I don't know any better than that for now.

 

I've not seen any issues. Can you post a minimal test case for IE not working correctly?

cheers,

gary

 

Why not use floating Divs instead of tables?

<div id="container">
<div id="albumcover"><img src="images/phmcover.jpg" width="200" height="200"
                      alt="Pretty Hate Machine Album Cover" title="Pretty Hate Machine Album Cover"></div>
<div id="albuminfo">  <h3>Pretty Hate Machine</h3>

            <h4>Released: October 20, 1989.</h4>

            <p>Track listing</p>

         <ol class="tracklisting">
                  <li>"Head Like a Hole" - 4:59</li>
            <li>"Terrible Lie" - 4:38</li>
            <li>"Down in It" - 3:46</li>
            <li>"Sanctified" - 5:48</li>
            <li>"Something I Can Never Have" - 5:54</li>
            <li>"Kinda I Want To" - 4:33</li>
            <li>"Sin" - 4:06</li>
            <li>"That's What I Get" - 4:30</li>
            <li>"The Only Time" - 4:47</li>
              <li>"Ringfinger" - 5:40</li>
               </ol>
</div>
</div>

HTML:

 

I'm not sure? what would the css then look like?

 

Probably something like:

#container {
width: 700px;
}
#albumcover {
width: 200px;
float:left;
}
#albuminfo {
width:500px;
float:left;
}

HTML: