this is driving me crazy. i know there's a few problems with the code so i'd like some help. first, is there another way to center it on the page for firefox? and how exactly do i get it to.. look correct in firefox? it looks exactly how i want it to in internet explorer. thanks. <html> <head> <style> body {text-align: center; position:static; float:inherit; } #wrapper {position: relative; float:left; width: 760px; margin: 0 auto; text-align: left; } .nav {color: #FFFFFF;float:inherit; text-align: center; font-family: Arial; font-size:14px; font-weight:bold; background:#0189C7; height: 48px; width: 917px; z-index: 2; table-layout:inherit; border:0; } .foot {z-index: 2; width: 917px;float:inherit; height: 31px; background-color: #E8E8E8; border:0; color: #46C9E7; text-align: center; font-family: Georgina, Times New Roman; font-size:16px; font-weight:bold; position: relative; top: 0px; } .foot1 {color: #000000; text-align: right;float:inherit; font-family: Georgia; font-size:10px; font-weight:normal;} .foot2 {color: #46C9E7; text-align:left; float:inherit; font-family: Georgia; font-size:10px; font-weight:bold;} .side {float:left; text-indent: 14px; z-index: 3; position: relative; left: 665px; top: -536px; width: 228px; height: 512px; background-color: #FFCF91; font-family:georgia; font-size:14px; font-weight:bold; } .side1 {text-indent: 0px; position: relative; left: 14; top: 10; z-index: 4; } .side2 {border-width: 3px; border-color: #E17F00; border-style: solid;} .content {z-index: 2; width: 917px; height: 600px; overflow:hidden; float:inherit; background-color:#FFFFFF} .content1 {border-width: 0px; position: relative; float:left; left: 10px; top:11px; z-index:4;} .content2 {z-index: 3; position: relative; float:left; left: 20px; top: 30px; width: 522px; height: 200px; font-family:verdana; font-size:12px; text-align:left; } </style> </head> <body background="background.gif"> <div id="header" align="center" style="z-index: 2; position: inherent; top: 0px; width: 917px; height: 103px;"> <img src="header1.jpg" border="0"><img src="header2.jpg" border="0"><img src="header3.jpg" border="0"></div> <table id="navtable" class="nav" cellspacing="8" cellpadding="6"> <tr> <td bgcolor="#07B2DE">About the NCRC</td> <td bgcolor="#07B2DE">The NCRC Working in PA</td> <td bgcolor="#07B2DE">NCRC and Youth</td> <td bgcolor="#07B2DE">Get Involved</td> <td bgcolor="#07B2DE">FAQ</td> <td bgcolor="#07B2DE">In the News</td> <td bgcolor="#07B2DE">Contact Us</td> </tr> </table> <div id="content" class="content"> <img class="content1" src="contentpic.jpg"> <div id="content2" class="content2"><font size="5" face="Georgia">Welcome to Career Ready PA!</font><br> <HR align="left" width="560px"><p> Career-Ready PA is a grassroots effort to promote the growth and usage of the National Career Readiness Certificate (NCRC) within Pennsylvania’s Communities. <p> The NCRC documents foundation skills and gives applicants and advantage when applying for jobs or to college. For high schools, the NCRC provides validated proof that graduates are prepared with the skill foundation needed for them to thrive after high school – in college or at work. <p> Currently, 19 states endorse this certificate as their “ready to work†credential, and many more, like Pennsylvania, recognize it as one of the few valid nationally endorsed indicators of work readiness. <p> To qualify got the NCRC, individuals must take ACT’s WorkKeys assessments in three skill areas: Applied Mathematics, Reading for Information, and Locating Information. ACT has determined that these are the foundation skills needed to perform nearly every occupation. ACT created WorkKeys as a “Workplace Entrance Exam†for adults. <p> Support for the NCRC in Pennsylvania is growing rapidly. We invite you to play an active role in bringing the NCRC to your community. <div id="side" class="side"> <p>Who Supports the CRC? <p> <img class="side2" src="pa1.jpg"><div id="side1" class="side1"><p>Number of NCRCs Issued to Pennsylvanians: 245 <p><img class="side2" src="ncrc1.jpg"></div><p></div> </div> </div> <table id="foot" class="foot"> <tr> <td width="524"> Occupational Database | Employer Champions | The Power of WorkKeys</td> <td width="154"> </td> <td width="135"><div class="foot1">(c) Smart Futures 2008 | </div></td> <td width="84"><div class="foot2">Privacy Policy</div></td> </tr> </table> </body> </html>
You are trying to center "it". What is "it"? Never compare what your page is doing with Internet Explorer. IE is 10 years behind web standards and buggy. Always, always test your markup first in a modern, standards compliant browser first, like Firefox, Opera or Safari. Then we can hack it for IE. You don't have a doctype. You will never get IE to attempt to perform like modern browsers without one. Use this one: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Yup. The reason it (the page) IS centering now is because you're using which uses text-align: center (which should only align... text and other inlines) to center a block (a bug from IE5 that IE6 will follow so long as your page is without a doctype, as DrHoward explained). Firefox knows better. It will align your text to the center, but not any blocks (a div is a block, and so is a table). Now the #wrapper... that uses the modern method of centering, the margin: 0 auto... but first you've floated the thing left. Floats don't know how to auto-margin their margins. Your wrapper would center in FF if you removed the float: left part (doctype or no). Not sure what IE without doctype will do with it though... I don't think it can center with maring: 0 auto. And if you ask, why do I still see text-align: center on the body on new web pages? Usually because it's an easy fix for IE5.x, esp when you set the text back to left on the next container. Even a Doctype won't get IE5x working properly. It just doesn't understand CSS well.