SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
-
Mar 3, 2007, 14:56 #1
- 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> & <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.
-
Mar 3, 2007, 15:19 #2
- 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
-
Mar 3, 2007, 15:25 #3
- 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.
-
Mar 3, 2007, 16:03 #4
-
Mar 4, 2007, 09:07 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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 have some validation errors to fix in your code also.
-
Mar 4, 2007, 14:24 #6
Bookmarks