Forum Moderators: not2easy
Thanks a million, in advance!
Melanie
/* CSS layout */
#masthead {
width:720px;
background-color:white:
}
#top_nav {
position:relative;
width:720px;
background-color:white
}
#container {
position: relative;
width: 710px;
padding-left: 0px;
padding-right: 10px;
background-color: white;
}
#left_col {
width: 150px;
position: absolute;
left: 0px;
top: 0px;
}
#page_content {
margin-left: 200px;
}
#footer {
width: 720px;
position: relative;
left: 0px;
background-color:white
}
.h2 {
font-family:Arial, Helvetica, sans-serif;
font-size:large;
font-style:oblique
}
.p {
font-family:Arial, Helvetica, sans-serif;
font-size:small;
font-style:normal;
text-align:justify;
color:gray
}
body {
margin: 50px 0px;
padding: 0px;
text-align: center;
background-image: url('images/darkbluebgrd.gif');
background-repeat: repeat-x;
}
#Content {
width:720px;
margin:0 auto;
text-align:left;
padding:15px;
border:1px dashed #333;
}
It's usually standard practice to post both HTML/XHTML and CSS markup so helpful people can determine if it's one or the other or both that may be causing problems.
However, just glancing at your CSS seems to show me what you're up against.
You're lacking a "wrapper". Basically, THE parent to all content on your page. Make a new division and id it as wrapper. Make sure the wrapper division encompasses everything... it should begin after <body> and close right before </body>.
Then give it some CSS markup like the following:
#wrapper {
margin:0 auto; /*this is the shorthand code that gets FF to correctly center an element by automatically configuring the left/right margins in correspondance to your width. If no width is set, this won't work*/
padding:0;
width:720px; /*Consider making this a bit bigger than your widest elements if necessary */
}
Fortunately, making the margin property have left/right automatically configured should work with FF. However, IE doesn't like it. Do counter this I usually put "text-align:center;" within the CSS definition for BODY. I then "reset" the text-align in the wrapper by using "text-align:left;".
Wow, that was a bit more verbose than I had intended... hope it helps! If it doesn't help, post your XHTML markup along with the CSS.
Cheers!
[edited by: coyoteRick at 10:02 pm (utc) on June 15, 2007]
Melanie
I guess not though. I guess it just goes to show how important it is to post your HTML with CSS.
I don't get it though. Isn't #Content the wrapper that has the margin:auto?
And isn't it's parent the body, which also has the text-align:center?I guess not though. I guess it just goes to show how important it is to post your HTML with CSS.
It’s because the OP is asking for an entire page centered, not just the content area. In the CSS if you read through it all, the
#left_col#contentI just want to extend on what coyoteRick said:
Fortunately, making the margin property have left/right automatically configured should work with FF. However, IE doesn't like it. Do counter this I usually put "text-align:center;" within the CSS definition for BODY. I then "reset" the text-align in the wrapper by using "text-align:left;".
This workaround is only necessary on IE 6 upwards if the page is being sent into IE’s infamous quirks mode; for more information on what’s the difference, you can check out this post on quirks mode [webmasterworld.com].
The good thing about making sure that you don’t send IE into quirks mode, is that you will have less problems and things to make workarounds for. You could eliminate the need for the
text-alignGood luck, all the same :)
