Text div not justifying in Safari & Google Chrome

Question

Hi, all.

I was wondering if someone could help me figure out why the particular paragraph is not following the style:

text-align: justify;

It works fine when I preview it on Komodo, but when I preview it on Safari and Google Chrome, it seems like the text is aligned left instead of justified.

Here's my code - HTML:

         <div id="sidebar">
            <h4>Professional Consultation</h4>
            <ul id="legserv">
                <li>Corporation Law</li>
                <li>Tariff & Customs</li>
                <li>Maritime & Admiralty</li>
                <li>Labor Relations & Personnel<br />Management</li>
                <li>Intellectual Property</li>
                <li>Foreign Investments &<br />Investment Incentives</li>
                <li>Litigation &#40;in the above<br />specialized fields of law&#41;</li>
            </ul>
        </div>

        <div id="line">
            <p>GBDLR Sidebar</p>
        </div>

        <div id="rightbody">
            <p class="baby"><br /></p>
            <h4>OUR VISION</h4>
            <p>We envision that our Firm&#39;s legal services can contribute in a significant manner to our clients&#39; total risk and remedial management framework and help to achieve and optimize their business, financial, and social goals.</p>
            <hr /><br /><br />
            <p class="small">Contact Us</p><br />
            <p>7/F ALPAP 1 Bldg., 140 L.P Leviste St., Salcedo Village , Makati City<br /></p>

            <table class="table1">
                <tr><td width="50">Tel&#58;</td><td width="200">&#43;632-815-8701 to 03 &#59;</td></tr>
                <tr><td>&nbsp;</td><td>&#43;632-752-1979</td></tr>
                <tr><td>Fax&#58;</td><td>&#43;632-819-2097</td></tr>
            </table>
        </div>

CSS:

    #sidebar
    {
        color: #aeaeae;
        margin-top: -30px;
        margin-left: 35px;
        width: 290px;
        float: left;
    }

    #sidebar ul
    {
        font-size: 18px;
        line-height: 1.5em;
        margin-top: -20px;
    }

    #sidebar h4
    {
        font-size: 24px;
        font-weight: lighter;
        color: #d6d6d6;
    }

    #line p
    {
        text-indent: -9999px;
        background: url(../images/GBDLR-Line.png) no-repeat;
        width: 41px;
        height: 417px;
        float: left;
        margin-top: -45px;
    }

    #rightbody
    {
        color: #aeaeae;
        margin-top: -45px;
        margin-left: 35px;
        width: 830px;
    }

    #rightbody p
    {
        font-size: 18px;
        margin-top: -20px;
        text-align: justify;
    }

    #rightbody p.baby
    {
        font-size: 5px;
        line-height: 1em;
        text-align: justify;
    }

    .table1
    {
        font-size: 16px;
        font-weight: lighter;
        line-height: 1em;
        text-align: justify;
        font-family: Arial;
    }

    #rightbody h4
    {
        font-size: 32px;
        font-weight: lighter;
        color: #d6d6d6;
    }

    #rightbody p.small
    {
        font-size: 20px;
        font-weight: lighter;
        color: #d6d6d6;
    }

    hr
    {
        height:0.5px;
    }

Also, I'm having trouble with the horizontal line. Is it possible to make it thin? I set it at 0.5px height, but it's not following the style. :(

Hope someone can help me.

Thanks so much!! :)

P.S. If you'd like to see the entire code, please email me at: laura at giroapps.com Would really appreciate it. :)