Main layout on the left instead of centre

[Suze]

Hi - I posted this reply to the original thread but no response - so just to highlight it again as I really need to get this resolved asap for a client.
__________________________________

My main wrapper div is not aligned to the centre. I think there might be conflicting styles with the actinic style sheet and the dreamweaver CSS styles.

(I already did this as suggested by Duncan Rounding:
'If you have added additional css using DW then add this css to the end of acinic.css in the design otherwise add the additional ccs file into the outer design after the actinic.css reference.' )

Here is the url of the new site which is in test mode at the moment.

http://www.transformyoursmile.co.uk/

Oh my site is centered in dreamweaver and also the actinic preview window.

Any thoughts kindly appreciated!

[leehack]

I see no wrapper on the site, do you, if so where? Firebug the site to see the live code?

[Suze]

Sorry no there isn't a div wrapper I made it with tables.

<table width="910" border="0" align="center" cellpadding="0" cellspacing="0">

This centres the width of the main table where everything else goes inside.

[leehack]

Put one in then or apply a class to the table with the margin: 0px auto; etc. Personally, i'd use a wrapper.

[Suze]

This is the CSS styles created at the top of the page before the body tags:

<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-align: center;
background-color: #9CF;
}
#maincontent {
background-color: #FFF;
width: 900px;
margin-left: auto;
margin-right: auto;
border-top-width: 0px;
border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 5px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
}

-->
</style>

This centers the design in dreamweaver but this code appears greyed out in actinic in the edit layout code window. I'm not sure if this has anything to do with it. It's weird as the page appears centered in the preview window but goes to the left online.

[leehack]

It's grey because it is commented out? where is the container with the id of 'maincontent'?

[leehack]

PS, this does the same as what you have written, maybe an idea to learn some shorthand styling, easier to read too:

body {
margin: 0px;
text-align: center;
background-color: #9CF;
}
#maincontent {
background-color: #FFF;
width: 900px;
margin: 0px auto;
border: 5px solid #000;
border-top: none;
}

instead of:

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-align: center;
background-color: #9CF;
}
#maincontent {
background-color: #FFF;
width: 900px;
margin-left: auto;
margin-right: auto;
border-top-width: 0px;
border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 5px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
}

[Suze]

Thanks Lee - for some reason my actinic.css was not in the root folder.

It is now centering in internet explorer but not firefox!

I changed the actinic.css in design>library>webpage outer layout> actinicstylesheet

html,body {
margin: 0px;
padding: 0px;
text-align: center;

then changed under p tag:

margin-top: 0px;
margin-left: 0px;
margin: 0px auto;

[Suze]

have sorted it needed to change actinic.css in dreamweaver as well to match

[Duncan Rounding]

If you're using DW then you should consider using your own stylesheet instead of actinic.css.

[leehack]

then changed under p tag:

margin-top: 0px;
margin-left: 0px;
margin: 0px auto;

When you write:

margin: 0px auto;

you are actually styling all 4 margins, the 0px is doing top and bottom and the auto is doing left and right. If you do not want the top and bottom or the left and right margins to be the same, then you can still write it out in shorthand like so:

margin: 0px auto 5px 10px;

top, right, bottom and left are the order when you use this method.

If you wrap your overall table in a div, give that div a class or an ID and make that class/ID use:

margin: 0px auto;

and also give it a fixed width, i assure you that will center on every browser there is.