Can anyone tell me why this wont display Centered In IE

**rgf207** · Mar 3, 2007, 14:56

I wrapped my phpBB forums around my site design. The site displays fine in Firefox but is not centered in IE. Can anyone tell me why?

My code starts where it says  All of my CSS is after that

Thanks

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<link rel="top" href="./index.php" title="Forum Index" />
<link rel="search" href="./search.php" title="Search" />
<link rel="help" href="./faq.php" title="FAQ" />
<link rel="author" href="./memberlist.php" title="Memberlist" />

<title> :: Index</title>
<!-- link rel="stylesheet" href="templates/subSilver/subSilver.css" type="text/css" -->
<style type="text/css">
<!--
/*
  The original subSilver Theme for phpBB version 2+
  Created by subBlue design
  http://www.subBlue.com

  NOTE: These CSS definitions are stored within the main page body so that you can use the phpBB2
  theme administration centre. When you have finalised your style you could cut the final CSS code
  and place it in an external file, deleting this section to save bandwidth.
*/

/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
	background-color: #E5E5E5;
	scrollbar-face-color: #DEE3E7;
	scrollbar-highlight-color: #FFFFFF;
	scrollbar-shadow-color: #DEE3E7;
	scrollbar-3dlight-color: #D1D7DC;
	scrollbar-arrow-color:  #006699;
	scrollbar-track-color: #EFEFEF;
	scrollbar-darkshadow-color: #98AAB1;
}

/* General font families for common tags */
font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif }
a:link,a:active,a:visited { color : #006699; }
a:hover		{ text-decoration: underline; color : #DD6900; }
hr	{ height: 0px; border: solid #D1D7DC 0px; border-top-width: 1px;}

/* This is the border line & background colour round the entire page */
.bodyline	{ background-color: #FFFFFF; border: 1px #98AAB1 solid; }

/* This is the outline round the main forum tables */
.forumline	{ background-color: #FFFFFF; border: 2px #006699 solid; }

/* Main table cell colours and backgrounds */
td.row1	{ background-color: #EFEFEF; }
td.row2	{ background-color: #DEE3E7; }
td.row3	{ background-color: #D1D7DC; }

/*
  This is for the table cell above the Topics, Post & Last posts on the index.php page
  By default this is the fading out gradiated silver background.
  However, you could replace this with a bitmap specific for each forum
*/
td.rowpic {
		background-color: #FFFFFF;
		background-image: url(templates/subSilver/images/cellpic2.jpg);
		background-repeat: repeat-y;
}

/* Header cells - the blue and silver gradient backgrounds */
th	{
	color: #FFA34F; font-size: 11px; font-weight : bold;
	background-color: #006699; height: 25px;
	background-image: url(templates/subSilver/images/cellpic3.gif);
}

td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
			background-image: url(templates/subSilver/images/cellpic1.gif);
			background-color:#D1D7DC; border: #FFFFFF; border-style: solid; height: 28px;
}

/*
  Setting additional nice inner borders for the main table cells.
  The names indicate which sides the border will be on.
  Don't worry if you don't understand this, just ignore it :-)
*/
td.cat,td.catHead,td.catBottom {
	height: 29px;
	border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
	font-weight: bold; border: #FFFFFF; border-style: solid; height: 28px;
}
td.row3Right,td.spaceRow {
	background-color: #D1D7DC; border: #FFFFFF; border-style: solid;
}

th.thHead,td.catHead { font-size: 12px; border-width: 1px 1px 0px 1px; }
th.thSides,td.catSides,td.spaceRow	 { border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right	 { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft	  { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom  { border-width: 0px 1px 1px 1px; }
th.thTop	 { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 0px 1px; }
th.thCornerR { border-width: 1px 1px 0px 0px; }

/* The largest text used in the index page title and toptic title etc. */
.maintitle	{
	font-weight: bold; font-size: 22px; font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none; line-height : 120%; color : #000000;
}

/* General text */
.gen { font-size : 12px; }
.genmed { font-size : 11px; }
.gensmall { font-size : 10px; }
.gen,.genmed,.gensmall { color : #000000; }
a.gen,a.genmed,a.gensmall { color: #006699; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover	{ color: #DD6900; text-decoration: underline; }

/* The register, login, search etc links at the top of the page */
.mainmenu		{ font-size : 11px; color : #000000 }
a.mainmenu		{ text-decoration: none; color : #006699;  }
a.mainmenu:hover{ text-decoration: underline; color : #DD6900; }

/* Forum category titles */
.cattitle		{ font-weight: bold; font-size: 12px ; letter-spacing: 1px; color : #006699}
a.cattitle		{ text-decoration: none; color : #006699; }
a.cattitle:hover{ text-decoration: underline; }

/* Forum title: Text and link to the forums used in: index.php */
.forumlink		{ font-weight: bold; font-size: 12px; color : #006699; }
a.forumlink 	{ text-decoration: none; color : #006699; }
a.forumlink:hover{ text-decoration: underline; color : #DD6900; }

/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav			{ font-weight: bold; font-size: 11px; color : #000000;}
a.nav			{ text-decoration: none; color : #006699; }
a.nav:hover		{ text-decoration: underline; }

/* titles for the topics: could specify viewed link colour too */
.topictitle,h1,h2	{ font-weight: bold; font-size: 11px; color : #000000; }
a.topictitle:link   { text-decoration: none; color : #006699; }
a.topictitle:visited { text-decoration: none; color : #5493B4; }
a.topictitle:hover	{ text-decoration: underline; color : #DD6900; }

/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name			{ font-size : 11px; color : #000000;}

/* Location, number of posts, post date etc */
.postdetails		{ font-size : 10px; color : #000000; }

/* The content of the posts (body of text) */
.postbody { font-size : 12px; line-height: 18px}
a.postlink:link	{ text-decoration: none; color : #006699 }
a.postlink:visited { text-decoration: none; color : #5493B4; }
a.postlink:hover { text-decoration: underline; color : #DD6900}

/* Quote & Code blocks */
.code {
	font-family: Courier, 'Courier New', sans-serif; font-size: 11px; color: #006600;
	background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
	border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

.quote {
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #444444; line-height: 125%;
	background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
	border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

/* Copyright and bottom info */
.copyright		{ font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #444444; letter-spacing: -1px;}
a.copyright		{ color: #444444; text-decoration: none;}
a.copyright:hover { color: #000000; text-decoration: underline;}

/* Form elements */
input,textarea, select {
	color : #000000;
	font: normal 11px Verdana, Arial, Helvetica, sans-serif;
	border-color : #000000;
}

/* The text input fields background colour */
input.post, textarea.post, select {
	background-color : #FFFFFF;
}

input { text-indent : 2px; }

/* The buttons used for bbCode styling in message post */
input.button {
	background-color : #EFEFEF;
	color : #000000;
	font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* The main submit button option */
input.mainoption {
	background-color : #FAFAFA;
	font-weight : bold;
}

/* None-bold submit button */
input.liteoption {
	background-color : #FAFAFA;
	font-weight : normal;
}

/* This is the line in the posting page which shows the rollover
  help line. This is actually a text box, but if set to be the same
  colour as the background no one will know ;)
*/
.helpline { background-color: #DEE3E7; border-style: none; }

/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
@import url("templates/subSilver/formIE.css");
-->
</style>
<script language="Javascript" type="text/javascript">
<!--
	if ( 0 )
	{
		window.open('privmsg.php?mode=newpm', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');;
	}
//-->
</script>
</head><!--StartCRHeader-->
<style type="text/css">
html {min-height: 100%;}

* {
	margin: 0;
	padding: 0;
}

img
{
	border: 0px;
}

a {color: #36C;}
a:hover {color: #06F;}

body {
	background: #DDD;
	color: #444;
	font: normal 62.5% sans-serif;
}

p,code,ul {padding-bottom: 1.2em;}

li {list-style: none;}

h1 {
	font: normal 1.8em Tahoma,sans-serif;
	margin-bottom: 4px;
}

code {
	background: #FFF;
	border: 1px solid #EEE;
	border-left: 6px solid #C1CAD3;
	color: #666;
	display: block;
	font: normal 1em Tahoma,sans-serif;
	line-height: 1.6em;
	margin-bottom: 12px;
	padding: 8px 10px;
	white-space: pre;
}

blockquote {
	background: url(http://www..com/skins/Mix/img/quote.gif) no-repeat;
	display: block;
	font-weight: bold;
	padding-left: 28px;
}

h1,h2,h3 {
	color: #367EA6;
	padding-top: 6px;
}


.clearer {clear: both;}
.left {float: left;}
.right {float: right;}


#container {
	border: 1px solid #C5C5C5;
	background: #FFF;
	font-size: 1.2em;
	margin: 0 auto;
	padding: 10px;
	width: 780px;
}


#header {
	background: #B3C2C7 url(http://www..com/skins/Mix/img/header.jpg) repeat-x;

	color: #FFF;
	height: 160px;
	border-bottom: 4px solid #FFF;
}
#pagetitle {

	padding-top: 15px;
	padding-left: 5px;

}


.navigation {
	background: #D9E1E5 url(http://www..com/skins/Mix/img/nav.gif);
	border: 1px solid #DFEEF7;
	border-color: #DFEEF7 #CFDEE7;
	height: 41px;
}
.navigation a {
	background: #D9E1E5 url(http://www..com/skins/Mix/img/nav.gif);
	border-right: 1px solid #AFBEC7;
	color: #567;
	display: block;
	float: left;
	font: bold 1.1em sans-serif;
	line-height: 41px;
	padding: 0 20px;
	text-decoration: none;
}
.navigation a#active {background-position: left bottom; color: #333;}
.navigation a:hover {background-position: 0 50%; color: #234;}



.main {
	border-top: 4px solid #FFF;
	background: #FAFAFA url(http://www..com/skins/Mix/img/main.gif) repeat-y right top;
}
.main#single {background: #FAFAFA;}


.sidenav {
	float: right;
	width: 210px;
}
.sidenav .block {
	background: #F1F6F8;
	margin-bottom: 6px;
}
.sidenav h2 {
	color: #435A5A;
	font-size: 1.5em;
	line-height: 30px;
	margin: 0;
	padding-left: 12px;

}
.sidenav ul {
	padding: 5px;
	border-top: 1px solid #E8EBF0;
}
.sidenav li {border-bottom: 1px solid #E8EBF0;}
.sidenav li a {
	font-size: 1.1em;
	color: #554;

	padding: 5px;
	text-decoration: none;
	width: 95%;
}
.sidenav li a:hover {

	text-decoration: underline;
	color: #456;
}


.content {
	float: left;
	margin: 10px 0;
	padding: 0 16px;
	width: 531px;
}
.content .descr {
	color: #456;
	font-size: 0.9em;
	margin-bottom: 6px;
}
.content li {
	list-style: url(http://www./skins/Mix/img/li.gif);
	margin-left: 18px;
}
.padded {
	padding: 10px 16px;
}


.footer {
	background: url(http://www..com/skins/Mix/img/footer.gif) repeat-x;
	color: #FFF;
	font: bold 1em sans-serif;
	line-height: 39px;
	text-align: center;
}
.footer a,.footer a:hover {color: #FFF;}
</style>
<div id="container">

	<div id="header">

		<h1 id="pagetitle"><div style='font-size: 1.5em; color: #FFFFFF;'></div></h1>

	</div>

	<div class="navigation">
		<a  href='http://www..com/home' Target='_self'>Home</a><a  href='http://www..com/download' Target='_self'>Download</a><a  href='http://www..com/contact_us' Target='_self'>Contact Us</a><a  href='forums/' Target='_self'>Forums</a>
		<div class="clearer"><span></span></div>
	</div>

	<div class="main" id="single">

		<div class="padded">

<!--EndCRHeader-->
<body bgcolor="#E5E5E5" text="#000000" link="#006699" vlink="#5493B4">

<a name="top"></a>


####### REMOVED ##########

<!--StartCRFooter-->

</div>

	</div>

	<div class="footer">© 2006-2007  - Website Powered by . Valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> &amp; <a href="http://validator.w3.org/check?uri=referer">XHTML</a>. 
	</div>

</div>

</body>

</html>
<!--EndCRFooter--></body>
</html>

**rainmakr** · Mar 3, 2007, 15:19

What isn't displaying properly?

I see no difference in the display of your code between IE6 and FF2. Note that your style block is outside of the HEAD tag, and you have HTML (beginning with 'div id="header"' outside of the BODY tag.

John

**Kravvitz** · Mar 3, 2007, 15:25

Your doctype is incomplete. You should use a complete doctype (one that includes a URL) to get browsers to render as close to the same as possible. I recommend HTML 4.01 Strict. A doctype is not a magic fix. It is the first step in the process of fixing your page. The doctype tells the browser how to render the page.
Activating the Right Layout Mode Using the Doctype Declaration
Fix Your Site With the Right DOCTYPE!
Choosing a DOCTYPE
Doctype switching
Rendering Mode and Doctype Switching
http://www.w3.org/QA/2002/04/Web-Quality
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Four ways to Center Elements with CSS (in IE5+/Win and other browsers)

**rgf207** · Mar 3, 2007, 16:03

Originally Posted by Kravvitz

Your doctype is incomplete. You should use a complete doctype (one that includes a URL) to get browsers to render as close to the same as possible. I recommend HTML 4.01 Strict. A doctype is not a magic fix. It is the first step in the process of fixing your page. The doctype tells the browser how to render the page.
Activating the Right Layout Mode Using the Doctype Declaration
Fix Your Site With the Right DOCTYPE!
Choosing a DOCTYPE
Doctype switching
Rendering Mode and Doctype Switching
http://www.w3.org/QA/2002/04/Web-Quality
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Four ways to Center Elements with CSS (in IE5+/Win and other browsers)

Yep I see what you are saying. The only problem is that is the phpbb doctype declaration. The only stuff I add is the right after the  area. Is there something in there I can fix?

**Paul O'B** · Mar 4, 2007, 09:07

You can centre it in IE like this:

Code:

body{text-align:center}
#container {
    text-align:left;
    border: 1px solid #C5C5C5;
    background: #FFF;
    font-size: 1.2em;
    margin: 0 auto;
    padding: 10px;
    width: 780px;
}

You would have found the explanation in Kravvitz's links or in the CSS faq here in the forum on centering

You have some validation errors to fix in your code also.

**rgf207** · Mar 4, 2007, 14:24

Originally Posted by Paul O'B

You can centre it in IE like this:

Code:

body{text-align:center}
#container {
    text-align:left;
    border: 1px solid #C5C5C5;
    background: #FFF;
    font-size: 1.2em;
    margin: 0 auto;
    padding: 10px;
    width: 780px;
}

You would have found the explanation in Kravvitz's links or in the CSS faq here in the forum on centering

You have some validation errors to fix in your code also.

Thank that worked

The SitePoint Forums have moved.

User Tag List

Thread: Can anyone tell me why this wont display Centered In IE

Thread Tools

Display

Can anyone tell me why this wont display Centered In IE

Bookmarks

Bookmarks

Posting Permissions