maddog
28 Jul 2009, 11:42 AM
I need some help urgently, I am fairly new to web design and am creating a website for a company. Here is the html for a page, some bits have been removed for confidentiality.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="shortcut icon" href="./favicon.ico" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<meta name="Author" content="" />
<meta name="language" content="English" />
<meta name="robots" content="follow, index" />
<meta name="Distribution" content="Global" />
<meta name="Revisit-After" content="7 days" />
<meta name="copyright" content="" />
<style type="text/css">
</head>
<body>
<div class="container">
<a href="index.htm" title="View homepage"><a href="index.htm" title="View homepage"></a><a href="index.htm"
title="View homepage"><img name="" src="" width="418" height="192" alt="" /></a></a>
<div id="rightcolquote">
"quality, bespoke homes..."
</div>
</div>
<div id="nav">
<ul>
<li><a href="index.htm" title="View homepage">Homepage</a></li>
<li><a href="about_us.html" title="View information about" class="on">About us</a></li>
<li><a href="model_range.html" title="View our model range">Model range</a></li>
<li><a href="distributors.html" title="View our partners]">Partners</a></li>
<li><a href="gallery.html" title="View photo gallery">Gallery</a></li>
<li><a href="accessibility.html" title="View our E-Brochure">E-Brochure</a></li>
<li><a href="warranty.html" title="View our quality information">Quality</a></li>
<li><a href="contact.html" title="Contact">Contact</a></li>
<li class="noborder"><a href="faq.html" title="View frequently asked questions">FAQ</a></li>
</ul>
</div>
<div class="pagecontainer">
<div id="header">
<span class="style3">About Us</span> <br />
<br />
<div align="justify" class="style4"><img name="" src="" width="231" height="167" alt="" />
</div>
<p align="justify" class="style1"> Based at the heart of - a holiday getaway
famous for its evocative natural beauty and inspiration here at we
know a thing or two about leisure homes inspired by those surroundings. We
are the largest park home manufacturers in Wales and we know how important it
is to find the perfect holiday retreat home, your own utopia away from the stress of
everyday life yet in parallel to your lifestyle . </p>
<p align="justify" class="style1"> We also know how important it is to find a leisure home
that is built to the highest standard so homely and comfortable that you'll want to visit it again and again
throughout the year. Most importantly, as the largest park and leisure home manufacturer in
Wales, we know how to inspire and deliver your vision, giving you the perfect second home. </p>
<p align="justify" class="style1">As a commitment to both our standards and your total peace of mind. We
have become synonomous with exciting innovation, supreme quality and first class customer service meaning we have become one of the
leading manufacturers of park homes in the UK today. </p>
</div>
</div>
<div id="footer"> </div>
</body>
</html>
Now the CSS,
/* v1.0 | 20080212 */
div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
html {
height: 100%;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
.htmlarea {
border: 1px solid #ccc;
}
body {
text-align: center;
font-family: Verdana, Arial, Tahoma, Verdana;
background-color: #fff;
font-size: 0.8em;
color: #666;
margin: 0px;
padding: 0px;
background-image: url(../images/background.jpg);
background-position: top;
background-repeat: repeat-x;
height: 100%;
}
h1 {
font-size: 1.6em;
color: #295292;
}
h2 {
font-size: 1.4em;
}
a {
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
p {
padding: 0px;
margin: 10px 0px;
}
img {
border: 0px;
padding: 0px;
margin: 0px;
}
textarea, select {
border: 1px solid #ccc;
font-family: Arial, Tahoma, Verdana;
font-size: 1em;
padding: 2px;
}
.container {
width: 950px;
text-align: left;
background-color: #FFFFFF;
margin: auto;
padding-right: 5px;
padding-left: 5px;
}
.pagecontainer {
width: 950px;
text-align: left;
background-color: #FFFFFF;
margin: auto;
padding-right: 5px;
padding-left: 5px;
min-height: 55%;
}
#modelcontainer {
width: 593px;
float: left;
padding-top: 15px;
padding-left: 15px;
}
#modelcontainer a {
font-style:normal;
color: #295292
}
#modelcontainerright {
width: 318px;
float: right;
padding-top: 15px;
padding-left: 15px;
}
#modelcontainerright a {
color: #295292
}
#nav {
clear: both;
float: left;
height: 2.2em;
line-height: 2.2em;
width: 100%;
background-color: #295292;
}
#nav ul {
width: 950px;
margin: auto;
text-align: left;
}
#nav li {
float: left;
width: 104px;
text-align: center;
border-right: 1px solid #fff;
}
#nav a {
display: block;
width: 104px;
color: #fff;
}
#nav a:hover {
color:#CCCCCC
}
#nav .on {
text-decoration: underline;
}
#nav .noborder {
border: 0px;
}
#leftcolindex {
width: 440px;
}
#leftcol {
float: left;
width: 641px;
padding-top: 15px;
font: Georgia, "Times New Roman", Times, serif;
font-family: Georgia, "Times New Roman", Times, serif;
}
#leftcol2 {
float: left;
width: 641px;
padding-top: 15px;
font: Georgia, "Times New Roman", Times, serif;
font-family: Georgia, "Times New Roman", Times, serif;
padding-left: 15px;
}
#leftcol2 a {
color: #295292
}
#newleftcol {
float: left;
width: 450px;
padding-top: 15px;
font: Georgia, "Times New Roman", Times, serif;
font-family: Georgia, "Times New Roman", Times, serif;
padding-left: 15px;
}
#rightcolquote {
float: right;
width: 450px;
padding-top: 70px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 30px;
font-style: italic;
text-align: center;
}
#rightcolslideshow {
float: right;
width: 450px;
padding-top: 0px;
}
#rightcol {
float: right;
width: 295px;
margin-top: 41px;
}
#newrightcol {
float: right;
width: 450;
margin-top: 41px;
}
#rightcolbroadview {
float: right;
width: 300px;
background-color: #F0E8F5;
margin-top: 43px;
}
#rightcolbrunswick {
float: right;
width: 300px;
background-color: #c7d9bd;
margin-top: 43px;
}
#rightcolcarelton {
float: right;
width: 300px;
background-color: #f5f0f3;
margin-top: 43px;
}
#rightcolhudson {
float: right;
width: 300px;
background-color: #acdaeb;
margin-top: 43px;
}
#rightcollakefield {
float: right;
width: 300px;
background-color: #f7f8dc;
margin-top: 43px;
}
#rightcolmillbrook {
float: right;
width: 300px;
background-color: #ebe6f1;
margin-top: 43px;
}
#rightcolprospect {
float: right;
width: 300px;
background-color: #d1dde1;
margin-top: 43px;
}
#rightcollangley {
float: right;
width: 300px;
background-color: #f2ebe4;
margin-top: 43px;
}
#modelrangeboxleft {
width: 284px;
height: 90px;
margin-top: 10px;
margin-right: 0px;
float: left;
background-color: #CCCCCC;
}
#modelrangeboxright {
width: 284px;
height: 90px;
margin-top: 10px;
margin-right: 0px;
float: right;
background-color: #CCCCCC;
}
#splashimage {
float: left;
}
#modeltext {
float: right;
width: 135px;
height: 90px;
}
/* common */
.floatleft {
float: left;
}
.floatright {
float: right;
}
.clear {
clear: both;
}
.center {
text-align: center;
}
#footer {
width: 950px;
height: 50px;
clear: both;
margin: 0 auto;
margin-bottom: 5px;
font-size: 11px;
color: #CCCCCC;
background-color: #295292;
bottom: 0px;
border: 5px solid #FFFFFF;
}
#headerbg {
width: 930px;
padding-top: 15px;
float: left;
}
#header {
width: 920px;
padding-top: 15px;
float: left;
padding-left: 15px;
padding-right: 15px;
You can ignore most but if you preview my web in IE6 a white box will fill the main text up until the footer, you can see in .pagecontainer i have set the min-height to 55%, now my problem is if you preview the page in Firefox the white box will only go to the bottom of the text leaving a void between it and the footer.
Please can someone help me solve this problem, its driving me insane and i have looked everywhere.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="shortcut icon" href="./favicon.ico" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<meta name="Author" content="" />
<meta name="language" content="English" />
<meta name="robots" content="follow, index" />
<meta name="Distribution" content="Global" />
<meta name="Revisit-After" content="7 days" />
<meta name="copyright" content="" />
<style type="text/css">
</head>
<body>
<div class="container">
<a href="index.htm" title="View homepage"><a href="index.htm" title="View homepage"></a><a href="index.htm"
title="View homepage"><img name="" src="" width="418" height="192" alt="" /></a></a>
<div id="rightcolquote">
"quality, bespoke homes..."
</div>
</div>
<div id="nav">
<ul>
<li><a href="index.htm" title="View homepage">Homepage</a></li>
<li><a href="about_us.html" title="View information about" class="on">About us</a></li>
<li><a href="model_range.html" title="View our model range">Model range</a></li>
<li><a href="distributors.html" title="View our partners]">Partners</a></li>
<li><a href="gallery.html" title="View photo gallery">Gallery</a></li>
<li><a href="accessibility.html" title="View our E-Brochure">E-Brochure</a></li>
<li><a href="warranty.html" title="View our quality information">Quality</a></li>
<li><a href="contact.html" title="Contact">Contact</a></li>
<li class="noborder"><a href="faq.html" title="View frequently asked questions">FAQ</a></li>
</ul>
</div>
<div class="pagecontainer">
<div id="header">
<span class="style3">About Us</span> <br />
<br />
<div align="justify" class="style4"><img name="" src="" width="231" height="167" alt="" />
</div>
<p align="justify" class="style1"> Based at the heart of - a holiday getaway
famous for its evocative natural beauty and inspiration here at we
know a thing or two about leisure homes inspired by those surroundings. We
are the largest park home manufacturers in Wales and we know how important it
is to find the perfect holiday retreat home, your own utopia away from the stress of
everyday life yet in parallel to your lifestyle . </p>
<p align="justify" class="style1"> We also know how important it is to find a leisure home
that is built to the highest standard so homely and comfortable that you'll want to visit it again and again
throughout the year. Most importantly, as the largest park and leisure home manufacturer in
Wales, we know how to inspire and deliver your vision, giving you the perfect second home. </p>
<p align="justify" class="style1">As a commitment to both our standards and your total peace of mind. We
have become synonomous with exciting innovation, supreme quality and first class customer service meaning we have become one of the
leading manufacturers of park homes in the UK today. </p>
</div>
</div>
<div id="footer"> </div>
</body>
</html>
Now the CSS,
/* v1.0 | 20080212 */
div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
html {
height: 100%;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
.htmlarea {
border: 1px solid #ccc;
}
body {
text-align: center;
font-family: Verdana, Arial, Tahoma, Verdana;
background-color: #fff;
font-size: 0.8em;
color: #666;
margin: 0px;
padding: 0px;
background-image: url(../images/background.jpg);
background-position: top;
background-repeat: repeat-x;
height: 100%;
}
h1 {
font-size: 1.6em;
color: #295292;
}
h2 {
font-size: 1.4em;
}
a {
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
p {
padding: 0px;
margin: 10px 0px;
}
img {
border: 0px;
padding: 0px;
margin: 0px;
}
textarea, select {
border: 1px solid #ccc;
font-family: Arial, Tahoma, Verdana;
font-size: 1em;
padding: 2px;
}
.container {
width: 950px;
text-align: left;
background-color: #FFFFFF;
margin: auto;
padding-right: 5px;
padding-left: 5px;
}
.pagecontainer {
width: 950px;
text-align: left;
background-color: #FFFFFF;
margin: auto;
padding-right: 5px;
padding-left: 5px;
min-height: 55%;
}
#modelcontainer {
width: 593px;
float: left;
padding-top: 15px;
padding-left: 15px;
}
#modelcontainer a {
font-style:normal;
color: #295292
}
#modelcontainerright {
width: 318px;
float: right;
padding-top: 15px;
padding-left: 15px;
}
#modelcontainerright a {
color: #295292
}
#nav {
clear: both;
float: left;
height: 2.2em;
line-height: 2.2em;
width: 100%;
background-color: #295292;
}
#nav ul {
width: 950px;
margin: auto;
text-align: left;
}
#nav li {
float: left;
width: 104px;
text-align: center;
border-right: 1px solid #fff;
}
#nav a {
display: block;
width: 104px;
color: #fff;
}
#nav a:hover {
color:#CCCCCC
}
#nav .on {
text-decoration: underline;
}
#nav .noborder {
border: 0px;
}
#leftcolindex {
width: 440px;
}
#leftcol {
float: left;
width: 641px;
padding-top: 15px;
font: Georgia, "Times New Roman", Times, serif;
font-family: Georgia, "Times New Roman", Times, serif;
}
#leftcol2 {
float: left;
width: 641px;
padding-top: 15px;
font: Georgia, "Times New Roman", Times, serif;
font-family: Georgia, "Times New Roman", Times, serif;
padding-left: 15px;
}
#leftcol2 a {
color: #295292
}
#newleftcol {
float: left;
width: 450px;
padding-top: 15px;
font: Georgia, "Times New Roman", Times, serif;
font-family: Georgia, "Times New Roman", Times, serif;
padding-left: 15px;
}
#rightcolquote {
float: right;
width: 450px;
padding-top: 70px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 30px;
font-style: italic;
text-align: center;
}
#rightcolslideshow {
float: right;
width: 450px;
padding-top: 0px;
}
#rightcol {
float: right;
width: 295px;
margin-top: 41px;
}
#newrightcol {
float: right;
width: 450;
margin-top: 41px;
}
#rightcolbroadview {
float: right;
width: 300px;
background-color: #F0E8F5;
margin-top: 43px;
}
#rightcolbrunswick {
float: right;
width: 300px;
background-color: #c7d9bd;
margin-top: 43px;
}
#rightcolcarelton {
float: right;
width: 300px;
background-color: #f5f0f3;
margin-top: 43px;
}
#rightcolhudson {
float: right;
width: 300px;
background-color: #acdaeb;
margin-top: 43px;
}
#rightcollakefield {
float: right;
width: 300px;
background-color: #f7f8dc;
margin-top: 43px;
}
#rightcolmillbrook {
float: right;
width: 300px;
background-color: #ebe6f1;
margin-top: 43px;
}
#rightcolprospect {
float: right;
width: 300px;
background-color: #d1dde1;
margin-top: 43px;
}
#rightcollangley {
float: right;
width: 300px;
background-color: #f2ebe4;
margin-top: 43px;
}
#modelrangeboxleft {
width: 284px;
height: 90px;
margin-top: 10px;
margin-right: 0px;
float: left;
background-color: #CCCCCC;
}
#modelrangeboxright {
width: 284px;
height: 90px;
margin-top: 10px;
margin-right: 0px;
float: right;
background-color: #CCCCCC;
}
#splashimage {
float: left;
}
#modeltext {
float: right;
width: 135px;
height: 90px;
}
/* common */
.floatleft {
float: left;
}
.floatright {
float: right;
}
.clear {
clear: both;
}
.center {
text-align: center;
}
#footer {
width: 950px;
height: 50px;
clear: both;
margin: 0 auto;
margin-bottom: 5px;
font-size: 11px;
color: #CCCCCC;
background-color: #295292;
bottom: 0px;
border: 5px solid #FFFFFF;
}
#headerbg {
width: 930px;
padding-top: 15px;
float: left;
}
#header {
width: 920px;
padding-top: 15px;
float: left;
padding-left: 15px;
padding-right: 15px;
You can ignore most but if you preview my web in IE6 a white box will fill the main text up until the footer, you can see in .pagecontainer i have set the min-height to 55%, now my problem is if you preview the page in Firefox the white box will only go to the bottom of the text leaving a void between it and the footer.
Please can someone help me solve this problem, its driving me insane and i have looked everywhere.