#1
  1. No Profile Picture
    Demonic Swordsman DGQB
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Apr 2003
    Posts
    1,043
    Rep Power
    83

    a few questions about CSS


    1. what's the equavelent of align="center" in CSS? The only thing I have noticed is text-align, but that doesn't help when I want to center a table. P.S. I must say no to deprecated tags like <center>

    2. I want to include 2 classes in an element, such as td class="td" class="td1", but of course only one can be included normally. Is there a way to use both?

    Thanks.
  2. #2
  3. Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Oct 2001
    Location
    New Zealand
    Posts
    1,774
    Rep Power
    24
    text-align does work:

    <p style='text-align:center'>
    <table style='width:90%; background-color:yellow;'>
    <tr><td style='text-align:center;'>Hello!</td></tr>
    </table>
    </p>

    should hopefully prove that.
  4. #3
  5. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1099
    Not sure if you're going for some sort of standards compliance, but I don't think putting a <table> inside a <p> will validate as XHTML. Don't know if it matters, but if it does, I'll offer another solution.
    Code:
    <style type="text/css">
    .centered
      {
      width: 50%;
      margin-left: auto;
      margin-right: auto;
      }
    </style>
    
    <table class="centered">
      <tr>
        <td>Something</td>
      </tr>
    </table>
    As for two classes on one element, no can do. But you can use an ID and a class in combination with each other, and if you look over where you have the two classes, you'll probably find that makes more sense logically.
  6. #4
  7. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
  8. #5
  9. No Profile Picture
    Demonic Swordsman DGQB
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Apr 2003
    Posts
    1,043
    Rep Power
    83
    thank you all.

    for the first problem, I've settled with <div class="center">, which seems to work, and special thanks to adios for the link.
  10. #6
  11. No Profile Picture
    Demonic Swordsman DGQB
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Apr 2003
    Posts
    1,043
    Rep Power
    83
    Okay, it turned out things were not so simple. Apparently, the <div class="center"> works fine with IE, but Netscape will not do. On the other hand, the solution jharnois presented will ONLY work with Netscape, not with IE. Ahh, the frustration of customized browsers support.
  12. #7
  13. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1099
    I think for what I suggested you have to have the container's style have text-align:center. So if you're centering a table inside the body, apply text-align:center to the body. If it's a nested table inside a div, apply it to the div. All of that in addition to what I already posted.
  14. #8
  15. No Profile Picture
    CF sMod
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Location
    Maine, USA (a.k.a. Boonies)
    Posts
    242
    Rep Power
    15
    Notice that the property is text-align? Yes. Text. Inline elements. Not block-level elements.

    The correct way of centering blocks is:
    margin-left: auto;
    margin-right: auto;

    Or if you know you won't have any top/bottom margins, you can just say:
    margin: 0 auto;

    The fact that IE aligns blocks with text-align is a known bug - please don't perpetuate it's usage.
    Jason Contact Me
    Super moderator @ CodingForums
  16. #9
  17. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1099
    Yes, while using text-align to align a block-level element is technically incorrect, there are serveral known bugs that require the use of some kind of workaround, and that is the workaround for the problem stated.

IMN logo majestic logo threadwatch logo seochat tools logo