@&*%$£!!!! browsers! Centring problem

[xoggoth]

It beats me why browsers can't be consistent in this most basic simple thing!
Got my small business website to work in both IE and Firefox using center and moz-center (how stupid is that?) with main body of text in middle and my sister's arty farty pictures down the edges. Now I find it does not work in Safari!!

If I have a table 800px wide how do I make sure it appears in the centre of the browser in ALL common browsers??

Cheers for any ideas.

[voodooflux]

Are you after just horizontal centering, or vertical as well?

[suityou01]

It beats me why browsers can't be consistent in this most basic simple thing!
Got my small business website to work in both IE and Firefox using center and moz-center (how stupid is that?) with main body of text in middle and my sister's arty farty pictures down the edges. Now I find it does not work in even stupider Safari!!

If I have a table 800px wide how do I make sure it appears in the centre of the browser in ALL common browsers??

Cheers for any ideas.

Table layouts are usually frowned on, but I've used them when "necessary". And I don't want to get into a debate with webbos about tables vs divs. I am not a webbo, just have to do some front end stuff sometimes, when the backend work dries up.

Try and create a table

<table width=100%>

and create a row with one cell

<tr>
<td align="center"><your 800px table goes here</td>
</tr>
</table>

Cheap n cheerful and cross browser.

Love to hear of better ways though.

[NickFitz]

It beats me why browsers can't be consistent in this most basic simple thing!
Got my small business website to work in both IE and Firefox using center and moz-center (how stupid is that?) with main body of text in middle and my sister's arty farty pictures down the edges. Now I find it does not work in even stupider Safari!!

If I have a table 800px wide how do I make sure it appears in the centre of the browser in ALL common browsers??

Cheers for any ideas.

text-align: center shouldn't actually centre a table: that's an IE bug. (It also probably won't work in IE 8 in standards mode.) I'm not sure what the motivation for -moz-center was, but it's still wrong.

To centre it set its left and right margins to auto:

table {
    margin-left: auto;
    margin-right: auto;
}

If you're not appying any top or bottom margin to the table you can use the shorthand version:

table {
    margin: 0 auto;
}

If you do want top and bottom margins with different values you can use

table {
    margin: 1em auto 2em; /*1em top, 2em bottom */
}

NOTE: as I'm sure you're aware, that will apply it to every table; to apply it to a specific table or a general class of tables, use the appropriate selector:

#table_with_id {
    margin: 1em auto 2em; /*1em top, 2em bottom */
}

.table_with_class {
    margin: 1em auto 2em; /*1em top, 2em bottom */
}

[xoggoth]

Cheers nick (yet again!) , that works and was easy just to stick in css file! Ta also, suityou01, that would also work but take longer. I'm a lazy b*.

[NickFitz]

Cheers nick (yet again!) , that works and was easy just to stick in css file! Ta also, suityou01, that would also work but take longer. I'm a lazy b*.

HTH

Thinking about it, wouldn't the "align" attribute on the table work?

<table width="800" align="center">

(Although it's so long since I used attributes to lay out a page, I can't quite remember.)

Ah, yes, here in the HTML spec:

align = left|center|right [CI]
Deprecated. This attribute specifies the position of the table with respect to the document. Permitted values:

• left: The table is to the left of the document.
• center: The table is to the center of the document.
• right: The table is to the right of the document.

[Durbs]

HTH

Thinking about it, wouldn't the "align" attribute on the table work?

<table width="800" align="center">

You'd have thought so but in practice not always so in certain browsers. Your first solution was spot on. I always just use:

#MainContentTbl
{
width:790px;
border-collapse:collapse;
padding:0px;
vertical-align:top;
padding:5px;
text-align:left;
margin-left: auto;
margin-right: auto;
}

The border-collapse gets rid of the horrible detached borders.

[xoggoth]

Needless to say the jscript interactives don't work either although they begin ok so Safari obviously supports canvas but there is no error shown or handy debug window like Firefox. Those I think I'll skip. It would be great if all browsers worked the same. IE gets blamed for not following standards but even the others are not fully consistent.

Ta again for all the suggestions.

PS Thought I ought to get Opera too so can can check site works in all main browsers. I note the licence agreement says "NOT FOR USE IN ONLINE CONTROL OF AIRCRAFT". Maybe I should add this to agreement on my nature software just in case.

[krytonsheep]

If you want to do layouts with cross-browser support I'd recommend using the Yahoo YUI library. Takes 99% of the pain out of it.

[NickFitz]

Needless to say the jscript interactives don't work either although they begin ok so Safari obviously supports canvas but there is no error shown or handy debug window like Firefox. Those I think I'll skip. It would be great if all browsers worked the same. IE gets blamed for not following standards but even the others are not fully consistent.

Ta again for all the suggestions.

PS Thought I ought to get Opera too so can can check site works in all main browsers. I note the licence agreement says "NOT FOR USE IN ONLINE CONTROL OF AIRCRAFT". Maybe I should add this to agreement on my nature software just in case.

Safari was the browser that introduced the <canvas> element, so their implementation should probably be seen as the correct one. There's a detailed description of how it should work in the HTML 5 spec, but that's still very much a work in progress - although I think <canvas> is pretty stable by now.

I've never used Safari on Windows, but on the Mac version the "Advanced" pane of the preferences has a checkbox for "Show Develop menu" - this then allows you to get to the JavaScript console to see any errors.