no white background in wrapper in firefox

rage85 · Dec 3, 2007

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

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>&nbsp;</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

zkiller · Dec 4, 2007

when you call an id in css, don't add the tag in front of the div name.

instead of div#idname just put #idname. it is redundant.

i think your problem might be caused by you applying style properties to the html tag. the html has little do with what is displayed on screen, it merely declares the beginning and end of the html content, so the browser knows how to interpret it. instead do something like...

Code:

* { 
	padding: 0; margin: 0;
}

body { 
	margin: 0 auto; padding: 0; text-align: center;
	font-family:Arial, Helvetica, sans-serif;
	background-color: #CBC3AF;
}

qadisha · Dec 4, 2007

White background in wrapper

For what it's worth and without going through all your code, I suggest you try adding :
padding: 5px; (or whichever figure gives the white space you want to achieve)
to the css for wrapper, because it seems that everything you put inside the wrapper is just taking up the whole space.

zkiller · Dec 4, 2007

qadisha said:
For what it's worth and without going through all your code, I suggest you try adding :
padding: 5px; (or whichever figure gives the white space you want to achieve)
to the css for wrapper, because it seems that everything you put inside the wrapper is just taking up the whole space.

maybe i am missing something, but the container width is set to 770px. everything within it is floated. the max width i noticed of the elements within the container was also 770px. so, at higher resolutions the container, which is centered on screen, should leave some white space on either side.

no white background in wrapper in firefox

rage85

New Member

zkiller

Super Moderator

qadisha

New Member

zkiller

Super Moderator