centering not working in opera

Discussion in 'HTML' started by earl, Nov 14, 2003.

  1. earl

    earl Guest

    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 :)
    earl, Nov 14, 2003
    #1
    1. Advertising

  2. earl wrote:

    > 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/>

    --
    David Dorward http://dorward.me.uk/
    David Dorward, Nov 14, 2003
    #2
    1. Advertising

  3. earl

    Steve Pugh Guest

    "earl" <> wrote:

    >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

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

    Steve Pugh <> <http://steve.pugh.net/>
    Steve Pugh, Nov 14, 2003
    #3
  4. earl

    rf Guest

    "earl" <> wrote in message news:3fb4a704$...
    > 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.
    rf, Nov 14, 2003
    #4
  5. earl

    earl Guest

    > 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, Nov 14, 2003
    #5
  6. earl

    earl Guest

    "Steve Pugh" <> wrote in message
    news:...
    > "earl" <> wrote:
    >
    > >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.


    http://larsandre.mine.nu/blackfish/Nyheter.asp

    > >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.


    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.
    >
    > > 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.


    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 <> <http://steve.pugh.net/>


    Thanks for your help.
    earl, Nov 14, 2003
    #6
  7. earl

    earl Guest

    "David Dorward" <> wrote in message
    news:bp2avo$3gk$1$...
    > earl wrote:
    >
    > > 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 :)


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

    > > 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.


    Sorry, though I'd removed those two lines before

    > > 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.


    Done

    > Lose the left and right properties from the #wrapper


    Done

    > <http://dorward.me.uk/www/centre/>
    >
    > --
    > David Dorward http://dorward.me.uk/
    earl, Nov 14, 2003
    #7
  8. earl

    Adrienne Guest

    Gazing into my crystal ball I observed "earl" <> writing in
    news:3fb4d6aa$:

    >> 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.


    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.

    --
    Adrienne Boswell
    Please respond to the group so others can share
    http://www.arbpen.com
    Adrienne, Nov 14, 2003
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Edwin Knoppert

    Menu inside panel is not working in Opera.

    Edwin Knoppert, Feb 7, 2006, in forum: ASP .Net
    Replies:
    0
    Views:
    373
    Edwin Knoppert
    Feb 7, 2006
  2. Reckless
    Replies:
    1
    Views:
    797
    Deryck
    Oct 20, 2004
  3. windandwaves

    menu not working in Opera

    windandwaves, Oct 5, 2005, in forum: HTML
    Replies:
    16
    Views:
    699
  4. Joe Price
    Replies:
    6
    Views:
    635
    Joe Price
    Sep 26, 2003
  5. Bob
    Replies:
    24
    Views:
    1,528
Loading...

Share This Page