69 users online (0 members and 69 guests)  


  Results 1 to 5 of 5

Related

  1. Replies: 6
  2. link class problems    Forum: CSS Forum
    Replies: 1
  3. Third Class Video.com    Forum: Show it off!
    Replies: 0
  4. Spurs MVP a class act, not crass act    Forum: General Discussion
    Replies: 2
  5. college class    Forum: General Discussion
    Replies: 2
  1. #1
    futureproof's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2008
    Location
    Canberra
    Posts
    10

    css for td class valign not working

    Problem: I cannot get my <td> contents to valign "top" or "bottom" using classes in my style sheet; example td classes below (I know that text-align: left is default and valign: middle is default)

    Code:
    td.rt {text-align: right; valign: top;}
    td.rm {text-align: right; valign: middle;} 
    td.rb {text-align: right; valign: bottom;}
    Instead of using <td class="rt">, for example (right, top), I am having to resort to <td valign="top"> in the HTML code when I know that the td classes should work! I'm still a beginner so I'm using a table for the links on my friend's home page (and I can't post the link!)

    I prepared a stripped down style sheet to eliminate inheritance, etc but to no avail; I can get left, middle and right using "text-align" in CSS but the valign seems to be ignored. Any advice would be greatly appreciated.
    Regards from Australia
    Stu
    Attached Files Attached Files

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: css for td class valign not working

    Hi there futureproof,

    and a warm welcome to these forums.

    The correct wording for CSS is not valign but vertical-align, as in this basic example...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    table {
        border:2px solid #999;
        margin:auto;
     }
    td {
        width:200px;
        height:200px;
        border:1px solid #000;
     }
    td.rt {
        text-align:right; 
        vertical-align:top;
     }
    td.rm {
        text-align:right; 
        vertical-align:middle;
     } 
    td.rb {
        text-align:right;
        vertical-align:bottom;
     }
    </style>
    
    </head>
    <body>
    
    <table><tr>
    <td class="rt">top right</td>
    <td class="rm">middle right</td>
    <td class="rb">bottom right</td>
    </tr></table>
    
    </body>
    </html>

  3. #3
    futureproof's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2008
    Location
    Canberra
    Posts
    10

    Re: css for td class valign not working

    Thank you very much!

    I have three reasonably good books on XHTML and "vertical-align" is not mentioned in the CSS Chapters and I guess I didn't Google the right 'phrase' to get the answer I needed...should've just come to a forum first, eh?

    I have another ship-stopper which I'll put into a new thread if I can't find the answer by searching the forum.

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: css for td class valign not working

    Hi there futureproof,
    ...and "vertical-align" is not mentioned in the CSS Chapters and I guess I didn't Google the right 'phrase'..
    Here is a comprehensive list of CSS attributes...
    ...that may prove useful.

  5. #5
    futureproof's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2008
    Location
    Canberra
    Posts
    10

    Re: css for td class valign not working

    Thanks again coothead. I do have that page bookmarked along with many others, I should've looked harder

    In a similar vein I'm trying to specify class alignment at the table level (left, top) to avoid a class for every <tr> (but it's not working). At the moment I have a LOT of <tr class="lt"> for a table with data
    Code:
    <!DOCTYPE html 
      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/style1.css"/>
    <base href=”http://www.example.com/” target=”_blank”/>
    <style type="text/css">
     
    table.lt             {
    vertical-align:             top;
    margin-left:                 auto;
    margin-right:              auto;
    width:                          100%;
    border-collapse:        separate;
    clear:                           none;
    empty-cells:                show;
    float:                            none;
    }
    </style></head>
    Can I assume that text-align and vertical-align don't work at the table level?



Tags for this Thread