6 replies [Last post]
ashleypower
Offline
Regular
Last seen: 15 years 42 weeks ago
Joined: 2006-02-11
Posts: 14
Points: 0

Hey there. I'm pretty well new to all this CSS layout stuff. I've pretty well only used it in the past to format text, so please bare with me.

I've tried this simple layout, nothin' there really, just a test to see if I could do it.

I was really pleased with the results in IE 6.0...but FireFox DOES NOT center the content? Any help would be appreciated.

Here's the URL:
http://apower.atspace.com/css/

Here's the CSS:
--------------------------------------------------------------------------------------

body {
margin:0;
padding:0;
text-align:center;
background-color:#dee7e7;
padding:2px;
}

#container {
width:700px;
text-align:left;
border:1px solid #000000
}

#header {
font-family:arial,sans-serif;
background-color:#efefef;
padding:10px;
font-weight:bold;
border-bottom:1px solid
}

#navh {
position:absolute;
background-color:#6d8aac;
color:#ffffff;
width: 100px;
font-family:arial,sans-serif;
padding:4px;
text-align:left;
font-weight:bold;
font-size:12px;
border-right:1px solid #000000;
height:297px
}

#nava {
position:absolute;
background-color:#6d8aac;
color:#ffffff;
width: 100px;
font-family:arial,sans-serif;
padding:4px;
text-align:left;
font-weight:bold;
font-size:12px;
border-right:1px solid #000000;
height:297px
}

#navc {
position:absolute;
background-color:#6d8aac;
color:#ffffff;
width: 100px;
font-family:arial,sans-serif;
padding:4px;
text-align:left;
font-weight:bold;
font-size:12px;
border-right:1px solid #000000;
height:297px
}

#content {
font-family:arial,sans-serif;
width: 582px;
padding:4px;
font-size:12px;
background-color:#ffffff;
float:right}

#footer {
font-family:arial,sans-serif;
color:gray;
font-size:10px;
background-color:#efefef;
padding:2px;
text-align:right;
border-top:1px solid #000000;
clear:both
}

a.nav:link {
color: #ffffff;
text-decoration:none
}

a.nav:active {
color:#efefef;
text-decoration:none
}

a.nav:visited {
color:#ffffff;
text-decoration: none
}

a.nav:hover {
color:#efefef;
text-decoration:underline
}

a.con:link {
color: #000000;
text-decoration:none
}

a.con:active {
color:#002693;
text-decoration:none
}

a.con:visited {
color:#000000;
text-decoration: none
}

a.con:hover {
color:#002693;
text-decoration:underline
}

stonewall
stonewall's picture
Offline
Enthusiast
between a rock and a hard place
Last seen: 15 years 35 weeks ago
between a rock and a hard place
Timezone: GMT-5
Joined: 2006-04-06
Posts: 93
Points: 0

[Solved] Center works in IE, but not FireFox?

IE is INCORRECTLY centering using text-align:center. That should center inline elements only - not block level elements, like divs. You need to put auto left and right margins on the container to center in standards compliant browsers.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

[Solved] Center works in IE, but not FireFox?

This was a hack for centering IE when rendering in Quirks mode, as in quirks mode IE does not recognize margin auto yet will incorrectly center nested block level elements using text-align. IE in standards mode (as you have the page) will center using margin auto (the correct method) IE>6 can not render in standards mode and has to use the Quirks mode rendering model so you can retain the text-align rules if you wish IE5 to center.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jlhaslip
Offline
Enthusiast
Last seen: 12 years 28 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

[Solved] Center works in IE, but not FireFox?

What Hugo is saying is to use both methods (I think).

#your_centred_div {
margin-left: auto;
margin-right:auto;
text-align:center;
}

OR:
#your_centred_div {
margin: 0 auto;
text-align:center;
}

will work also. Depends if you are comfortable with the short-hand method.

Please correct me if I am in error here.

I'm having a good day...so far.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

[Solved] Center works in IE, but not FireFox?

Yes I meant one can use/retain both methods I also meant to write IE< (less than)6 not IE>6 :oops:

One would normally apply text-align:center on the body to center a wrapper/container div and then re-align on the wrapper/container text-align:left so that all the child elements of the wrapper/container were not centered as well.

body {
  text-align:center;
 }
#wrapper {
  margin:0 auto;
  text-align:left;
  }

<body>
 <div id="wrapper">
 
 </div>
</body>

Hugo

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jlhaslip
Offline
Enthusiast
Last seen: 12 years 28 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

[Solved] Center works in IE, but not FireFox?

Thank you for your clarification, Hugo.

I'm having a good day...so far.

ashleypower
Offline
Regular
Last seen: 15 years 42 weeks ago
Joined: 2006-02-11
Posts: 14
Points: 0

[Solved] Center works in IE, but not FireFox?

Sorry for the delay...that works perfect!!!

Thanks alot guys, I really appreciate your help!