CSS Site aligned center - Not centered in FireFox (DotNetNuke Site)

Looking a site that was done using DotNetNuke (DNN).

I've been asked to align the whole to the center. So I simply put the whole site in a DIV tag and added some CSS.

It displays fine in IE7, however, in FireFox v3.0.6 (on windows) the centering doesn't appear to be even. The left side gap seems larger than the other opposite side.

Here is a link to a development copy of the site: http://dnn.nykglobal.com/rylandgray

I have also added the CSS code used to center the site.

Any help would be appreciated.

I didn't produce this skin/template (its tables :P ) but will try to help out with any further questions needed to help resolve this.

Many thanks! :D
/* CSS */
body {
text-align:center; /* for IE */
}
 
div#ctrwrapper {
text-align:left; /* reset text alignment */
width:680px; /* or a percentage, or whatever */
margin:0 auto; /* for the rest */
}

Open in new window

nyk001Asked:
Who is Participating?
 
prairiedogCommented:
The div#ctrwrapper is aligned in the center of the page, but the content within is not aligned center, the reason is that the contents within (those tables) are using fixed width instead of the fluid width.
Here are the places you will need to modify:
div#ctrwrapper {
text-align:left; /* reset text alignment */
width:1024px; /* or a percentage, or whatever */   <==Increased a little bit to fit your Flash, but it is not the problem, like you said whatever width you would like.
margin:0 auto; /* for the rest */
}  
.pagemaster {
 background-color: #fefefe;
border:1px solid #000000;
width:100%;        <===  Add this line to override your inline width
}
.skinmaster {
 background-color: #ffffff;
 border-right: #8f9092 0px solid;
 border-top: #8f9092 0px solid;
 border-left: #8f9092 0px solid;
 border-bottom: #8f9092 0px solid;
width:100%;       <===  Add this line to override your inline width
}
One final thing is to set the Flash's width in <embed> tag to 100%, instead of a fixed width.
Now you should be ready to go.
Let me know if you still have trouble with the style.
0
 
erw13nCommented:
if it was a tables, is simple :

<table width="100%" align="center" valign="top">
<tr>
<td>

[Your main body with fixed width]
<table class="pagemaster" .....>
</table>

</td>
</tr>
</table>
0
 
knonieCommented:
Actually your website has width equals to 800px, but CSS container has 680px written.

Correct it and it's now in center...

=-)
div#ctrwrapper {
text-align:left; /* reset text alignment */
width:800px; /* or a percentage, or whatever */
margin:0 auto; /* for the rest */
}

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
erw13nCommented:
If you just want to use <div> :
body {
margin:0px; padding:0px; 
]text-align:center; /* IE hack */
}

Open in new window

0
 
myderrickCommented:
and if it still doesn't try this technique:
http://buildinternet.com/2008/11/how-to-center-a-website-with-css/

MD
0
 
knonieCommented:
Everything described in this link has been followed in the site.

Problen was just because of the wrong width value in wrapper div.

:-)
0
 
myderrickCommented:
Oh OK.  I checked and did not find the 800px. Or the browsers are given it an auto width?

The <div id="ctrwrapper"> has 680px and the tables are within.

Kronie kindly point me to the right direction.

MD
 
0
 
knonieCommented:
The Flash banner on this page has width = 800px, so the table inside wrapper div cannot keep its width = 680px.
That flash is displaying the table as 800px wide, but the container div is aligning itself keeping 680px width.

So, that was the actual problem.

:-)

Look at the source code and see the Flash part for width parameters:
<embed width="800" height="138" ...

Open in new window

0
 
nyk001Author Commented:
Thank you all for your help. I hope the point share was acceptable for everyone ;)
0
 
prairiedogCommented:
Glad it is working now. Would you mind sharing the compiled solution of the problem so that the whole team here can benefit from it?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.