4 Replies Latest reply: Nov 11, 2011 2:02 AM by osgood_ RSS

    CSS...?? Why is my webpage aligned to the left?

    Nerdarmy Community Member

      I'm designing a website, I store all of the website content  within a table that I center.  In design view the webpage looks exactly  how it should look, centered. However when I view my webpage in a firefox it's aligned to the left. When I view my webpage in Internet Explorer it's centered the way I want it.  The problem must be within my CSS because when I detache my style sheet the webpage becomes centered in firefox.  This has never happend to me before and i can't see any problems within my css but I know the problem has to be within the css. Any help would be greatly appreciated.

       

      my html code:

       

      [code]

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-…
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Untitled Document</title>
      <style type="text/css">
      body {
      margin-top: 0px;
      margin-bottom: 0px;
      }
      </style>
      <link href="css/style.css" rel="stylesheet" type="text/css" />
      </head>

      <body>
      <table width="910" border="0" align="center">
      <tr>
      <td bgcolor="#FFFFFF"><div id="header">
      <div id="p">
      <form id="form1" name="form1" method="post" action="">
      <label for="textfield"></label>
      home        help       suggest        
      <label for="textfield2"></label>
      <input type="text" name="textfield" id="textfield2" />
      <input type="submit" name="button" id="button" value="Submit" />
      </form>
      </div>
      <img src="images/g.png" width="250" height="90" /></div>
      <div id="bodywrap">
      <div id="content"></div>
      <div id="sidenav"><table width="170" height="25" border="0">
      <tr>
      <td>fb like here</td>
      </tr>
      </table>
      <div id="sepbar">Catigories</div>
      <ul id="menu">
      <li><a href="#"> link         </a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      </ul>
      </div>
      </div>
      <div id="footer">
      © 2012 mysite.com  - |  Terms of Use  |      mysite@gmail.com
      </div></td>
      </tr>
      </table>
      </body>
      </html>

      [/code]

       

      my CSS code:

       

      [code]

      @charset "utf-8";

      #header {

          background-image: url(http://i1176.photobucket.com/albums/x332/Jarel20/buttons/topcmp2-1.png);

          height: 90px;

          width: 910px;

      }

      #bodywrap {

          height: 1000px;

          width: 910px;

      }

      #content {

          height: 990px;

          width: 730px;

          float: left;

          padding: 5px;

      }

      #sidenav {

          float: right;

          height: 990px;

          width: 170px;

          background-color: #FFF;

      }

      * {

          margin: 0px;

          padding: 0px;

      }

      #menu li a {

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

          font-weight: bold;

          text-decoration: none;

          background-image: url(../images/menu3.gif);

          background-repeat: no-repeat;

          display: block;

          height: 32px;

          width: 145px;

          font-size: 12px;

          color: #09f;

          padding-left: 25px;

          line-height: 30px;

      }

      #menu li a:hover {

          background-image: url(../images/menu3.gif);

          background-position: 0px -32px;

      }

       

       

      #menu {

          list-style-type: none;

          width: 145px;

         

      }

       

      #footer {

          height: 40px;

          width: 910px;

      }

      .sepbar {

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

          height: 30px;

          width: 170px;

      }

       

      #p {

          float: right;

          width: 550px;

          vertical-align: middle;

          margin: 30px;

      }

      #header #p #form1 {

          margin-right: 30px;

          margin-left: 80px;

      }

      [/code]