Div not centering in Firefox but fine in IE ?

[dave.giancaspro]

Hi I'm new to group and I'm having an issue with a page I'm doing for
an Artist firend. This is my first foray into stylesheets.

here's the problem: I've got a dive I would like centered. I use the
code below to created a div that's centerd on the page. It works in IE
bit does not work in Firefox Mozilla etc.

here's the code

body{
text-align:center;
font-color:#ffffff;
background-image:URL(gothclub.jpg);
}
div{
text-align:center;
padding:5px;
padding-top:10px;
margin-top:10px;
margin:left:20%;
width:60%;
color:sienna;
background-color:#330000;
border:1px #82543d solid
}

Any help will be appreciated.

Dave

[C A Upsdell]

da*************@gmail.com wrote:

Hi I'm new to group and I'm having an issue with a page I'm doing for
an Artist firend. This is my first foray into stylesheets.

here's the problem: I've got a dive I would like centered. I use the
code below to created a div that's centerd on the page. It works in IE
bit does not work in Firefox Mozilla etc.

here's the code

body{
text-align:center;
font-color:#ffffff;
background-image:URL(gothclub.jpg);
}

To centre a block you are supposed to set margin-left and margin-right
to auto, but IE doesn't honour this, so you have to use
text-align:center to make IE happy, plus margin-left:auto;
margin-right:auto for the standards compliant browsers.

[dave.giancaspro]

Why am I not suprised IE is not compliant ? Well thanks for the tip it
worked like a champ !!

Dave

[kchayka]

C A Upsdell > wrote:

To centre a block you are supposed to set margin-left and margin-right
to auto, but IE doesn't honour this,
IE6 in standards mode does, for sure.
text-align:center to make IE happy,

More specifically, IE5.x or IE6 in quirks mode (which you shouldn't be
triggering, anyway).

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[dave.giancaspro]

Please elaborate on standards mode and quirks mode ? Especially what
one does to trigger quirks mode ?
In the meantime I'll STFW regarding these modes.

Dave

[David Dorward]

da*************@gmail.com wrote:

Please elaborate on standards mode and quirks mode?
http://dorward.me.uk/www/centre/#ie
http://gutfeldt.ch/matthias/articles/doctypeswitch.html
Especially what one does to trigger quirks mode ?

You don't trigger quirks mode, its the default. You trigger standards mode.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[dave.giancaspro]

Thanks

[Justin Lieb]

da*************@gmail.com wrote:

Hi I'm new to group and I'm having an issue with a page I'm doing for
an Artist firend. This is my first foray into stylesheets.

here's the problem: I've got a dive I would like centered. I use the
code below to created a div that's centerd on the page. It works in IE
bit does not work in Firefox Mozilla etc.

here's the code

body{
text-align:center;
font-color:#ffffff;
background-image:URL(gothclub.jpg);
}
div{
text-align:center;
padding:5px;
padding-top:10px;
margin-top:10px;
margin:left:20%;
width:60%;
color:sienna;
background-color:#330000;
border:1px #82543d solid
}

Any help will be appreciated.

Dave

I would use shorthand on some your properties as well:

------------------------------------------------------
body {
margin-left:auto;
margin-right:auto;
width:50%;
text-align:center;
background:transparent URL(gothclub.jpg);
}

div {
text-align:center;
padding:10px 5px 5px 5px;
margin:10px 20% 0;
width:60%;
color:#960; /* Try to use shorthand #960 */
background:#300 none;
border:1px solid #853;
}
------------------------------------------------------

My 2 cents.

JL

[Tony]

Justin Lieb wrote:

I would use shorthand on some your properties as well:

By shorthand, you mean

border: thin solid black;

rather than

border-width:thin;
border-style:solid;
border-color:black;

right?

I'm curious: other than simplifying the coding, is there any performance or
other benefit to working this way?

--
Tony Garcia
http://www.dslextreme.com/~tony23/

[Alan J. Flavell]

On Tue, 14 Jun 2005, Tony wrote:

Justin Lieb wrote:

I would use shorthand on some your properties as well:
By shorthand, you mean

border: thin solid black;

rather than

border-width:thin;
border-style:solid;
border-color:black;

right?

there's also border-top-width, border-right-width, and so on, if you
want/need to spell it out in every tedious detail... see e.g the
navigation area at http://www.w3.org/TR/CSS21/box.html
I'm curious: other than simplifying the coding,

I'd see that as a benefit: smaller CSS files, less to transfer over
the net, in theory less to go wrong.

Early browser implementations of CSS were rather buggy in this area,
and some of us got accustomed to specifying both forms, in the hope
that this or that browser would grok at least one of them. But by now
that sort of nonsense should be finished, and those who are using old
buggy browsers have surely got accustomed to less than ideal results
on other web sites, and with a reasonable attitude to flexible design
(which IMHO probably means using float in preference to absolute or
fixed positioning, where bugs can all too easily result in overlapping
areas), they should at least get a usable page, even if its cosmetics
leave something to be desired.

If all else fails they can disable (author) stylesheets, one way or
another.

imho and ymmv, anyway.