PDA

View Full Version : Need help urgently! My site wont display properly in firefox!



maddog
28 Jul 2009, 10: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">&nbsp;&nbsp;&nbsp;Based at the heart of - a holiday getaway

&nbsp;&nbsp;&nbsp;famous for &nbsp;&nbsp;&nbsp;its evocative natural &nbsp;&nbsp;&nbsp;beauty and inspiration here at we

&nbsp;&nbsp;&nbsp;know a thing or two about leisure &nbsp;&nbsp;&nbsp;homes &nbsp;&nbsp;&nbsp;inspired by those surroundings. We

are the largest park home &nbsp;&nbsp;&nbsp;manufacturers &nbsp;&nbsp;&nbsp;in Wales and we know how &nbsp;&nbsp;&nbsp;important it

is to find the perfect &nbsp;&nbsp;&nbsp;holiday retreat home, &nbsp;&nbsp;&nbsp;your own utopia away from the stress of

&nbsp;&nbsp;&nbsp;everyday life yet in &nbsp;&nbsp;&nbsp;parallel to your lifestyle . </p>
<p align="justify" class="style1">&nbsp;&nbsp;&nbsp;We also know how important it is to find a leisure home

that is built to the highest &nbsp;&nbsp;&nbsp;standard so homely and comfortable that you'll want to visit it again and again

&nbsp;&nbsp;&nbsp;throughout the year. Most importantly, as the largest park and leisure home &nbsp;&nbsp;&nbsp;manufacturer in

Wales, we know how to inspire and deliver your vision, giving &nbsp;&nbsp;&nbsp;you &nbsp;&nbsp;&nbsp;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.