SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centering a table within a div works in IE but not FF

    The code below works to center a table within a div in IE but not FF. The text below the table centers just fine, but the table remains left justified. Could somebody please tell me what I have wrong here because I've tried some modifications to the CSS without any luck.

    <style type='text/css' media='all'>
    div.mysite1{font-size: 14px;text-align:center}
    td.mysite-primary{background-color: rgb(12,28,100);color:rgb(255,255,255);font-size: 14px;}

    td.mysite-secondary-right{align:right;background-color: rgb(215,14,238);color:rgb(45,0,0);font-size:14px;text-align:right;}

    td.mysite-secondary-left{align:right;background-color: rgb(215,14,238);color:rgb(45,0,0);font-size:14px;text-align:right;}

    center.table{margin-left:auto; margin-right:auto; text-align:left;}
    </style>
    <div class='mysite1'>
    <table class='center'>
    <tr>
    <td class = 'mysite-primary'><b>Value1</b></td>
    <td class = 'mysite-secondary-left'>0</td>
    </tr>
    <tr>
    <td class = 'mysite-primary'><b>Value2</b></td>
    <td class = 'mysite-secondary-right'>1</td>
    </tr>
    <tr>
    <td class = 'mysite-primary'><b>Value3</b></td>
    <td class = 'mysite-secondary-left'>0</td>
    </tr>
    <tr>
    <td class = 'mysite-primary'><b>Value4</b></td>
    <td class = 'mysite-secondary-left'>7.1</td>
    </tr>
    <tr>
    <td class = 'mysite-primary'<b>Value5</b></td>
    <td class = 'mysite-secondary-left'>13.1</td>
    </tr>
    <tr>
    <td class = 'mysite-primary'><b>Value6</b></td>
    <td class = 'mysite-secondary-left'>9.5</td>
    </tr>
    <tr>
    <td class = 'mysite-primary'><b>Value7</b></td>
    <td class = 'mysite-secondary-left'>22.6</td>
    </tr>
    <tr>
    <td class = 'mysite-primary'><b>Value8</b></td>
    <td class = 'mysite-secondary-left'>2.2</td>
    </tr>
    <tr>
    <td class = 'mysite-primary'><b>Value9</b></td>
    <td class = 'mysite-secondary-left'>0.6</td>
    </tr>
    </table>
    More at <a href='http://mysite.com/'>mysite.com</a>.</div>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    It should be table.center and not center.table
    Code:
    table.center{margin-left:auto; margin-right:auto; text-align:left;}

    You also have a missing closing td bracket so run it through the validator and it will tell you where

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you. That worked. I found the closing tag also. But what is this validator you speak of?

  4. #4


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •