CAA: Christian Anime Alliance

Okay this has to be by far the most annoying and strangest problem I've ever run into when making a website. I want my layout to be left aligned. Not complicated right? Well somehow I currently have it left aligned in Explorer but it's centered in Firefox! It used to be a centered layout, but I've taken out all the CSS that should have affected that, and I've gone over the CSS about 5 times looking for bad code that could be affecting Firefox, but I can't find anything!


So I need a new set of eyes to look at this. The layout is here (http://portfolio.myrrhlynn.net/gargoyle/ ) if you want to see it to belive me. Oh and don't click the navigation links since they don't actually work.


Here is the CSS code, let me know if you spot anything wrong. I went a little crazy on the align left in my efforts to try to make it move over.

Code: Select all


p, table  { font-family: Helvetica, Verdana, sans-serif; color: #FFFFFF; font-size: 10pt;
             margin-top:2px;  margin-bottom:2px;   margin-left:0px; margin-right:0px;}

img {border:0px;}

body {
   font-family: Helvetica, Verdana, sans-serif; color: #FFFFFF; font-size: 10pt;
   text-align: left;
   margin: 0px;
   padding: 0px;
   background: #000000 url("gargoyle.jpg") 570px bottom no-repeat fixed;
   }

a:link   { font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 10pt; color: #FFFFFF; text-decoration:underline; }


#container {
   position: relative;
   margin: 0px auto;
   height: 100%;
   width: 572px;
   text-align: left;
   background: url("mainback.gif") repeat-y top;   
   }
#head{
   position: relative;
   width: 572px;
   margin: 0px auto;
   height: 173px;
   text-align: left;
   background: url("topimage.jpg") no-repeat top;   
   }

   
#navigation {
   clear: both;
   position: absolute;
   top: 10px;
   left: 360px;
   width: 170px;
   
   }
   
#content {
   float: left;
   margin: 140px 0px 0px 50px;   
   width: 480px;
   text-align: justify;
   }

#footer {
   clear: both;
   width: 572px;
   height: 50px;         
   }

#navigation ul {
   list-style-type: none;
   margin-top: 0px;   
}
#navigation ul li {      
   margin: 0px 0px 0px 0px;
   padding-bottom: 2px;   
   text-align: right;   
   }
      
#navigation ul li a{
   margin-left:0px;
   text-align: right;   
}         
   
.header   {
   font-family: Verdana;
   text-transform: capitalize;   
   font-size: 16px;
   text-decoration:underline;
   font-variant: small-caps;
}
.menu   {
   margin-left:30px;
   font-family:Verdana;
   text-transform: capitalize;   
   font-size: 16px;
   text-decoration:underline;
   text-align: right;   
   margin-right: 0px;
   font-variant: small-caps;
   
}

a:visited   { font-size: 9pt; text-decoration:underline; color: #696969;  }
a:hover    { text-decoration:none; color: #000000;}



That is most definitely bizarre. I was thinking since it was showing up correctly in IE but not in Firefox, there was invalid CSS somewhere. But I just ran it through a validator and I don't see anything related to left-aligning the table that's wrong. Weird. o.O;

On a slightly different note, and I hope this doesn't make your job worse, but when I loaded the site in IE, the text was sort of spilling over the right margin.

Specifying "auto" for both the left and right margins of an element causes Firefox to allot equal space for both margins, moving the element to the center. Remove "auto" from the margin of the container div and the layout should behave as desired.

On the container div, set your margin to 0px, take out the "auto".

Also, set height=100% on your wrapper div.

Ahh I figured it was something with the margins since IE and Firefox look at those differently. Thanks everyone!

And thanks Debitt for the heads up about IE, but I had already seen that. :\ I have IE 7 at home and it looks okay in there but I check it at work on IE 6 as well so I saw that. XD It's probably something with the margins again so I might just take those out since they aren't doing anything right now anyway.