We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you a podcast all about Citrix Workspace, moving to the cloud, and analytics & intelligence. Episode 2 coming soon!Listen Now

x

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

nyk001
nyk001 asked
on
Medium Priority
1,061 Views
Last Modified: 2012-05-06
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

Comment
Watch Question

Commented:
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>
Commented:
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

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

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

Open in new window

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

MD

Commented:
Everything described in this link has been followed in the site.

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

:-)
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
 
Commented:
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

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.

Author

Commented:
Thank you all for your help. I hope the point share was acceptable for everyone ;)
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?
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.