PDA

View Full Version : Problem with IE and centered web page



cocodoobster
Feb 8th, 2010, 06:58 PM
I know this is an age old issue, but my situation is slightly different. I constructed our company website using two template pages. They all centered fine in Internet Explorer up until yesterday when I uploaded some new product. I don't believe I changed or went anywhere near the div tags so don't know why the website is now aligned to the left when before I made the changes it was centered correctly in IE. Please could someone look at my pages where I use the div tags and point me in the right direction?? Really need the help as need to let people know our new collection has launched. Thanks in advance!

Pages where the two templates are used...
http://www.corsellis.com/online_store.html
http://www.corsellis.com/shop_ss10dr01.html

abduraooft
Feb 8th, 2010, 07:35 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="PRAGMA" content="NO-CACHE" />
<meta name="CACHE-CONTROL" content="NO-CACHE" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"></head>

Your page has two DOCTYPES. Correct it and then validate your page to find and fix the rest of errors (http://validator.w3.org/check?uri=http://www.corsellis.com/online_store.html).

Excavator
Feb 8th, 2010, 08:35 PM
Hello cocodoobster,
Your CSS that styles #wrapper has some odd stuff in it.

To center an element you need three things:

a DocType Declaration
an element with a width
that elements left/right margins set to auto


You meet all those requirements but you also have positioning applied to #wrapper as well. It's really one or the other, not both.
Depending on how the browser views that CSS (cascading order) some of that will be taking precedence over the other.
I've highlighted the conflicting CSS that should be removed below.


#wrapper {
position:relative;
height: 1000px;
width: 930px;
/*left:0;
top: 0;
right: auto;
bottom: auto;*/
margin: 0 auto;
text-align: center;
}

See the links in my sig below about validation. ab has already shown you the markup validator. There is also a CSS validator that might find some problems for you.