CSS Forum

**simon_creator** · 02-09-2009, 10:24 PM

Hi I am taking a bit of a leap trying to design with css, and my current design the bg's are not showing in firefox (which is very important), I was wondering if anyone could help me out with where I have gone wrong, cheers.
the link is http://www.goldendisc.com.au/see/test/01.html

and the code is

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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta name="robots" content="index,follow" /> 
	<meta name="description" content="put page description here" /> 
	<meta name="keywords" content="put, keywords, here" /> 	
<title>Virtual Tour : Golden Disc Production</title>	
<style type="text/css">
body {
    font-family: tahoma, helvetica, arial, sans-serif;
    font-size: 9px;
    text-align: center;
    background: #000;
    color: #fff;
    padding-top: 12px;
    line-height: 2;
}
#wrapper {margin: auto;    text-align: left;    width: 605px;    position: relative;    padding-top: 25px;}
h1 {margin: 0; padding: 0; }
#left_bar {float: left; width: 179px;}
#vt_body {background: url(aim/bg.gif) repeat-y; width: 605px;}
#vt_top {background: url(aim/top.gif) no-repeat; width: 605px;}
#vt_bot {background: url(aim/bot.gif) bottom no-repeat; width: 605px;}
#left_bar .split {   background: url(aim/div.gif) no-repeat; height: 7px;}
#left_bar .content {padding-left:14px;}
#content {float: right; width: 421px; padding-top:1px;}
#info {font-family: Sans-serif;font-size: 16px;font-weight: 700;color: #C0C0C0;text-align: right;padding-right: 13px; line-height:21px;}
</style>

</head>
<body bgcolor=black>
<div id="wrapper">
<h1><img src="images/vt.jpg" width="233" height="27" alt="" border="0" align=""></h1>
		
		 <div id="vt_body"> 
		 	  <div id="vt_top"> 
			  	   <div id="vt_bot"> 
				     <div id="left_bar">
		 	  	   		<div class="content">
		  	  &nbsp;Menu Li's here
			  	   		<br />
			  	   		<br />
			  	   		<br />
			  	  		<br />
			  	  		 </div>
						 <div class="split"></div>
		 	  	   		 <div class="content">
						 &nbsp;Help file here
						 </div>
						 <div class="split"></div>
						 <div class="content">
						<img src="aim/logo.gif" width="163" height="124" alt="" border="0" align=""></div>
						 <div class="split"></div>
						 <div class="content">
						 &nbsp;Agent Contact Details
						 </div>
						 
			 	     </div>
					 <div id="content"> 
					<img src="aim/vt_space.gif" width="408" height="275" alt="" border="0" align="">	  	  
						 <div id="info">
						 275 Address St, Como, Perth<br />
						 Price: $750, 000<br />
						 Google Map<br />
						 Contact
						 
						 </div>
						 
					</div>
				  </div>
			   </div>			   
		 </div>
</div>
</body>
</html>

**LadynRed** · 02-10-2009, 09:14 AM

The backgrounds are not showing because your wrapper and #vt_body div are not containing their contents - and that's because you have not properly CLEARED your floats.

http://css-discuss.incutio.com/?page=ClearingSpace

**simon_creator** · 02-10-2009, 11:47 PM

Thankyou lady red! I knew it had to be something simple :-)

*The backgrounds are not showing because your wrapper and #vt_body div are not containing their contents - and that's because you have not properly CLEARED your floats.