SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Location
    Texas (be nice..)
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help centering HTML <table>...

    Hi, I'm afraid to say that I'm finally having a little trouble with my mental capacities and I'll need a little assistance from a few geniouses. The problem is that I've got a <table> in a <div> with the the table data '<td>' font-type set (in CSS) to "Reservoir Grunge". The table is 'centered' within the div and shows up perfectly in IE 7, but when I look at it with Safari the text is wrong and it's no longer centered. I realize that the Safari browser (on the mac) doesn't have the font-type I have defined for this table and I CAN SEE why it is off-centered.
    My question and main concern is "What is happening to the 'width' of the table cells when the font-type shrinks from Reservoir Grunge (IE) to Verdana (Safari-mac)??"

    Here's the code I've got going for this puppy:

    <div id="footer">
    <h3>- Contact Info:<a name="ContactInfo" id="ContactInfo"></a></h3>
    <table width="412" align="center">
    <tr>
    <td width="141" align="right">phone:</td>
    <td width="259" align="left">&nbsp;555-555-5555</td>
    </tr>
    </table>
    </div>

    I just need to figure out a way so that when there's a browser switch the <td> width changes with it to match the font-type SO IT WILL REMAIN CENTERED on every platform.. -Honestly this sounds like DHTML or MetaDate or some type of "if/then" statement to me, something I'm not very familiar with!
    I'd appreciate any help you could give, thank you
    Nathan

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is the purpose of having a table here? - why not use a <p> with centered text? :
    Code:
    <div id="footer">
    <h3>- Contact Info:<a name="ContactInfo" id="ContactInfo"></a></h3>
    <p>phone:&nbsp;555-555-5555</p>
    </div>
    Code:
    #footer p {
      text-align: center;
      font-family: "Reservoir Grunge", verdana, sans-serif;
    }

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Nathan, and welcome to SitePoint Forums!

    Quote Originally Posted by talkitout View Post
    -Honestly this sounds like DHTML or MetaDate or some type of "if/then" statement to me, something I'm not very familiar with!
    Actually, since it deals with presentation, it sounds like CSS.

    • HTML is for describing the structure and semantics of the content
    • CSS is for controlling the presentation of the content
    • JavaScript is for adding dynamic and/or interactive behaviour to a document


    As Centauri said, this doesn't seem like tabular information, so using <table> is incorrect.
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well stated tommy, centauri:

    Here is another way you can set this up.

    <div id="footer">
    <h3><a href="#contactInfo">Contact Info</a></h3>

    <div id="contactInfo">
    <strong>Phone</strong>
    <em>555-555-5555</em>
    </div>
    </div>

    Semantically this will work because you are strongly emphasizing the phone and emphasizing
    the number itself. If you do not want the phone in bold type or the number in italics you
    can set the font weight/style to normal.

    For your css:

    #contactInfo strong, #contactInfo em {
    display: block; /* If you want more control over these tags since they are inline */
    font-style: normal;
    font-weight: normal;
    }
    #contactInfo strong { float: left; }
    #contactInfo em { float: right; }

  5. #5
    SitePoint Member
    Join Date
    Jul 2008
    Location
    Texas (be nice..)
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    AutisticCuckoo, thank you for the tidbit of code-language clarification.. I need that from time to time!

    cooper.semantics, I like your recommendation for using <em> and <strong> (which I don't often use), and then 'floating' them each to the side- a positioning element which I usually only apply to divs, not necessarily to more basic text-formatting tags. I'm gonna see what I can do with your recommendation..

    thanks a lot guys!!
    Nathan


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
  •