CSS #wrapper background color don't show up

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
ljCharlie
Forum Contributor
Posts: 289
Joined: Wed May 19, 2004 8:23 am

CSS #wrapper background color don't show up

Post by ljCharlie »

I'm creating a page that somehow all the DIVs are not showing up correctly inside the wrapper. It looks right in Dreamweaver MX 2004 but when actually previewing the page, the background of the wrapper does not show through and only the background of the body is showing instead. Below are my codes:

in the CSS file:

Code: Select all

#wrapper {
	margin-left:auto;
	margin-right:auto;
	width: 720px;
	background: #FFFFFF;
	border: thin solid #FF0000;
	position: relative;
}
#topLogo {
	background-color: #000066;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: bolder;
	color: #FFFFFF;
	padding-left: 5px;
	padding-top: 5px;
}
#logoTag {
	background-color: #000066;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	color: #CCCCCC;
	text-align: right;
	padding-right: 5px;
	padding-bottom: 5px;
}
#topHMenu {
	background-color: #FF6600;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #FFFFFF;
	padding-left: 5px;
	height: 25px;
}
#wrapper {
	margin-left:auto;
	margin-right:auto;
	width: 720px;
	background: #FFFFFF;
	border: thin solid #FF0000;
	position: relative;
}
#leftSideVMenu {
	background-color: #FF9900;
	width: 180px;
	padding-left: 5px;
	float: left;
}
#centerMainContent {
	padding-left: 5px;
	text-align: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	float: left;
	width: 386px;
}
#rightSidePic {
	float: right;
	width: 144px;
}
And here is the Body of the html file:

Code: Select all

<body>
<!-- #wrapper start here -->
<div id=&quote;wrapper&quote;>
		<div id=&quote;topLogo&quote;>My Log Goes Here</div>
		<div id=&quote;logoTag&quote;>This is the tag of my logo.</div>
		<div id=&quote;topHMenu&quote;>Menu goes here</div>
	<!-- #pagecontent start here -->			
	<div id=&quote;pagecontent&quote;>
<!-- #sideMenu start here -->		
		<div id=&quote;leftSideVMenu&quote;>
      		<p>ABOUT Page</p>
        	<p>WELCOME</p>
        	<p>HISTORY</p>
        	<p>MISSION</p>
        	<p>GOALS</p>
        	<p>VISION</p>
        	<p>STAFF</p>
    	</div>
<!-- #sideMenu end here -->
<!-- #mainContent start here -->
    	<div id=&quote;centerMainContent&quote;>
    	  <p>Main body texts goes here.</p>
   	  </div>
<!-- #mainContent end here -->
		<div id=&quote;rightSidePic&quote;><img src=&quote;images/aboutfnd1.jpg&quote; /></div>
	</div>
<!-- #pagecontent end here -->	  
</div>
<!-- #wrapper end here -->	
</body>
Any help is appreciated.

ljCharlie
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

two #wrappers, same code... :?

anyway.. try using background-color instead of background maybe.

also, try using a class version.
zenabi
Forum Commoner
Posts: 84
Joined: Mon Sep 08, 2003 5:26 am
Location: UK

Post by zenabi »

1. Remove the extra #wrapper code from your CSS as feyd pointed out.
2. Add overflow: auto to your #wrapper

Code: Select all

#wrapper {
	margin-left:auto;
	margin-right:auto;
	width: 720px;
	background: #FFFFFF;
	border: thin solid #FF0000;
	position: relative;
	overflow: auto;
}
For more information on this "fix" see Super Simple Clearing Floats
Post Reply