Skip navigation
Currently Being Moderated

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

Nov 9, 2011 10:00 PM

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]

 
Replies
  • Currently Being Moderated
    Nov 9, 2011 10:02 PM   in reply to Nerdarmy

    Please upload the complete page to the web amd post a link so we can view it in our browsers.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 10, 2011 12:11 AM   in reply to Nerdarmy

    Using a total css reset as below to zero out the margin and padding will cause this. Personally I would avoid using a reset selector and apply the zeroing out only on the items where you require no margin and no padding.

     

    * {

    margin: 0px;

    padding: 0px;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 11, 2011 2:02 AM   in reply to Nerdarmy

    You CAN set your side navigation using margin: 0; padding: 0; if you need to. There is nothing stopping you doing that but don't use the 'universal'  * css selector to set all the elements margins and paddings on the page to zero.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points