Centered div -works in IE but not in FireFox 4

dkdude · Feb 2, 2005

Hi,

Consider this example:

Code:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
  <title>Center Elements</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <style type="text/css">

    body {
      text-align  : center;
    }
    
    .box {
      width	      : 150px;
      height      : 50px;
      border      : solid 1px #000;
    }

  </style>
</head>
<body>

  Centered text (IE &amp FireFox)

  <div class="box">
    Centered box (IE Only!?)
  </div>

</body>
</html>

The text is centered in both IE & FireFox, but the div is only centered in IE.

Any suggestion why? And how to center divs in FireFox too?

Thanks ;-)

Jakob

cLFlaVA · Feb 2, 2005

Code:

.box {
    width: 150px;
    height: 50px;
    border: solid 1px #000;
    margin: 0 auto;
    }

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

Vragabond · Feb 2, 2005

As explained by the standards: text-align property only applies to inline elements within the container (and all its descendant elements) that has text-align specified. So, text-align: center; will center text, links (<a>), images, input elements and spans. It will not center any of the block-level elements (table, div, form...). IE misinterprets this info and centers everything while FF does its job correctly. As explained by Cory, block level elements are centered by changing their left/right margins to auto, which means as much as possible to fill the space -- if applied to both sides, the space will be equal on both sides, thus centered. If applied to only one side, element will be pushed to left/right. Hope that clarifies.

cLFlaVA · Feb 2, 2005

beautifully explained.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

dkdude · Feb 2, 2005

Thanks to both of you ;-)

Jakob

tsdragon · Feb 4, 2005

I've never seen it explained more clearly. A star for you!

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]

cLFlaVA · Feb 4, 2005

silly me, i only gave the answer.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

tsdragon · Feb 4, 2005

Yo're right, you did give the answer, so I'll give you a star too, but Vragabond explained WHY your answer works, which is much more useful (at least to me).

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]

cLFlaVA · Feb 4, 2005

which is why i also gave him a star.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Centered div -works in IE but not in FireFox 4

dkdude

Programmer

cLFlaVA

Programmer

Vragabond

Programmer

cLFlaVA

Programmer

dkdude

Programmer

tsdragon

Programmer

cLFlaVA

Programmer

tsdragon

Programmer

cLFlaVA

Programmer

Similar threads

Part and Inventory Search

Sponsor