Not Centering in Opera

[EvilOrange]

Hi,

I have a website in development and i've made it centered regardless of width of the viewing browser window (eg. the browser is 1000px wide and the content is 600px wide and is centered with 200px each side) by using div's.

Now it works perfectly in FF, IE and WebKit (Safari, Chrome etc) but trying to open in Opera it is aligned left...

Now i know opera doesn't recognize text-align: center (how i'm centering the "wrapper" div) so my question really is...does anyone know of a work around for this typr of centering in Opera?

Thanks

[almostbob]

Hi,

I have a website in development and i've made it centered regardless of width of the viewing browser window (eg. the browser is 1000px wide and the content is 600px wide and is centered with 200px each side) by using div's.

Now it works perfectly in FF, IE and WebKit (Safari, Chrome etc) but trying to open in Opera it is aligned left...

Now i know opera doesn't recognize text-align: center (how i'm centering the "wrapper" div) so my question really is...does anyone know of a work around for this typr of centering in Opera?

Thanks

Its not going to work in any browser, except your own.
open a window less than full screen and your page is shifted right, out of the visible area, click a link and the new page is shifted right out of the visible area. No.
images and borders, sized in pixels
all other elements, sized in ems or %
then the visible page will properly adjust,
Your divs should be something like 10% 80% 10% which will scale, and increase the usable area by 1/3

opera has a few quirks
for the vanishing div try sticking something in it
<div> &nbsp; </div>
still 'blank' but may display differently
check also the styles, different browsers throw away the entire style if the definitions are 'wrong'

[EvilOrange]

sorry don't think i was total implicit...

#wrapper {
	text-align: center;
}

#innerwrap{
	text-align: left;
	margin: 0 auto; 
	width: 600;
}

is what i'm using to center the content....
with all content being inside the innerwrapper

[almostbob]

the width of #innerwrap could be, throwing browsers off
without a dimension IE firefox opera render differently
IE assumes px
firefox throws it away(but 0 auto margin setting would make it work anyway in firefox)
opera goes funky

body {  text-align:center; }
#innerwrap{ text-align: left;
 margin: 0 auto;
 width: 60%; }

works in opera IE Firefox
I set the body, you set outer wrap, same thing

[ccube921]

I'm not sure that that will always work but I use this method to center objects, Position the wrap div left: 50%; this will set the left corner of the div to be in the exact center of the page, then set a negative margin to be half the width of the content (e.g. If your content is 300px your margin would be -150) which will move the content back to the left, centering it exactly. Your end code will look something like this

#wrap
{
Position:fixed;
left:50%;
width: 300px
margin: -Half of your content width (in this case -150px) ;

[ingeva]

I had the same "problem" when testing a site with Opera.

The reason is that align:center is not supported for block objects. This conforms with W3C standards, so Opera is doing it right and the others do not.

Use margin:0 auto; for centering objects,
and text-align:center; can be used to center the contents of a block.

Note that even if you use text-align:center; for a block object, it may not be centered unless you ALSO specify margin:0 auto; for that object.

In these cases, Opera, and in my experience FireFox 3, does this the way it was intended.

Note that for instance <div align:center> is not supported at all except in quirks mode. This is because the layout and style should not be specified in the HTML. That's for the CSS.

[dflor]

I think that in css margin-left:auto; margin-right:auto (margin: 0 auto) works fine, for the main table or div, instead of margin-left: 200px.