hi guys
i'm quite new to web design so this could be an easy one. I'm having trouble showing a white background in my wrapper as the background of the page is a brownish color. its works fine in Explorer but in Firefox its not showing. I've tried putting background: #FFF; in the body tag that did not work. I've also tried background-color: #FFF; but that didn't work either.
can anyone help me out plz?
heres my code if it helps.
CSS
HTML
thanks
i'm quite new to web design so this could be an easy one. I'm having trouble showing a white background in my wrapper as the background of the page is a brownish color. its works fine in Explorer but in Firefox its not showing. I've tried putting background: #FFF; in the body tag that did not work. I've also tried background-color: #FFF; but that didn't work either.
can anyone help me out plz?
heres my code if it helps.
CSS
Code:
@charset "utf-8";
html {
height: 100%;
padding: 0; margin: 0 auto;
background: #CBC3AF;
}
body {
margin: 0 auto; padding: 0; text-align: center;
font-family:Arial, Helvetica, sans-serif;
}
div#wrapper {
position: relative;
width: 770px; height: 100%; margin: 0 auto 0; padding: 0;
text-align: left;
border-left: 2px solid #CCC;
border-right: 2px solid #CCC;
color:#000;
background-color: #FFFFFF;
}
div#blueheader {
float: left; z-index: 101; margin: 0;
background: #005599; height: 25px; width: 770px;
}
div#blueheader, div#header, div#nav, {
padding-top: 1px; padding-bottom: 1px;
}
div#header {
float:left; z-index: 102;
background: url(images/header.gif) 0 0 no-repeat;
height: 133px; width: 770px;
}
div#header1 {
float:left; z-index: 102;
background: url(images/header.gif) 0 0 no-repeat;
height: 133px; width: 770px;
}
div#header span, h3 span, div#blueheader span, #bluefooter p {
visibility: hidden;
}
div#header1 span, h3 span, div#blueheader1 span, #bluefooter1 p {
visibility: hidden;
}
div#nav {
float: left;
width: 239px; height: 291px; background: #272D3E;
}
div#nav li {
list-style-type: none; margin: 0;
}
div#nav li {
margin-bottom: 15px;
}
div#nav a {
color:#FFFFFF;
text-decoration: none;
}
div#nav a:hover {
color: #D30F4C;
}
div#flashimages {
float: left; z-index: 103;
height: 229px; margin: -16px; padding-left: 17px;
}
div#welcome {
float: right; z-index: 104;
background: #005599; color:#FFFFFF; width: 530px; height: 64px;
margin: 30px 0 0 0;
font: 1.4em Arial, Helvetica, sans-serif;
text-align: center ;
}
div#news {
float:left; z-index: 105;
background: #DFDACD;
display: block;
width: 238px;
border-right: 0.5px solid #CCC;
}
div#summary, #subsummary1, #subsummary2, #news {
font-size:12px;
}
div#summary {
float: left; z-index: 106;
width: 530px;
margin: 0;
}
div#subsummary1 {
float: left; z-index: 107;
width: 265px;
margin: 50px auto;
}
div#subsummary2 {
float: left; z-index: 108;
width: 265px;
margin: 50px auto;
}
div#subsummary1 p, #subsummary2 p, #news p, #summary p {
margin: 0 1.5em; padding: 0.5em 0;
}
div#bluefooter {
float:left; z-index: 109;
background: #80AACC; width:770px; height: 15px;
margin: 0;
}
div#footerlinks, #footertext, #footerimage {
background: #005599; color:#fff;
height: 65px; text-wrap: suppress;
}
div#footerlinks a {
color: #FFFFFF; text-decoration: none;
}
div#footerlinks a:hover {
text-decoration: underline;
}
div#footerlinks {
float:left; z-index: 110;
width: 485px; font-size: x-small;
margin: 0; text-align:justify; text-indent: 1em;
}
div#footertext {
float:left; z-index: 112;
width: 215px; font-size: 12px; text-align: right;
margin: 0;
}
div#footerimage {
float: left; z-index: 113;
width: 70px; text-align: center;
margin: 0;
}
.sectionheadings {
color: #D30F4C;
font-size:13px; font-weight:bold;
}
/* CSS for content template */
div#blueheader1, div#header1, div#nav1, #content, #blufooter {
padding-top: 1px; padding-bottom: 1px;
}
div#blueheader1 {
float: left; z-index: 101; margin: 0;
background: #005599; height: 25px; width: 770px;
}
div#header1 {
float:left; z-index: 102;
background: url(images/header.gif) 0 0 no-repeat;
height: 133px; width: 770px;
}
div#header1 span, h3 span, div#blueheader1 span, #bluefooter1 p {
visibility: hidden;
}
div#nav1 {
float: left;
width: 239px; height: 287px; background: #272D3E;
}
div#nav1 li {
list-style-type: none; margin: 0;
}
div#nav1 li {
margin-bottom: 15px;
}
div#nav1 a {
color:#FFFFFF;
text-decoration: none;
}
div#nav1 a:hover {
color: #D30F4C;
}
div#flashimages1 {
float: left; z-index: 103;
height: 229px; margin: -16px; padding-left: 17px;
}
div#welcome1 {
float: right; z-index: 104;
background: #005599; color:#FFFFFF; width: 530px; height: 64px;
margin: 28px 0 0 0;
font: 1.4em Arial, Helvetica, sans-serif;
text-align: center ;
}
div#content {
float: left;
width: 770px;
text-align: left;
font-size: 12px;
padding-left: 1em;
}
div#bluefooter1 {
float:left; z-index: 109;
background: #80AACC; width:770px; height: 15px;
margin: 0;
}
div#footerlinks1, #footertext1, #footerimage1 {
background: #005599; color:#fff;
height: 65px; text-wrap: suppress;
}
div#footerlinks1 a {
color: #FFFFFF; text-decoration: none;
}
div#footerlinks1 a:hover {
text-decoration: underline;
}
div#footerlinks1 {
float:left; z-index: 110;
width: 485px; font-size: x-small;
margin: 0; text-align:justify; text-indent: 1em;
}
div#footertext1 {
float:left; z-index: 112;
width: 215px; font-size: 12px; text-align: right;
margin: 0;
}
div#footerimage1 {
float: left; z-index: 113;
width: 70px; text-align: center;
margin: 0;
}
HTML
Code:
<!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"><!-- InstanceBegin template="/Templates/pff_content.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<link href="pffcss.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
#flashimages1 { padding: 16px 0; }
div#welcome1 {
float: right; z-index: 104;
background: #005599; color:#FFFFFF; width: 530px; height: 64px;
margin:0;
font: 1.4em Arial, Helvetica, sans-serif;
text-align: center ;
}
div#nav1 {
float: left;
width: 239px; height: 291px; background: #272D3E;
}
#welcome1 p, #nav1 ul, #footerlinks1, #footerimage1, #footertext1, #content, #contentright {padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="blueheader1">
<p><span>blue header</span></p>
</div>
<div id="header1">
<p><span>The Precast Flooring Federation<br />
60 Charles Street<br />
Leicester LE1 1FB </span><span>T: 0116 253 6161 F: 0116 251 4568 </span><span>E: <a href="mailto:[email protected]">[email protected]</a></span></p>
</div>
<div id="nav1">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="technical.html">Technical</a></li>
<li><a href="applications.html">Applications</a></li>
<li><a href="news.html">News</a></li>
<li><a href="membership.html">Membership </a></li>
<li><a href="publications.html">Publications</a></li>
<li><a href="aboutus.html">About us</a></li>
<li><a href="contactus.html">Contact us</a></li>
</ul>
</div>
<div id="flashimages1">
<p><img src="images/floors.gif" width="530" height="229" /></p>
</div>
<div id="welcome1">
<p>Welcome to the Precast Flooring Federation (PFF)</p>
</div>
<!-- InstanceBeginEditable name="content" -->
<div id="content">
<p>We are alway pleased to hear from anyone who has a question about precast flooring or about the Federation itself.</p>
<p>If you have a specific query, you might like to check out one of our <a href="http://www.precastfloors.info/publications.htm">publications</a>. Otherwise, please get in touch using thedetails below:</p>
<p>The Precast Flooring Federation<br />
60 Charles Street<br />
Leicester LE1 1FB </p>
<p>T:0116 253 6161 <br />
F:0116 251 4568 </p>
<p>E: <a href="mailto:[email protected]">[email protected]</a></p>
</div>
<div id="contentright">
<p> </p>
</div>
<!-- InstanceEndEditable -->
<div id="bluefooter1">
<p>bluefooter</p>
</div>
<div id="footerlinks1">
<p><a href="index.html">Home</a> | <a href="technical.html">Technical</a> | <a href="applications.html">Applications</a> | <a href="news.html">News</a> | <a href="membership.html">Membership</a> | <a href="publications.html">Publications</a> | <a href="aboutus.html">About us</a> | <a href="contactus.html">Contact us</a></p>
</div>
<div id="footertext1">
<p>A Product Association of <br />
British Precast Concrete Federation Ltd</p>
</div>
<div id="footerimage1">
<p><img src="images/logo-sm.gif" width="43" height="32" alt="british precast" /></p>
</div>
</div>
</body>
<!-- InstanceEnd --></html>
thanks