1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

FF CSS div positioning problem

Discussion in 'CSS' started by heif01, Mar 24, 2008.

0
  1. #1
    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">&nbsp;
    <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 &nbsp; | &nbsp; Employer Champions &nbsp; | &nbsp; The Power of WorkKeys</td>
    <td width="154">&nbsp; </td>
    <td width="135"><div class="foot1">(c) Smart Futures 2008 &nbsp; | &nbsp; </div></td>
    <td width="84"><div class="foot2">Privacy Policy</div></td>
    </tr>
    </table>



    </body>
    </html>
     
    heif01, Mar 24, 2008 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    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">
     
    drhowarddrfine, Mar 24, 2008 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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.
     
    Stomme poes, Mar 26, 2008 IP