1 Reply Latest reply on Jan 12, 2015 8:52 AM by bloomankid1

    How to center a page for all browsers?

    bloomankid1 Level 1

      Could someone take a look at my code and tell me why the page isn't centered. When I'm at a school computer, the page is centered for Internet Explorer, but not for Chrome or Firefox. When I am on my home computer, the page isn't centered for any browser. If you could test your solution for at least 2 of the 3 main browsers, that would be wonderful! Thanks in advance!

      Also, Dreamweaver CC.

       

       

      <!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>Title</title>

      <style type="text/css">

      body {

        background-image: url(images/background.png);

        background-repeat: repeat;

        font-family: "French Script MT";

        display: table-cell;

        vertical-align: middle;

        position: relative;

        color: #B9AB90;

      }

      Memories {

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

              font-size: 18pt;

              color: #360D11;

      }

      .Text {

              font-family: Arial, Helvetica, sans-serif;

              font-size: 16px;

              color: #7A2500;

              font-style: normal;

              font-weight: bold;

      }

      .Bottom {

        font-family: Tahoma, Geneva, sans-serif;

        color: #000000;

      }

      .SessionMain {

        color: #170C03;

        font-family: special-elite;

        font-style: normal;

        font-weight: 400;

        font-size: 24pt;

      }

      .SessionHead {

        color: #4C3223;

        font-family: ewert;

        font-style: normal;

        font-weight: 400;

        font-size: 40pt;

        vertical-align: middle;

        text-align: center;

      }

      </style>

      <meta name="keywords" content="test,test2" />

      </head>

      <body background="images/background.png">

      <p><a name="Top" id="Top"></a></p>

      <table width="100%" border="0" cellspacing="0" cellpadding="0">

        <tbody>

          <tr>

            <td width="70"> </td> <!-- Width here will set how far from the left the page is -->

           

            <td><div align="center">

              <table width="1030" border="0" cellpadding="0">

          <tr>

            <td width="395" rowspan="2"><table width="394" border="5" bordercolor="#784321" bordercolordark="#7A2401" bgcolor="#FFE6A8">

              <tr>

                <td width="376"><div align="center"><img src="image.png" width="350" height="171" alt="logo" /></div></td>

                </tr>

              </table></td>

            <td height="100"> </td>

            </tr>

          <tr>

            <td width="629" height="87"><table width="629" height="83" border="5" bordercolor="#784321" bordercolordark="#7A2401" bgcolor="#FFE6A8">

              <tr>

                <td width="606" height="69"><div align="center" style="font-size: 46px; color: #4C3223;"><strong>Text</strong></div></td>

                </tr>

              </table></td></tr></table></div>

      <div align="center"></div>

      <p></p>

      <table width="100%" border="0" cellspacing="0" cellpadding="0">

        <tbody>

          <tr>

            <td height="73"> </td>

            <td width="629" height="87"><div align="center">

              <table width="1020" height="83" border="5" bordercolor="#784321" bordercolordark="#7A2401" bgcolor="#FFE6A8">

                <tr>

                  <td width="606" height="69"><div align="center" class="SessionHead" style="font-size: 46px; color: #4C3223;">Text</div></td>

                  </tr>

              </table>

            </div>

              <div align="center"></div></td>

            <td> </td>

            </tr>

          </tbody>

      </table>

      </p>

      <div align="center">

        <table width="1020" border="2" cellspacing="0" cellpadding="0">

          <tbody>

            <tr>

              <td height="210"><div align="center" style="font-size: 36px">Content</div></td></tr></tbody></table>

      </div>

      <p> </p>

      <div align="center">

        <table height="95" width="1016" border="0" cellspacing="0" cellpadding="0">

          <tbody>

            <tr>

              <td width="15" rowspan="2" bgcolor="#2E190B"> </td>

              <td width="986" height="18" bgcolor="#2E190B"> </td>

              <td width="15" rowspan="2" bgcolor="#2E190B"> </td>

              </tr>

            <tr>

              <td height="77" bgcolor="#DFB47F"><table width="97%" border="0" cellspacing="0" cellpadding="0">

                <tbody>

                  <tr>

                    <td width="2%"> </td>

                    <td width="98%"><p class="Bottom"><a href="#Top"><a href="#Top">Back To Top</a></p>

                      <p class="Bottom">Last Updated: Sunday, January 4, 2015 10:42 AM</p></td>

                    </tr>

                  </tbody>

                </table></p>

                </td>

              </tr>

            </tbody>

        </table>

      </div>

      </body>

      </td>

          </tr>

        </tbody>

      </table>

      </html>