CODEWITHSUNDEEP
htmlcss
HockChai Lim
HockChai Lim

Reputation: 1713

Not able to get IE9 to center table in div

Can't seem to be able to get IE9 to center the table (id="needToCenter") within the div. It works fine in FF. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<BODY>
    <FORM id=viewDevicesForm method=post name=viewDevicesForm action=/viewDevices.jsf>
        <DIV style="border: 1px grey solid; MARGIN-TOP: 20px; WIDTH: 100%;">
            <TABLE id="needToCenter" style="MARGIN: auto" border=0 cellSpacing=0 cellPadding=0>
                <TBODY>
                    <TR>
                        <TD><A style="HEIGHT: 22px; FONT-WEIGHT: 900" id=viewDevicesForm:_idJsp146 href="http://localhost:9082/viewDevices.jsf?Flow=view#" name=viewDevicesForm:_idJsp146>MASS EDIT</A>
                        </TD>
                    </TR>
                </TBODY>
            </TABLE>
        </DIV>
    </FORM>
</BODY>
</HTML>

Upvotes: 0

Views: 201

Answers (4)

Tieson T.
Tieson T.

Reputation: 21231

margin: auto only works for explicitly-sized elements. Add a width to your table if you want it to center itself inside it's container.

Example: http://jsfiddle.net/mqqu9/

<div style="border: 1px grey solid; margin-top: 20px; width: 100%;">
    <table id="needToCenter" style="margin: 2em auto; width: 80%; border: solid 1px #c00;">
        <tbody>
            <tr>
                <td>
            <a style="height: 22px; font-weight: 900" id="viewDevicesForm:_idJsp146" href="http://localhost:9082/viewDevices.jsf?Flow=view#" name="viewDevicesForm:_idJsp146">MASS EDIT</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

I added a border and top & bottom margin to the table to make it obvious how the table renders.

Upvotes: 0

JakeParis
JakeParis

Reputation: 11210

Instead of using the html4 doctype, try the html5 doctype. That will force ie9 to use standards rendering and may fix issues.

<!DOCTYPE html>

Oh, and as an aside, you should be using CSS.

Upvotes: 2

maikelsabido
maikelsabido

Reputation: 1327

You could wrap your table with a <center> tag. It's deprecated on HTML 4.01 and not supported on HTML 5. But since you're using HTML 4.0 I think it'll work.

Upvotes: 1

Majid
Majid

Reputation: 14253

Just add text-align:center as this:

<DIV style="text-align:center;border: 1px grey solid; MARGIN-TOP: 20px; WIDTH: 100%;">

Upvotes: 0

Related Questions