5 Replies Latest reply on Mar 19, 2012 3:27 PM by Rik Ramsay

    What's wrong with my div tag / site won't center....

    Taffypro Level 1

      Hi,

       

      I am re-designing a website and I cannot get it to center.  I created a div tag and id it "wrapper" and created a css rule.  I am sure its a simple mistake, but I cannot figure it out.....

       

      Here is the CSS rules...

      @charset "UTF-8";

      /* CSS Document */

      div, h1, h2, h3, h4, h5, h6, p, pre, address, blockquote, span, ul, ol, li, dl, dd, dt, ing {

                margin: 0px;

                padding: 0px;

      }

       

      #wrapper{

                margin: 0, auto;

                background-color: #9B9E6B;

      }

       

       

      ul {

                list-style: none;

      }

       

      table#content1{

                background-color: #00C;

                background-image: url(_images/content_bgrnd.png);

                background-repeat: no-repeat;

                font-family: "Arial Black", Gadget, sans-serif;

                font-size: 20px;

                text-align: center;

                padding: 8px;

       

      }

       

       

      Here is the code for the site......

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <html xmlns="http://www.w3.org/1999/xhtml">

      <head>

      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

      <title>Kiahuna 104</title>

       

       

      <script type="text/javascript">

      <!--

      function MM_preloadImages() { //v3.0

        var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

          var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

          if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

      }

      function MM_swapImgRestore() { //v3.0

        var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

      }

       

       

      function MM_findObj(n, d) { //v4.01

        var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

          d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

        if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

        for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

        if(!x && d.getElementById) x=d.getElementById(n); return x;

      }

       

       

      function MM_swapImage() { //v3.0

        var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

         if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

      }

      //-->

      </script>

      <link href="104.css" rel="stylesheet" type="text/css" />

      </head>

       

       

       

       

      <body onload="MM_preloadImages('_images/buttinside1.jpg','_images/buttproperty1.jpg','_images/b uttactivities1.jpg','_images/buttdining1.jpg','_images/buttcontacts1.jpg','_images/home_lg 1.png','_images/home_lg2.png','_images/home_lg3.png','_images/home_lg4.png','_images/home_ lg5.png','_images/home_lg6.png','_images/home_lg7.png','_images/home_lg8.png')">

       

       

      <div id="wrapper">

      <!--Header-->

      <table id="header">

        <div class="header"><img src="_images/newLOGO.jpg" alt="Kiahuna 104" width="1000"/>

      </div>

       

       

       

       

       

       

      <!--Navigation table-->

      <table width="1000" bgcolor="000">

        <tr>

          <td width="40"> </td>

          <td width="150"><a href="inside.htm"><img src="_images/butthome1.jpg" alt="home1" name="home1"  id="home1" /></a></td>

          <td width="150"><img src="_images/buttinside2.jpg" alt="inside2" name="inside2" id="inside2" onmouseover="MM_swapImage('inside2','','_images/buttinside1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>

          <td width="150"><a href="property.htm"><img src="_images/buttproperty2.jpg" alt="property2" name="property2" id="property2" onmouseover="MM_swapImage('property2','','_images/buttproperty1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>

          <td width="150"><a href="activities.htm"><img src="_images/buttactivities2.jpg" alt="activities2" name="act2" id="act2" onmouseover="MM_swapImage('act2','','_images/buttactivities1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>

          <td width="150"><a href="dining.htm"><img src="_images/buttdining2.jpg" alt="dining2" name="dining2" id="dining2" onmouseover="MM_swapImage('dining2','','_images/buttdining1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>

          <td width="150"><a href="contact.htm"><img src="_images/buttcontacts2.jpg" alt="contact2" name="contact2" id="contact2" onmouseover="MM_swapImage('contact2','','_images/buttcontacts1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>

        </tr>

      </table>

       

       

      <!--Start of content1 table- height = 371-->

       

       

      <table id="content1" table width="1000" height="371">

        <tr>

          <td width="34"> </td>

          <td width="897"><p>blah blah blah.</p>

           

            <p class="center2">NEW: IN-CONDO WASHER & DRYER - COMPLETELY NEW FURNITURE</p></td>

          <td width="53"> </td>

        </tr>

      </table>

       

       

      </body>

      </html>