Solved

Webpage content centering

Posted on 2012-04-02
5
502 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

828 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