1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS and tables

Discussion in 'CSS' started by swollenpickles, Apr 5, 2007.

  1. #1
    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):

     
    swollenpickles, Apr 5, 2007 IP
  2. Dima_2005

    Dima_2005 Peon

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    1) remove the tr and the td....
    just use .album,....
    2) Try to use span or div
     
    Dima_2005, Apr 6, 2007 IP
  3. swollenpickles

    swollenpickles Active Member

    Messages:
    1,271
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    80
    #3
    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!
     
    swollenpickles, Apr 7, 2007 IP
  4. nfd2005

    nfd2005 Well-Known Member

    Messages:
    295
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    130
    #4
    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?
     
    nfd2005, Apr 7, 2007 IP
  5. swollenpickles

    swollenpickles Active Member

    Messages:
    1,271
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    80
    #5
    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! :(
     
    swollenpickles, Apr 7, 2007 IP
  6. Dima_2005

    Dima_2005 Peon

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    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):
     
    Dima_2005, Apr 7, 2007 IP
  7. im2lazy

    im2lazy Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    What he means is to completely convert it to CSS and get rid of tables.
     
    im2lazy, Apr 7, 2007 IP
  8. kh7

    kh7 Peon

    Messages:
    2,715
    Likes Received:
    109
    Best Answers:
    0
    Trophy Points:
    0
    #8
    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):
     
    kh7, Apr 7, 2007 IP
  9. swollenpickles

    swollenpickles Active Member

    Messages:
    1,271
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    80
    #9
    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?
     
    swollenpickles, Apr 7, 2007 IP
  10. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    297
    Best Answers:
    0
    Trophy Points:
    250
    #10
    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.
     
    Clive, Apr 7, 2007 IP
  11. swollenpickles

    swollenpickles Active Member

    Messages:
    1,271
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    80
    #11
    Do you know what I'd be best substituting it for?
     
    swollenpickles, Apr 7, 2007 IP
  12. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    297
    Best Answers:
    0
    Trophy Points:
    250
    #12
    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.
     
    Clive, Apr 7, 2007 IP
  13. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #13
    I've not seen any issues. Can you post a minimal test case for IE not working correctly?

    cheers,

    gary
     
    kk5st, Apr 7, 2007 IP
  14. nfd2005

    nfd2005 Well-Known Member

    Messages:
    295
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    130
    #14
    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:
     
    nfd2005, Apr 7, 2007 IP
  15. swollenpickles

    swollenpickles Active Member

    Messages:
    1,271
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    80
    #15
    I'm not sure? :confused: what would the css then look like?
     
    swollenpickles, Apr 7, 2007 IP
  16. nfd2005

    nfd2005 Well-Known Member

    Messages:
    295
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    130
    #16
    Probably something like:


    #container {
    width: 700px;
    }
    #albumcover {
    width: 200px;
    float:left;
    }
    #albuminfo {
    width:500px;
    float:left;
    }
    HTML:
     
    nfd2005, Apr 7, 2007 IP