SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast rgf207's Avatar
    Join Date
    Feb 2006
    Location
    Maryland
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can anyone tell me why this wont display Centered In IE

    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 <!--StartCRHeader--> 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>
    Last edited by rgf207; Aug 8, 2007 at 08:27.

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    SitePoint Enthusiast rgf207's Avatar
    Join Date
    Feb 2006
    Location
    Maryland
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    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 <!--StartCRHeader--> area. Is there something in there I can fix?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  6. #6
    SitePoint Enthusiast rgf207's Avatar
    Join Date
    Feb 2006
    Location
    Maryland
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •