DIV overflowing from the page in Mozilla

[NiteShift]

Hi are there any kind souls that could help me? I have this site and the bottom div in Mozilla is not showing properly :-[

http://www.teaching.isipartnership.net/~isj161/seeda/home.htm

The code for the CSS is as follows:

[code]
/******* CSS page for Mailout website this section covers the list section*******/

/******* This is a class for the links in the header section *******/

.nav1{
float:left;
width:101px;
text-align:center;
color:#0066FF;
text-decoration:underline;
padding:0.1em 0.1em;
border-right:1.5px solid white;
font-size:100%;
}
a:hover {background-color:#0066FF;color:white; text-decoration:none;}

.nav2{
float:left;
width:101px;
text-align:center;
color:#0066FF;
margin-left:60px;
text-decoration:underline;
padding:0.1em 0.1em;
border-right:1.5px solid white;
font-size:100%;
}

#menu a, #menu a:visited {
  text-align:center;
  text-decoration:none;
  color:#000;
  display:block;
  width:7em;

  border:0.5em solid #fff;
  }
#menu a:hover {
  color:white;
  background-color:#0066FF;
 
  }

/******* This is a class that will float an image to the left or right of the page *******/


.floatright{
float:right;
border:2px solid black;
margin:0px 0px 15px 20px;
margin-right:5px;
}
.floatleft{
float:left;
border:2px solid black;
margin:0px 0px 15px 20px;
}
.leftmargin{
margin-left: 1cm
}


img {
text-align:center;
    display: block;
    margin-left: auto;
    margin-right: auto
}



html {
height:100%;
max-height:100%;
padding:2%;
margin:0;
border:0;
background-color:#CCCCCC;
font-size:76%;
font-family:verdana, arial, sans-serif;
overflow: hidden;

}

/******* How heading one will be formatted *******/
h1
{
text-align: center;
font-size: 200%;
text-decoration: underline;
font-weight: 900;

}
/******* How heading two will be formatted *******/
h2
{
text-align:left;
font-size:125%;
margin-left:0.5cm;
text-decoration:underline;
font-weight: 900;
}
/******* This is the layout for the body, the div's sit on top of this *******/
#body {

height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;
background-color: rgb(209,205,193);
}

/******* This is the layout for the forms********/

#label {

width: 4em;
float:left;
text-align: right;
margin-right: 0.5em
display: block
}

.submit input
{
margin-left: 4.5em;
float:left;
}
input
{
color: #000000;
background: #fee3ad;
border: 1px solid #000000
}

.submit input
{
color: #000;
background:  #000000;
border: 2px outset #000000
}
fieldset
{
border: 1px solid #000000;
width: 20em
float:left;
}

legend
{
color: #fff;
background: #0066FF;
border: 1px solid 000000;
padding: 2px 6px
}

/******* This is the layout for the main content section, the div's sit on top of this *******/





#content {
display:block;
overflow:auto;
position:absolute;
z-index:3;
top:150px;
bottom:52px;
width:760px;
margin-left:-385px;
left:50%;
border-left:1px solid #000;
border-right:1px solid #000;
background-color:#FFFFFF;
font-size:100%;
font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;

}

* html #content {
top:0;
bottom:0;
height:100%;
width:760px;
border-top:154px solid #fff;
border-bottom:50px solid #fff;
}
/******* This is the layout for the div content and the main section of the page *******/
#head {
position:absolute;
margin-left:-385px;
left:50%;
top:0;
width:760px;
min-width:760px;
height:150px;
background:#fff;
z-index:5;
border:1px solid #000;
overflow:visible;
font-size:100%;
font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;

}

* html #head {
top:2px; width:760px; height:148px;
}

/******* This is the layout for the footer div *******/
#foot {
text-align:center;
position:absolute;
margin-left:-385px;
left:50%;
bottom:0;
width:760px;
min-width:760px;
height:50px;
font-size:1em;
z-index:5;
border:1px solid #000;
font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
font-weight:bold;
font-size:100%;
background-image:
background-repeat:
no-repeat;
background-color:#FFFFFF;
background-position:bottom;
}

* html #foot {
bottom:2px; width:760px; height:48px;
}

[/code]

I realise that there are a few schoolboy errors in the code, but I'd really appreciate some help on resolving the div issue

Thanks in advance,

Lee

[dbrimlow]

I'm guessing that you are designing this for (and maybe viewing it on) an 800 x 600 screen resolution.

It seems to work fine on a larger resolution.

If I had to guess, I would say that there are few potentials for cross-browser and screen resolution blow-up:

First, since you are using xhtml "strict" doctype, you MUST close your tags ... the paragraph before your second <h2> tag was not closed. This can cause strange things in various browsers when using xhtml strict.

Second, you have very MAJOR errors in your css. In a few places you forgot the semicolon between two commands - eg:

[code]#label {

width: 4em;
float:left;
text-align: right;
margin-right: 0.5em
display: block
}[/code]

I recommend specifying the width in your css "body" tag and lose the "position:relative". Also, specify your default font-family, font-size and color and use colors like "#FFFFFF for white, #000000 for black (and to convert your specific background color of "rgb(209,205,193" to "#D1CDC1"):

[code]body {
font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
font-size:100%;
color:#000000;
width:800px;
margin:0;
padding:0;
background-color: #D1CDC1;
}.  [/code]

you are not using a main "wrapper" or "container" (with a specified width) and are relying on your html element to contain the layout using "absolute" positioning ... IE 5x will likely make mincemeat out of this. But try the above, first.

If necessary, you can always control it all with a main container div:

I'm not sure how your layout will blow-up (or not) when the css errors are fixed, but it does not look comfortable to me. Using absolute positioning and the visibility:auto AND a height:100% for your content div is a scary way to have it scroll.

Good luck