Problem centering website in CSS

Forum Moderators: not2easy

Message Too Old, No Replies

Problem centering website in CSS

Below is the code I used:

tgoodling

6:15 pm on Oct 16, 2009 (gmt 0)

I used the following code in CSS to center my site.. it centers in dreamweaver, but now in my browser. PLEASE HELP! Thank you in advance!

body {text-align: center; /*Center align for IE */
}

.wrapper {

margin: 0 auto; /* Center align for Good browsers like Firefox, Opera, Netscape */
text-align: left;
width: 800px;
}

The site is: <snip>

[edited by: swa66 at 7:42 pm (utc) on Oct. 16, 2009]
[edit reason] No links, please see ToS and Forum Charter [/edit]

D_Blackwell

6:34 pm on Oct 16, 2009 (gmt 0)

Welcome to WebmasterWorld. The personal link reference is going to get chopped, so I cannot really use it as a reference. I will note that the content centers in IE7 but NOT Firefox and Opera.

My recommendation is to strip the HTML and CSS down to the problem of the framework itself. If the fix is not found during this process, post the test ready code that replicates the problem and we will look at the options.
..................................

it centers in dreamweaver, but now in my browser.

Makes me ask if some code is being added or edited accidentally.

swa66

7:46 pm on Oct 16, 2009 (gmt 0)

The IE hack (the text-align settings) is only needed if your have IE6 in quirksmode. You probably don't want that as it makes IE6 significantly more backward.
Use a full doctype with nothing in front to keep it out of quirksmode.

Normally auto margins and a width is all that's needed to center a block element.

StoutFiles

11:17 pm on Oct 16, 2009 (gmt 0)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">

body
{
text-align: center;
}

div#container
{
margin-left: auto;
margin-right: auto;
width: 770px; //insert your site width instead
text-align: left;
}

</style>
</head>
<body>

<div id="container">
//website in here
</div>

</body>
</html>

This works in every browser.

tgoodling

11:50 pm on Oct 16, 2009 (gmt 0)

Thank you! Sorry, I didn't understand the 'strip the HTML and CSS down to the problem of the framework itself' it's all centered now. I appreciate your help!