[Bonzo]

Firefox is starting to drive me up the wall; everybody says there are problems with IE and firefox is better but everything I try works ( mostly ) first time in IE and I spend hours and hours trying to get it to work in Firefox !

I have a little problem and have spent about 4hrs today and a couple of hours yesterday trying to sort it out and was hoping someone could help.

I want a very simple page with the contents centred on the screen.

I want a header 100% of the content area wide.
Below that I want the navigation buttons 100% of the content area wide
And finally the content itself 100% wide.

I have tried all 3 items as separate <div> with a width and auto margins and lastly I have created a "container" <div> with a width and auto margins. As I say IE basically works using both methods but the problems I am having with Firefox is that either is over 100% of the page wide, the content <div> is aligned to the left and the text etc. that should be in the <div> is off to the right outside the <div> etc. etc.

I have also tried putting the navigation <div> inside the header <div>.

It would be great if somebody could put me out my misery !

Anthony

Links to two of the pages I have tried :

Layout 1
Layout 2

PHP Code:

body {

    height: 100%;

    width: 100%;

    margin: 0px;

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

    font-size: 12px;

    color: #000000;

    text-align: center;

        background-color: silver; 

}



#container {



   margin-left: auto; 

margin-right: auto;

   width: 700px ;

   margin: 0px; 

   padding: 0px; 

   text-align: center; 

    margin-top: 12px 

}



#header { 

    margin-right: auto; 

        margin-left: auto; 

        width: 700px ;  

background-color: white;         

       color: black; 

    font-family: Arial;

          padding: 0px; 

           margin-top: 0px;            

           height: 150px; 

    margin-bottom: 0px 

}



#navcontainer ul{

          padding-left: 0;

          margin-left: 0;

          background-color: #036;

          color: White;

          float: left;

          width: 100%;

          font-family: arial, helvetica, sans-serif;

}



#navcontainer ul li { display: inline; }



#navcontainer ul li a{

          padding: 0.2em 1em;

          background-color: #036;

          color: White;

          text-decoration: none;

          float: left;

          border-right: 1px solid #fff;

}



#navcontainer ul li a:hover{

          background-color: #369;

          color: #fff;

}



#navcontainer a:active

{

background-color: #369;

color: #fff;

}



#navcontainer li#active a

{

background-color: #369;

border-right: 1px solid #fff;

color: #fff;

}



#content {

margin: 0px;

    background-color: gray;     

    color: black; 

    font-family: Arial;     

    border-color: black;

    border: 1px solid;  

    padding: 10px; 

    text-align: left 

 }



#header .logo { 

    float: left; 

    margin-left: 1.5em; 

    margin-top: 1.0em; 

    margin-bottom: 1.0em;

}



#header .name{

     float: right; 

        font-family: Arial; 

        font-size: 25px; 

        margin-right: 3.0em; 

        margin-top: 1.0em; 

        background-color: transparent; 

        text-align: left

} 

[Bonzo]

Right I am getting somewhere now after about another 4 hours spent on this problem.

I have downloaded a similar template to what I want and was transfering my css over to its css file and my content over to its html page and everything worked Ok until I transfered over the table I was using to display the contact details and form. This is where it all went wrong; I take my information out of the table and all is OK but putting it back in and the table contents shoot off the right hand side of the screen !

So more testing and I need to find a nice way to display the table data without a table.

Anthony

[Bonzo]

The problem was a wrongly declared margin or something !

Anthony

[wheezy360]

Sorry I couldn't get around to help earlier, but you were right with the incorrectly declared margins. I just wanted to add the answer for folks who may do a search on the same sort of problem.

CSS parsers read top-down, and the last declaration of a property takes precedence by default. So, in your #container css definitions, you set the left and right margins to "auto", but then you say "margin: 0px;" which basically nullifies the auto margin lines you declared above. A quick fix to that is to handle it in one line (and in a short hand at that):

Code:

margin: 0 auto;

0 - applies to the Top and Bottom margins.
auto - applies to the left and right margins.