Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2009-02-19
10
Medium Priority
?
1,040 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

0
Comment
Question by:nyk001
  • 3
  • 2
  • 2
  • +2
10 Comments
 
LVL 3

Expert Comment

by:erw13n
ID: 23683932
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
 
LVL 9

Assisted Solution

by:knonie
knonie earned 500 total points
ID: 23683937
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
 
LVL 3

Expert Comment

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

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 13

Expert Comment

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

MD
0
 
LVL 9

Expert Comment

by:knonie
ID: 23684444
Everything described in this link has been followed in the site.

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

:-)
0
 
LVL 13

Expert Comment

by:myderrick
ID: 23684730
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
 
LVL 9

Assisted Solution

by:knonie
knonie earned 500 total points
ID: 23685453
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
 
LVL 22

Accepted Solution

by:
prairiedog earned 500 total points
ID: 23686656
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
 

Author Closing Comment

by:nyk001
ID: 31548858
Thank you all for your help. I hope the point share was acceptable for everyone ;)
0
 
LVL 22

Expert Comment

by:prairiedog
ID: 23692231
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

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses
Course of the Month15 days, 5 hours left to enroll

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question