Solved

Webpage content centering

Posted on 2012-04-02
5
495 Views
Last Modified: 2012-04-02
Somehow I apparently inadvertently changed base code on my website. The content should be centered on the background and it was. Then, while making essentially text changes and copying a page to create a new page, the content shifted to the left side of the screen instead of centered.  

I don't even know what line of code/where controls the positioning on the screen.  I use Dreamweaver CS4.

Website is www.transformationadvisors.com 

Need help to figure out how to put this back together. Please and thank you.
0
Comment
Question by:T4Pam
  • 2
  • 2
5 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 37798350
I'm not sure about the centering but your have some mistakes that are causing problems.  First, your DOCTYPE is incomplete.  It should be:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd">

Open in new window


from http://www.w3.org/QA/2002/04/valid-dtd-list.html .

Second, in your popup links, you need a space before the 'onclick'.  Firefox at least does not like it all run together.

And 'text-decoration: none' on line 142 needs to be part of a 'style' section, it doesn't work all by itself.
0
 

Author Comment

by:T4Pam
ID: 37798450
Fixing the DOCTYPE and other things did not reposition, but thank you for the corrections.

Two things might be relevant in helping to troubleshoot:

Recently moved the site from MS platform to Unix.  Did not notice the slipped position immediately but it might be related.

Also, when viewed in IE 8, the page is centered on the screen. But in Firefox, it's slipped to the left.
'
With the change to Unix, do I need to add code to get the page to center in a Firefox environment?
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 37798507
The change to Unix or Linux has nothing to do with the HTML file.  HTML is the same on all platforms.  IE and Firefox do interpret somethings differently though.  What you're doing is not what I do for centering.  What I usually do is create an overall 'div' that has 'margin-left:auto;margin-right:auto;' and that works in all browsers.  I'm not sure how to do that with your page because you have so many tables stacked.

And nothing has changed on the link you posted.
0
 
LVL 12

Accepted Solution

by:
Tony van Schaik earned 500 total points
ID: 37798596
Just remove text-align:center on the class .mainbg:

.mainbg {
	background-image: url(elements/main_bg.jpg);
	background-repeat: repeat-x;
	background-position: top;
	background-color: 183B41;
	text-align: center; /* Remove this line */
}

Open in new window


You can find it in this stylesheet: http://www.transformationadvisors.com/ta_elements.css

One other advice, don't use HTML4 and inline CSS styles it will cause you headaches. Use XHTML or HTML5 doctype.
0
 

Author Closing Comment

by:T4Pam
ID: 37798756
Thanks for all the advice as well as the solution.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
What are the real risks of enabling 3rd party Google drive apps 28 121
two submit buttons one form 15 75
Lines Not Lining Up 2 62
JQuery tracking event. 3 57
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The viewer will learn how to count occurrences of each item in an array.

910 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now