I have tried everything I could find, and still the content does not center properly.
I have text-align:center on everything as well as widths. Placed the image on HTMl and BODY (this kind of works... but makes two mis-aligned backgounds) Checked/changed the doctype, no luck.
I think the main problem is that it IS, in fact, centering what I would like it to center (ie the main content in the browser window), but not moving the body's background image to center as intended. It seems to be stretching the window to accomodate the size of the background image. I know this because I am getting a scrollbar at the bottom of the browser.
THE background IMG is 1200X1046 (pixels) -
any help is appreciated.
CODE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title><%= pagetitle %></title>
<LINK lang="fr" title="La documentation en Français" type="text/html" rel="alternate" hreflang="fr" href="/french/index.asp">
<link href="../css/globalt.css" rel="stylesheet" type="text/css" />
<!--[if IE 7]>
<link href="../css/ie7t.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lt IE 7]>
<link href="../css/iehackst.css"
rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body class="splash">
<div id="language"><span>
<a href="#">English</a>
</span></div>
<div id="container">
<div id="logo"><img src="" alt="an image placeholder" width="576" height="80" />
<!-- end #logo --></div>
<div id="splashContent">
<div class="quote"><p>""Se
d ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. "
"<br /><span class="right"> - Dalton McGuinty</span></div>
<div id="splashDescription">
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
<br />
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
<!-- end #splashDescription --></div>
<div id="splashNav">
<ul>
<li><a href="#">menu item 1</a></li>
<li><a href="#">menu item 2</a></li>
<li><a href="#">menu item 3</a></li>
<li><a href="#">menu item 4</a></li>
<li><a href="#">menu item 5</a></li>
</ul>
<!-- end #splashNav --></div>
<div class="clear"></div>
<!-- FOOTER -->
<div id="footerholder">
<div id="footer"><img src="" alt="images placeholder" width="120" height="29" class="left" /><p>Copyright stuff<br />
<a href="
http://www.gov.on.ca/ont/navigation/NavigationController.jsp?PageName=General&docid=004807&lang=fr" target="_blank">link</a> | <a class="bottomnav" href="
http://www.gov.on.ca/ont/navigation/NavigationController.jsp?PageName=General&docid=004809&lang=fr" target="_blank">link</a><b
r />
<a href="
http://www.gov.on.ca/ont/portal/!ut/p/.cmd/cs/.ce/7_0_A/.s/7_0_252/_s.7_0_A/7_0_252/_l/fr?docid=004805" target="_blank">footer content</a> <br />
date<br /></p>
</div>
</div>
<!-- END FOOTER -->
<!-- end #splashContent -->
</div>
<!-- end #container --></div>
</body>
</html>
CSS - global
@charset "utf-8";
/* let's zero out everything - thanks to eric meyer - meyerweb.com*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
body {
line-height: 1.8em; /* SET text attributes here */
color: black;
background: #ffffff;
}
p { line-height:1.4em;
margin:0.7em 0.6em 0.9em 0.6em;
} /* SET text attributes here */
/*ol, ul {
list-style: none;
}*/
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/* ------------------default styling-------------------
- */
/* PNG fix */
img {
behavior: url("iepngfix.htc");
/* turns off gaps around images */
border: 0
}
.smtxt { font-size: 80%; }
.regtxt { font-size: 100%; }
/* ---- HEADER TAGS ---*/
h1 {
font-size: 140%;
}
h2 {
font-size: 130%;
}
h3 {
font-size: 125%;
}
h4 {
font-size: 120%;
}
h5 {
font-size: 110%;
}
h6 {
font-size: 105%;
}
h1, h2, h3, h4, h5, h6 {
font-family: Trebuchet MS, arial, sans-serif;
font-weight: bold;
color: #000;
background-color: transparent;
margin: 5px 0;
}
code, tt, pre {
font: 12px "andale mono", monaco, courier, "courier new", monospace;
color: #06c;
background: transparent;
}
/* ---- FLOATING --- */
.left {
float:left;
}
.right {
float:right;
}
.clear {
clear: both;
}
/* ---- ACCESSIBILITY ---- */
span.accesskey {
text-decoration:none;
}
.hiddenaccess {
position: absolute;
top: -999em;
left: -999em;
}
/* ---- LINKS ---- */
/* default */
#language a,
a:link,
a:visited,
a:active {
text-decoration: none;
font-weight: bold;
color: white;
}
a:hover {
text-decoration: underline;
color: yellow;
}
/* default */
#subBody a,
a:link,
a:visited,
a:active {
text-decoration: underline;
font-weight: bold;
color: #CC3300;
}
a:hover {
text-decoration: underline;
color: purple;
}
#splashDescription a,
a:link,
a:visited,
a:active {
}
#splashNav a, #splashContent #splashDescription a.whitelink
#splashNav a:link, #splashContent #splashDescription a:link.whitelink
#splashNav a:visited, #splashContent #splashDescription a:visited.whitelink
#splashNav a:active, #splashContent #splashDescription a:active .whitelink {
text-decoration: underline;
font-weight: bold;
color: #510000;
}
#splashNav a:hover, #splashContent #splashDescription a:hover.whitelink {
text-decoration: underline;
color: #990000;
}
#subPage .subPageHighlightBox a,
#subPage .subPageHighlightBox a:link,
#subPage .subPageHighlightBox a:visited,
#subPage .subPageHighlightBox a:active {
text-decoration: underline;
font-weight: bold;
color: #eed077;
}
#subPage .subPageHighlightBox a:hover {
text-decoration: underline;
color: white;
}
/* ---- LINKS ---- */
/* -------------*************
**********
****** PAGE/SITE SPECIFIC STYLES **************************
*****-----
----------
----------
----------
----------
----------
----------
*/
/* ---- language style --- language switcher required for internet sites */
#language {
font-size: 80%;
width: 5.2em;
padding: 5px;
color: #FFFFFF;
background-color: #590000;
height: 1.6em;
font-weight: bold;
position: absolute;
top: 0px;
left: 77%;
text-align:center;
margin-bottom: 10px;
}
/* ---- language style ---*/
/* ------------- SPLASH page --------------------------
----------
----------
----------
--------- */
body.splash { /* sets font for page */
background: #FFFFFF url(holder.jpg) no-repeat 50% 0; /* background image centered */
background-position: top center;
text-align: center;
}
.splash #container {
width: 650px; /* this will create a container 700px across */
margin: 0 auto;
text-align:center;
}
.splash #header {
background: #DDDDDD;
padding: 0 10px 0 20px;/* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
width: 620px;
text-align:center;
}
.splash #header h1 {
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
text-align:center;
}
.splash #logo {
width: 650px;
margin: 0 auto;
text-align: center; /* fixes auto-margin error in ie7 */
top: 366px;
position: relative;
line-height: 1.2em;
background-color:#FFFFFF;
}
.splash #splashContent {
width: 650px;
top: 366px;
margin: 0 auto;
float: left;
position: relative;
text-align:center;
}
.splash #splashContent #splashDescription {
width: 470px;
margin: 0 0 0 40px;
text-align: center;
color: #FFFFFF;
font-size: 80%;
float: left;
display: inline;
background-color: #990000;
background-image: url(../images/splashDescri
ption_topL
.gif);
background-repeat: no-repeat;
background-position: left top;
}
.splash #splashContent #splashDescription p {
padding: 8px 12px;
background-image: url(../images/splashDescri
ption_bott
omL.gif);
background-repeat: no-repeat;
background-position: left bottom;
margin: 0;
margin-bottom: 0;
text-align:left;
}
.splash #splashContent #splashNav {
width: 130px;
padding: 0 0 0 10px;
float: right;
font-size: 85%;
font-weight: bold;
color: #5B0000;
background-color:#FFFFFF;
}
.splash #splashContent #footer {
clear: both;
text-align:center;
width: 600px;
}
#splashNav ul {
margin: 0;
padding: 6px 0;
list-style-type: none;
line-height: 1.6em;
text-align: left;
font-size: 90%;
font-weight: bold;
}
#splashDescription div {
}
.quote {
margin:0 0 0 40px;
padding: 5px 5px 20px 5px;
font-size: 80%;
font-style: italic;
color:#000000;
font-weight:normal;
display:block;
width: 600px;
background-color:#FFFFFF;
text-align:center;
}
.quote p {
margin: 3px;
line-height: 1.2em;
}
/* ------------- SPLASH page --------------------------
----------
----------
----------
--------- */
/* -------------- FOOTER -------------------- */
#footer {
margin: 0px auto;
padding: 0;
width: 580px;
clear: both;
}
#footer p {
padding: 10px 10px 10px 30px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
text-align: left;
float: right;
font-size: 70%;
color: #550000;
}
#footer img { float: left; margin-top: 20px; margin-left: 60px; display:inline;}
.splash #footer {
width: 640px;
}
IE7 style sheet code
@charset "utf-8";
/* CSS Document */
.splash #container {
margin-left: auto;
margin-right: auto;
text-align: center;
width: 540px;
}
.splash #logo { width: 700px; background-color: transparent; text-align:center; }
.splash #splashContent { }
.splash #splashContent #splashDescription {
width: 470px;
margin: 0 0 0 40px;
text-align: center;
color: #FFFFFF; }
.subPage p { color: #0033CC; }
Start Free Trial
