Connecting Tech Pros Worldwide Forums | Help | Site Map

Div not centering in Firefox but fine in IE ?

dave.giancaspro@gmail.com
Guest
 
Posts: n/a
#1: Jul 21 '05
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
Guest
 
Posts: n/a
#2: Jul 21 '05

re: Div not centering in Firefox but fine in IE ?


dave.giancaspro@gmail.com wrote:[color=blue]
> 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);
> }[/color]

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@gmail.com
Guest
 
Posts: n/a
#3: Jul 21 '05

re: Div not centering in Firefox but fine in IE ?


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

Dave

kchayka
Guest
 
Posts: n/a
#4: Jul 21 '05

re: Div not centering in Firefox but fine in IE ?


C A Upsdell > wrote:[color=blue]
>
> To centre a block you are supposed to set margin-left and margin-right
> to auto, but IE doesn't honour this,[/color]

IE6 in standards mode does, for sure.
[color=blue]
> text-align:center to make IE happy,[/color]

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@gmail.com
Guest
 
Posts: n/a
#5: Jul 21 '05

re: Div not centering in Firefox but fine in IE ?


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
Guest
 
Posts: n/a
#6: Jul 21 '05

re: Div not centering in Firefox but fine in IE ?


dave.giancaspro@gmail.com wrote:
[color=blue]
> Please elaborate on standards mode and quirks mode?[/color]

http://dorward.me.uk/www/centre/#ie
http://gutfeldt.ch/matthias/articles/doctypeswitch.html
[color=blue]
> Especially what one does to trigger quirks mode ?[/color]

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@gmail.com
Guest
 
Posts: n/a
#7: Jul 21 '05

re: Div not centering in Firefox but fine in IE ?


Thanks

Justin Lieb
Guest
 
Posts: n/a
#8: Jul 21 '05

re: Div not centering in Firefox but fine in IE ?


dave.giancaspro@gmail.com wrote:[color=blue]
> 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
>[/color]

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
Guest
 
Posts: n/a
#9: Jul 21 '05

re: Div not centering in Firefox but fine in IE ?


Justin Lieb wrote:[color=blue]
>
> I would use shorthand on some your properties as well:[/color]

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
Guest
 
Posts: n/a
#10: Jul 21 '05

re: Div not centering in Firefox but fine in IE ?


On Tue, 14 Jun 2005, Tony wrote:
[color=blue]
> Justin Lieb wrote:[color=green]
> >
> > I would use shorthand on some your properties as well:[/color]
>
> By shorthand, you mean
>
> border: thin solid black;
>
> rather than
>
> border-width:thin;
> border-style:solid;
> border-color:black;
>
> right?[/color]

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
[color=blue]
> I'm curious: other than simplifying the coding,[/color]

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