?
Solved

Webpage content centering

Posted on 2012-04-02
5
Medium Priority
?
516 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 84

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 84

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 2000 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

Get free NFR key for Veeam Availability Suite 9.5

Veeam is happy to provide a free NFR license (1 year, 2 sockets) to all certified IT Pros. The license allows for the non-production use of Veeam Availability Suite v9.5 in your home lab, without any feature limitations. It works for both VMware and Hyper-V environments

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
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…
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…
Suggested Courses

752 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