Unable to center text in IE but works in firefox

Question

Text inside td elements need to be centered except for Summary and Experience. This only appears to work in Firefox/chrome. In IE8 all td text are displayed as left-justified. No matter what I try it doesn't center it. Any particular reason why this would happen?

CSS

#viewAll {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    width: 100%;
    border-collapse: collapse;
    margin-left: 10px;
    table-layout: fixed;
}

#viewAll td, #viewAll th {
    font-size: 1.1em;
    border: 1px solid #98bf21;
    word-wrap: break-word;
    text-align: center;
    overflow: hidden;
}

#viewAll tbody td {
    padding: 2px;
}


#viewAll th {
    font-size: 1.1em;
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: #A7C942;
    color: #ffffff;
}

table

<?php
echo '<table id="viewAll" class="tablesorter">';

            echo '<thead>';
            echo '<tr align="center">';
            echo '<th style="width:70px;">Product</th>';
            echo '<th style="width:105px;">Prob</th>';
            echo '<th style="width:105px;">I</th>';
            echo '<th style="width:60px;">Status</th>';
            echo '<th style="width:120px;">Experience</th>';
            echo '<th style="width:200px;">Technical Summary</th>';
            echo '<th style="width:80px;">Record Created</th>';
            echo '<th style="width:80px;">Record Updated</th>';
            echo '<th style="width:50px;">Open</th>';

            echo '</tr>';
            echo '</thead>';
            echo '<tbody>';

            while ($data=mysqli_fetch_array($result)){

            #limiting the summary text displayed in the table
            $limited_summary = (strlen($data['summary']) > 300) ? substr(($data['summary']),0,300) . '...' : $data['summary'];
            $limited_exp = (strlen($data['exp']) > 300) ? substr(($data['exp']),0,300) . '...' : $data['exp'];

            echo '<tr align="center">

            <td style="width:70px; text-align:center;">'.$data['product'].'</td>';

            //if value is '-' do not display as link
            if ($data['prob'] != '-'){

            echo '<td style="width:105px;">'.$data['prob'].'</a></td>';   
            }
            else{
                    echo '<td style="width:105px; ">'.$data['prob'].'</td>';
            }

            if ($data['i'] != '-'){

              echo '<td style="width:105px; ">'.$data['i'].'</a></td>';
            }
            else{
                    echo '<td style="width:105px; ">'.$data['i'].'</td>';   
            }

            echo'<td style="width:40px; " >'.$data['status'].'</td>
            <td style="width:120px; text-align:left;">'.$limited_cust_exp.'</td>
            <td style="width:200px; text-align:left;">'.$limited_summary.'</td>
            <td style="width:80px; ">'.$data['created'].'</td>
            <td style="width:80px; ">'.$data['updated'].'</td>';


             if (isset($_SESSION['username'])){
             echo '<td style="width:50px; "> <form action="displayRecord.php" method="get">'.'
                <input type="hidden" name="id" value="'. $data['id'].'" style="text-decoration: none" /><input type="submit" value="Open" /></form></td>';
             }else{

                echo '<td style="width:50px; "> <form action="displayRecord.php" method="get">'.'
                <input type="hidden" name="id" value="'. $data['id'].'" style="text-decoration: none" /><input type="submit" value="View" /></form></td>';

             }


            echo '</tr>';

                }#end of while

echo '</tbody>';
echo '</table>';            

?>

EDIT 1: I just tried the exact same code via xampp and it centers it in IE. Any idea why it would work via XAMPP on my local machine but not via the server? (getting quite confused by this now)

EDIT 2: jsfiddle

Could you post actual generated HTML instead of PHP that creates it? Preferably on jsfiddle or similar service so we can view it, rather than guess about it? — Amadan, Dec 19 '12 at 05:02
@Amadan: yep I can see how that will help. The data is a bit sensitive so I'll have add some sample data and have it on jsfiddle. Will do it asap. — greenpool, Dec 19 '12 at 05:10
Your code looks like it should work. Could you post a testcase of the generated HTML (no PHP) to here and give us the link? http://jsfiddle.net/ — Emil Stenström, Dec 19 '12 at 08:22
@EmilStenström: I just tried it via xampp to get the HTML output and it works (See EDIT 1). Will post the HTML out shortly. — greenpool, Dec 19 '12 at 22:36

score 2 · Answer 1 · answered Dec 19 '12 at 05:24

2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Add this line of code at the top, it will work.

answered Dec 19 '12 at 05:24

Sahil Bhardwaj

345
3
6

Doesn't work. Didn't think it would. Care to explain why you thought that would work? – greenpool Dec 19 '12 at 05:30
1

@greenpool A `DOCTYPE` is extremely important especially for IE - it tells the browser how it should interpret your page (i.e. what it is). By the way your comment makes you sound extremely arrogant and is probably going to greatly reduce the amount of people willing to help you. – Marty Dec 19 '12 at 06:49
@MartyWallace: Didn't mean to sound arrogant. I do know what it does and i do have the html5 doctype ` ` declared in my header file. I guess thats something I should have mentioned. – greenpool Dec 19 '12 at 21:45

score 0 · Answer 2 · answered Dec 19 '12 at 05:34

0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Add this and it would work probably

answered Dec 19 '12 at 05:34

Engineer

5,911
4
31
58

Ugh, I'm sorry. I got a bad case of the SO harshes earlier. A perfectly reasonable answer got marked down a lot with zero comments as to why... – Ian Atkin Dec 20 '12 at 05:41
@Ian no problem mate..Vote my one up and feel like your one is voted up hahahah...cheers – Engineer Dec 20 '12 at 05:45

score -1 · Answer 3 · answered Dec 19 '12 at 08:00

-1

Inline CSS overwrites the internal or external css. You have used <th style="width:x"> to set the width of the columns. Insted use <th width="x">.

This should work.

answered Dec 19 '12 at 08:00

Vishal Venugopal

168
6

They're both the same thing. – Ian Atkin Dec 19 '12 at 23:07

Unable to center text in IE but works in firefox

3 Answers3