Blank space at bottom of screen XHTML 1.0

jolene · 07-07-2004, 12:20 PM

Hi I have this following code which works well, except that it leaves about 1 cm of horizontal blank space at the bottom of the screen in IE and Mozilla. Any idea how I can fix it? Thank you.
[code:1:d4d08a1b3c]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>CSS layout, 3 columns with Header and Footer, Ordered columns, Netscape 4 compatible</title>





<style type="text/css">

/* ================================================== ==================
box layout
-------------------------------------------------------------------- */
.columns-float {
float : left;
width : 75%;
}
.column-one {
width : 67%;
float : right;
}
.imageinbox {
margin : 0;
}
.column-two {
width : 32.6%;
float : left;
}
.column-three {
width : 25%;
float : right;
}
.box-footer {
clear : both;
}
.box-clear {
clear : both;
line-height : 0;
font-size : 1px;
}
.box-clear {
font-size : medium;
}
.fake.box-clear {
display : none;
}
html > body div.box-clear {
display : none;
}
head:first-child + body div.box-clear {
display : block;
}
.nn4clear {
clear : both;
line-height : 0;
font-size : 1px;
}
.nn4clear {
display : none;
}
.box-wrap {
padding : 0;
color : #000000;
background-color : #eeeeee;
HEIGHT : 100%;
}
.box-header {
margin : 0;
padding : 12px;
color : #ffffff;
background-color : #003399;
border : medium none inherit;
text-align : center;
}
.box-footer {
position : relative;
bottom : 0;
padding : 8px 8px 8px 9px;
color : #eeeeee;
background-color : #003399;
border : medium none inherit;
text-align : center;
}

.column-one-content {
color : #ffffff;
text-align : justify;
background : #ff9900;
}
.column-two-content {
background : none repeat;
}
.column-three-content {
background : none repeat;
padding : 0;
}
.column-one-content , .column-two-content {
margin : 0;
padding : 8px 8px 8px 9px;
border : medium none inherit;
}
.box-wrap , .columns-float , .column-one , .column-two , .column-three , h2 {
position : relative;

}
body {
margin : 0;
padding : 0;
font-family : helvetica, arial, sans-serif;
font-size : 12px;
background-color : #ffffff;
color : #000000;
width : 780px;

margin-right : auto;
margin-left : auto;
}
div {
margin : 0;
padding : 0;
}
h1 {
margin : 0;
padding : 0;
font-size : 3em;
color : #ff9933;
}
h2 {
margin : 0 0 9px;
padding : 9px 0 0;
color : #003399;
font-size : 2em;
font-weight : bold;
text-align : center;
}
h3 {
margin : 0 0 9px;
padding : 0;
color : #eeeeee;
font-size : 1.5em;
font-weight : normal;
text-align : center;
}
h4 {
padding : 0 0 0 20px;
color : #003399;
font-size : 1.5em;
font-weight : normal;
text-align : left;
}
p {
margin : 0 0 9px 8px;
padding : 0 3px 0 9px;
color : #003399;
font-size : 1em;
font-weight : bold;
text-align : left;
}

</style>



</head>

<body>

<div class="box-wrap">

<div class="box-header">

<h1>Title</h1> <br/>
<h3>Text TextTextTextTextTextTextTextTextTextTextTextTextTe xtText</h3>
</div>

<div class="columns-float">

<div class="column-one">
<div class="column-one-content">
<img src="image.jpg" alt="" width="372" height="236" class="imageinbox" />
This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text
This is some text This is some text This is some text This is some text This is some text

</div>
</div>
<div class="column-two">
<div class="column-two-content">
<h4>
link one<br/>
link two<br/>
link three<br/>
</h4>

</div>
</div>
<div class="box-clear"> </div>

</div>
<div class="column-three">
<div class="column-three-content">
<h2>column 3</h2>

<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p><a href="#" title="fake link for testing">test link</a></p>
</div>
</div>
<div class="box-clear"> </div>
<div class="nn4clear"> </div>
<div class="box-footer">Credits go here

</div>

</div>

<form method="get" action="3Col_NN4_FFFF.mhtml">
</form>

</body>
</html>
[/code:1:d4d08a1b3c]

Jazzee · 07-07-2004, 12:24 PM

Can you post a link to the page?

Pipeline-Webdesign · 07-07-2004, 12:29 PM

you call for a <form> and right after you kill the form </form>. a <form></form> tag will create a table... that's what space you're seeing

jolene · 07-07-2004, 12:45 PM

Thanks Richline,
That worked just fine. I don't suppose I needed that Form for anything important? Oh and...thanks to Sara too, but I'm much too shy to give a link to the page...it's ..cough...still under construction.

Pipeline-Webdesign · 07-07-2004, 12:48 PM

no prob