469,626 Members | 1,611 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,626 developers. It's quick & easy.

Div not centering in Firefox but fine in IE ?

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

Jul 21 '05 #1
9 52532
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.
Jul 21 '05 #2
Why am I not suprised IE is not compliant ? Well thanks for the tip it
worked like a champ !!

Dave

Jul 21 '05 #3
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.
Jul 21 '05 #4
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

Jul 21 '05 #5
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
Jul 21 '05 #6
Thanks

Jul 21 '05 #7
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
Jul 21 '05 #8
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/
Jul 21 '05 #9
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.
Jul 21 '05 #10

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by Duane Lambe | last post: by
15 posts views Thread by red | last post: by
3 posts views Thread by yawnmoth | last post: by
6 posts views Thread by Simon Wigzell | last post: by
3 posts views Thread by John Pote | last post: by
9 posts views Thread by Neal | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.