#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2011
    Posts
    14
    Rep Power
    0

    Problems setting <td> margins


    I have some directions that I would like to display in two columns on a login page. I have set up a table to display the instructions for students and employees side by side. As it displays on my browser, the text of the instructions are formatted as I specify in the "style" except for the "margin-left" and "margin-right" parameters. So, in my browser, the code below shows up with the text justified, but the text of one column is right up against the text of the other column, making it very difficult to read.

    I have whittled it down to as little complexity, in it's own little isolated HTML file to try and isolate the problem, but now I am stumped. Admittedly, I have very little experience with web development, so I'm sure this is a really stupid error on my part. I actually had this working just the way I wanted it the first time I made it, but my profile got lost that same day, so I had no backup

    Here's the code, and thanks in advance for any help!

    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" >
    <head>
        <title>Untitled Page</title>
    </head>
    <body>
    
            <table>
                <tr>
                    <th style="text-align:center;">
                        Students
                    </th>
                    <th style="text-align:center;">
                        Employees
                    </th>
                </tr>
                <tr>
                    <td style="width:50%;margin-right:10px;vertical-align:top;text-align:justify;">
                        If you have never claimed your account or set up a password,
                        <a href="http://some.bslink.edu">
                            <span style="text-decoration:underline;">
                                please click here to claim your account.
                            </span>
                        </a> 
                        Please use your Student ID Number and the password chosen when your account was claimed to log into your account.
                    </td>
                    <td style="width:50%;margin-left:10px;vertical-align:top;text-align:justify;">
                        Please use your network ID (firstname.lastname) and your network password when 
                        logging in to your account.  Please note that if this is your first time 
                        logging into the system, you will need to have already logged into a campus 
                        computer.
                    </td>
                </tr>
                <tr>
                    <th colspan="2">
                        Forgot Your Password?
                    </th>
                </tr>
                <tr>
                    <td style="width:50%;margin-right:10px;vertical-align:top;text-align:justify;">
                        Students may change their password by using the
                        <a href="http://someother.bslink.edu">
                        Pleasant Password System (PPS)</a> system.  If you are receiving an error on PPS 
                        that new students must claim their account, please be aware that whether you 
                        are a new or existing student, this means that you must claim your account.
                    </td>
                    <td style="width:50%;margin-right:10px;vertical-align:top;text-align:justify;">
                        Employees who need to reset their password will need to call Tech Support 
                        at 866-555-1234.  Please note: Tech Support cannot assist anyone except the 
                        employee whose account needs to be reset.
                    </td>
                </tr>
            </table>
    
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    869
    Rep Power
    275
    my guess is that you don't need margin-left/margin-right, but, instead, need to use padding-left/padding-right to separate the text sections.
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    To add to what DonR said, the margin properties do not apply to table-cells. You either have to use padding on the cells or use border-spacing. IE7 does not support the border-spacing property though.

    P.S. "text-align:justify" can make text heard to read. Use it with caution.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo