Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 1780

Feb 4th, 2009

Not Centering in Opera

Expand Post »

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

Similar Threads

Fit-to-Width killing my site in Opera 9.50? in HTML and CSS
centering website with CSS in HTML and CSS
Which browser do you design for? in HTML and CSS

EvilOrange

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

30 posts
since Jan 2009

Permalink

Feb 4th, 2009

Re: Not Centering in Opera

Click to Expand / Collapse Quote originally posted by 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

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>   </div>
still 'blank' but may display differently
check also the styles, different browsers throw away the entire style if the definitions are 'wrong'

Last edited by almostbob; Feb 4th, 2009 at 9:38 am.

almostbob

Reputation Points: 562

Solved Threads: 367

Posting Maven

Offline

2,970 posts
since Jan 2009

Permalink

Feb 5th, 2009

Re: Not Centering in Opera

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

HTML and CSS Syntax (Toggle Plain Text)

#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

EvilOrange

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

30 posts
since Jan 2009

Permalink

Feb 5th, 2009

Re: Not Centering in Opera

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

css Syntax (Toggle Plain Text)
body {  text-align:center; }
#innerwrap{ text-align: left;
 margin: 0 auto;
 width: 60%; }
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

Last edited by almostbob; Feb 5th, 2009 at 10:07 am.

almostbob

Reputation Points: 562

Solved Threads: 367

Posting Maven

Offline

2,970 posts
since Jan 2009

Permalink

Feb 5th, 2009

Re: Not Centering in Opera

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

(Toggle Plain Text)

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

ccube921

Reputation Points: 13

Solved Threads: 6

Junior Poster in Training

Offline

93 posts
since Oct 2008

Permalink

Feb 6th, 2009

Re: Not Centering in Opera

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.

Last edited by ingeva; Feb 6th, 2009 at 9:06 am.

ingeva

Reputation Points: 16

Solved Threads: 9

Junior Poster

Offline

106 posts
since Jul 2008

Permalink

Feb 7th, 2009

Re: Not Centering in Opera

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.

dflor

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

17 posts
since Oct 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: CSS Help..Plz

Next Thread in HTML and CSS Forum Timeline: HTML onMouseOver and Out validation problem

DaniWeb Message

Cancel Changes

User Name
Password