Solved

Webpage content centering

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
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 Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

786 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