centering not working in opera

[earl]

My wrapper div does not center when viewing it in opera but works great in
IE.

Here is the code

<div id="wrapper">

body {
background-color: gray;
height : 100%;
margin-right : auto;
margin-left : auto;
text-align : center;
padding-top : 5px;
padding-bottom : 5px;
}

#wrapper {
height : 100%;
padding-right : 0px;
padding-left : 0px;
left : 50%;
right : 50%;
margin : 0px;
width : 640px;
background-color : #777666;
border : 1px solid #707070;
text-align : center;
}

What am I missing ?

Cheers

 

[David Dorward]

My wrapper div does not center when viewing it in opera but works great in
IE.

<div id="wrapper">

I hope that you don't really have your style sheet inside the div

body {
background-color: gray;
height : 100%;
margin-right : auto;
margin-left : auto;

This is rather odd. There isn't much point in telling the browser to
calculate the margins based on the width and the padding here.

text-align : center;
padding-top : 5px;
padding-bottom : 5px;
}

#wrapper {
height : 100%;
padding-right : 0px;
padding-left : 0px;
left : 50%;
right : 50%;

left and right don't apply, it isn't a positioned element.
Why would you want the left edge in the middle, and the right edge in the
middle ... so they touch ... anyway? Assuming that is what you want. Maybe
you planned to use relative positioning so they would cancle themselves
out... equally pointless.

margin : 0px;
width : 640px;

Ho hum, yucky fixed in pixels width design.

background-color : #777666;
border : 1px solid #707070;
text-align : center;
}

What am I missing ?

Set the width and the left and right margins to centre the element in CSS
supporting browsers.

Set text-align: center on the body to centre the element in MSIE.

Lose the left and right properties from the #wrapper

<http://dorward.me.uk/www/centre/>

 

[Steve Pugh]

My wrapper div does not center when viewing it in opera but works great in
IE.

Usually an indication that IE is wrong and Opera is right when it
comes to interpreting ambiguous code.

Important factors you need to mention are:
which version of Opera?
which version of IE?
which doctype are you specifying?

A URL would be useful as well, as usual.

Here is the code

<div id="wrapper">

body {
background-color: gray;
height : 100%;
margin-right : auto;
margin-left : auto;

In Opera these autos will equal zero.
In IE they will equal ~8px;
In other words the default values.

Of course the two browsers will appear to be the same as Opera has
~8px of padding at the sides and IE has no padding.

text-align : center;

This will center block level children in some browsers but not in
correctly behaved browsers.

padding-top : 5px;
padding-bottom : 5px;
}

#wrapper {
height : 100%;
padding-right : 0px;
padding-left : 0px;
left : 50%;
right : 50%;

These should be ignored as you haven't set position to anything other
the default, static.

margin : 0px;
width : 640px;
background-color : #777666;
border : 1px solid #707070;
text-align : center;

This should centre content inside the div.

So you have a 640px wide div with centered content that correctly
behaving browsers will place on the left hand edge of the page and
incorrectly behaving browsers may center.

The same browser may be badly or well behaved depending on which
doctype you use.

So get rid of the left and right properties in #wrapper and change the
margin property to margin: 0 auto; That will center the wrapper div in
correctly behaved browsers, whilst the text-align: center property of
body will continue to center it in badly behaved browsers.

Steve

 

[rf]

My wrapper div does not center when viewing it in opera but works great in
IE.

Here is the code

<div id="wrapper">

body {
background-color: gray;
height : 100%;
margin-right : auto;
margin-left : auto;
text-align : center;
padding-top : 5px;
padding-bottom : 5px;
}

#wrapper {
height : 100%;
padding-right : 0px;
padding-left : 0px;
left : 50%;
right : 50%;
margin : 0px;
width : 640px;
background-color : #777666;
border : 1px solid #707070;
text-align : center;
}

What am I missing ?

The URL so we can check it out without copy/pasting the above and building a
page around it to see exactly what is happening.

Apart from that there are some very curious things in the CSS above,
randomly spotted.

Why specify default things, like padding: 0 ?

Why is the wrapper rule specifying left and right with no position: ? they
will be ignored.

Why is width specified in pixels, and why 640 of them? Looks like you are
coding to a specific screen width and 640 pixels won't work anyway, you have
forgotten the browser windows border and other things that may live on a
640xwhatever screen and that is assuming the viewer has the browser window
maximized.

Ah, getting closer, IE has a bug where text-align: center actually does
align a div to the center of the canvas (if you are running IE in quirks
mode or using <6 that is). Opera is in fact getting it right.

To achieve what you want you should use margin: auto. I think. Without the
URL it is hard to tell.

Cheers
Richard.

 

[earl]

The URL so we can check it out without copy/pasting the above and building
a

page around it to see exactly what is happening.
http://larsandre.mine.nu/blackfish/Nyheter.asp

Apart from that there are some very curious things in the CSS above,
randomly spotted.

Why specify default things, like padding: 0 ?

Where can I check what the different parameters defualt value is ?

Why is the wrapper rule specifying left and right with no position: ? they
will be ignored.

Sorry, forgot to remove them from the style sheet.

Why is width specified in pixels, and why 640 of them? Looks like you are
coding to a specific screen width and 640 pixels won't work anyway, you have
forgotten the browser windows border and other things that may live on a
640xwhatever screen and that is assuming the viewer has the browser window
maximized.

Not a big fan of specifying the width in % so I opted to use 640px which I
think is the lowest screen resolution on most computers. Am thinking of
increasing it to 800px

Ah, getting closer, IE has a bug where text-align: center actually does
align a div to the center of the canvas (if you are running IE in quirks
mode or using <6 that is). Opera is in fact getting it right.

To achieve what you want you should use margin: auto. I think. Without the
URL it is hard to tell.

Cheers
Richard.

Thanks .)

 

[earl]

Usually an indication that IE is wrong and Opera is right when it
comes to interpreting ambiguous code.

Important factors you need to mention are:
which version of Opera?
which version of IE?
which doctype are you specifying?

A URL would be useful as well, as usual.
http://larsandre.mine.nu/blackfish/Nyheter.asp


In Opera these autos will equal zero.
In IE they will equal ~8px;
In other words the default values.

So I can just remove the 'margin-right' and 'margin-left' lines ?

Of course the two browsers will appear to be the same as Opera has
~8px of padding at the sides and IE has no padding.


This will center block level children in some browsers but not in
correctly behaved browsers.


These should be ignored as you haven't set position to anything other
the default, static.


This should centre content inside the div.

So you have a 640px wide div with centered content that correctly
behaving browsers will place on the left hand edge of the page and
incorrectly behaving browsers may center.

The same browser may be badly or well behaved depending on which
doctype you use.

Not sure I understand what a doctype really is ? Im assuming this is a type
of doctype :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
When running my webpages with this code bit it somehow screwed up my
javascript based menu system. Why do I need a doctype ?

So get rid of the left and right properties in #wrapper and change the
margin property to margin: 0 auto; That will center the wrapper div in
correctly behaved browsers, whilst the text-align: center property of
body will continue to center it in badly behaved browsers.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <[email protected]> <http://steve.pugh.net/>

Thanks for your help.

 

[earl]

I hope that you don't really have your style sheet inside the div

I have a style.css file that contains all the css stuff.

This is rather odd. There isn't much point in telling the browser to
calculate the margins based on the width and the padding here.


left and right don't apply, it isn't a positioned element.
Why would you want the left edge in the middle, and the right edge in the
middle ... so they touch ... anyway? Assuming that is what you want. Maybe
you planned to use relative positioning so they would cancle themselves
out... equally pointless.

Sorry, though I'd removed those two lines before

 

[Adrienne]

Not sure I understand what a doctype really is ? Im assuming this is a
type of doctype :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
When running my webpages with this code bit it somehow screwed up my
javascript based menu system.

You have a javascript based menu system!! What about people without
javascript or javascript disabled? Do you have alternative navigation?
No - you don't. That's not a good thing. Here's what I see:

http://www.arbpen.com/usenet/larsandre.gif

Why do I need a doctype ?

Because modern browsers will behave differently according to the doctype.
For Strict it should go into standards mode, for transitional into quirks
mode.

As you stated, the doctype "screwed up" your javascript menu system. I
know you're tempted to leave the doctype out, but you really need to
troubleshoot this and find out why that's happening. Don't take the lazy
man's way out.