Problems setting <td> margins

Dev Shed Forums Sponsor:

June 25th, 2012, 06:47 PM

Grimey

Registered User

Join Date: Oct 2011

Posts: 14

Time spent in forums: 7 h 25 m 27 sec
Reputation 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>

June 25th, 2012, 07:52 PM

DonR

Contributing User

Join Date: Oct 2009

Posts: 496

Folding Points: 29722 Folding Title: Starter Folder

Time spent in forums: 2 Weeks 2 Days 21 h 28 m 33 sec
Reputation Power: 216

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.

June 26th, 2012, 03:55 AM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,894

Time spent in forums: 6 Months 2 Days 19 h 45 m 6 sec
Reputation Power: 4192

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. I'm available for hire at Dynamic Site Solutions.

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).

Problems setting <td> margins

Developer Shed Advertisers and Affiliates