CSS - Background Image Not Repeating Properly

I'm trying to get a background image/color to repeat down the left hand column of a site, he http:// www. lisaannschleipfer .com, but can't seem to get it working in either FF or IE. You'll notice that in the left hand column, the tannish color does not repeat all the way down the column.

I'm fairly certain I've narrowed it down to the bit of CSS code he

Code:

div#wrapper {
        margin: auto;
	width:800px;
	background: #d1c8ab url(../images/wrapper_bg.jpg);
        background-repeat: repeat-y;
}

I've tried looking around the forum for some solutions, and have found a few possibilities (height: auto, overflow: auto, etc), but nothing that I have tried to insert into the stylesheet has seemed to work.

Does anyone have any suggestions or solutions? I'd appreciate it!

Here's the entire stylesheet, for reference:

Code:

html {
  height: 100%;
  margin-bottom: 0px;
}

form {
  margin: 0;
  padding: 0;
}

img,table {
	border:none;
}

table td {
	vertical-align:top;
}

body {
	font-family: Helvetica,Arial,sans-serif;
	line-height: 1.3em;
	margin: 0px 0px 0px 0px;
	font-size: 12px;
	color: #666666;
	background: #0d789c url(../images/bg.jpg) top center repeat-x;
}

a:link, a:visited {
	text-decoration: none;
	font-weight: normal;
	color: #0d789c;
}

a:hover {
	text-decoration: underline;
	font-weight: normal;
	color: #0d789c;
}

input.button {
 cursor: pointer;
 vertical-align: bottom;
 border: 0px;
 background:none;
}

p {
  margin-top: 0;
  margin-bottom: 5px;
  text-align:justify;
}

/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/

#header {
	margin:0 auto;
	width:940px;
}

.left_bg {
	background: transparent url(../images/left_bg.jpg) top right no-repeat;
	width:70px;
}

.middle_bg {
	background: transparent url(../images/.jpg) top right no-repeat;
	width:800px;
}

.right_bg {
	background: transparent url(../images/right_bg.jpg) top left no-repeat;
	width:70px;
}

.top_bg {
	background: transparent url(../images/top_bg.jpg) top center no-repeat;
	width:800px;
	height:45px;
}

.rightside {
	background: transparent url(../images/rightside_bg.jpg) top center no-repeat;
	width:185px;
	height:173px;
}

.header_bg {
	background: transparent url(../images/header_bg.jpg) top center no-repeat;
	width:615px;
	height:173px;
}



#page_bg {
	padding: 0;
	margin:0px auto;
}

#top {
	width:800px;
	margin:0 auto;
	padding:0;
}

div.center {
  padding:0;
}

div#wrapper {
        margin: auto;
	width:800px;
	background: #d1c8ab url(../images/wrapper_bg.jpg);
        background-repeat: repeat-y;
}

#logo {
	padding:47px 50px 0 50px;
	height:100px;
	text-align:left;
	margin:0 auto;
} 

#logo a, #logo a:link, #logo a:hover {
	font-weight: normal;
	font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 36px;
	padding:0px;
	margin:0;
	line-height:1.4em;
	letter-spacing:2px;
	color:#fefefe;
	text-decoration:none;
}

div.newsflash {
	height:150px;
	padding:10px;
	overflow: hidden;
	color:#fff;
	text-align:left;
}

div#tabarea {
	margin: 0;
	width:615px;
	height:26px;
	text-align:left;
}

#footer {
	width:800px;
	margin:0 auto;
}

.validation {
	float:right;
	padding:8px 20px 0 0;
}

#footer .footer {
	background: transparent url(../images/footer.jpg) top center no-repeat;
	height:28px;
	width:800px;
}

#pathway {
	padding: 0px 10px 8px;
	width: auto;
	margin-right: 250px;
	text-align: left;
}

#search {
	float: right;
	width:320px;
	margin-top: -20px;
	margin-right: 20px;
	height: 40px;
	overflow: hidden;
	text-align:right;
}

#area {
	padding: 0;
	width:100%;
/* color:#d1c8ab; */
}

#whitebox {
	margin: 0;
	width: auto;
}

#whitebox div {
	text-align: left;
}



#whitebox_br {
	height: 13px;
	background: url(../images/mw_content_b_r.png) 100% 100% no-repeat;
}

/* horizontal pill menu */
.pill {
  margin:0px 0 0 1px;
  text-align:left;
}

td.pill_m {
  padding: 0;
  margin: 0 10px;
  width: auto;
  text-align:center;
}

#pillmenu {
  white-space: nowrap;
  height: 26px;
  float: left;
}

#pillmenu ul {
  margin: 0;
  padding: 0;

  list-style:none;
}

#pillmenu li {
	float: left;
	margin: 0px 1px 0 0;
	padding: 0;
	background: transparent;
}

#pillmenu a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
	float:left;
  display:block;
  height: 24px;
  line-height: 24px;
  padding: 2px 10px 0 10px;
  color: #fff;
  text-decoration: none;
  background: transparent;
}


#pillmenu a:hover {
  text-decoration: underline;
}

#pillmenu a#active_menu-nav {
	color: #fff;
	background: url(../images/active_arrow.gif) top center no-repeat;
}

#pillmenu a#active_menu-nav:hover {
	color: #fff;
}

#leftcolumn {
	margin: 0;
	text-align:left;
	width: 221px;
	float:left;
	background: #d1c8ab url(../images/leftcol_bg.jpg) top left no-repeat;

}


div#maincolumnfull {
	padding:2px 10px;




	float:left;
	width: 760px;

}









div#maincolumn {
padding:20px 10px;
float:left;
width: 559px;
background: #ffffff url(../images/maincol_bg.jpg) top left no-repeat;
}

div.nopad {
	padding: 0;
	text-align:left;
}

td.middle_pad {
	width: 20px;
}

/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/

div.offline {
	background: #fffebb;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 1.2em;
	padding: 5px;
}

span.pathway {
  display: block;
  margin: 0 20px;
  height: 16px;
  line-height: 16px;
  overflow: hidden;
}

/* headers */
div.componentheading {
  padding-left: 0px;
}

h1 {
	padding: 0;
	font-family:Helvetica ,Arial,sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	vertical-align: bottom;
	color: #666;
	text-align: left;
	width: 100%;
}

h2, .contentheading {
	padding: 0;
	font-family: Tahoma, Helvetica,sans-serif;
	font-size: 12px;
	font-weight: bold;
	vertical-align: bottom;
	color: #8cb6cf;
	text-align: left;
	width: 100%;
}

table.contentpaneopen h3 {
	margin-top: 25px;
}

h4 {
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
}

h3, .componentheading, table.moduletable th, legend {
  margin: 0;
  font-weight: bold;
  font-family: Tahoma,Helvetica,Arial,sans-serif;
  color:#71a7c8;
  font-size: 1.4em;
  padding-left: 0px;
	margin-bottom: 10px;
	text-align: left;
}


/* small text */
.small {
	font-size: .90em;
	color: #999;
	font-weight: normal;
	text-align: left;
}

.modifydate {
  height: 20px;
  vertical-align: bottom;
	font-size: .90em;
	color: #999;
	font-weight: normal;
	text-align: left;
}

.createdate {
	height: 20px;
	vertical-align: top;
	font-size: .90em;
	color: #999;
	font-weight: normal;
	vertical-align: top;
	padding-bottom: 5px;
	padding-top: 0px;

}

a.readon {
	margin-top: 10px;
	display: block;
	float: left;
	background: url(../images/mw_readon.png) top right no-repeat;
	padding-right: 20px;
	line-height: 14px;
	height: 16px;
}

/* form validation */
.invalid { border-color: #ff0000; }
label.invalid { color: #ff0000; }


/** overlib **/

.ol-foreground {
	background-color: #f6f6f6;
}

.ol-background {
	background-color: #666;
}

.ol-textfont {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}

.ol-captionfont {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #f6f6f6;
	font-weight: bold;
}
.ol-captionfont a {
	color: #0B55C4;
	text-decoration: none;
	font-size: 12px;
}

.ol-closefont {}

/* menu links */
a.mainlevel:link, a.mainlevel:visited {
	padding-left: 5px;
}

a.mainlevel:hover {

}

/* spacers */
span.article_separator {
	display: block;
	height: 20px;
}

.article_column {
	padding-right: 5px;
}

.column_separator {
	border-left: 1px dashed #e0e0e0;
	padding-left: 10px;
}

td.buttonheading {

}

.clr {
	clear: both;
}


div#maindivider {
  border-top: 1px solid #ddd;
  margin-bottom: 10px;
  overflow: hidden;
  height: 1px;
}

table.blog span.article_separator {
	display: block;
	height: 20px;
}

/* table of contents */
table.contenttoc {
  margin: 5px;
  border: 1px solid #ccc;
  padding: 5px;
}

table.contenttoc td {
  padding: 0 5px;
}


/* content tables */
td.sectiontableheader {
  background:transparent url(../images/sectiontableheader_bg.gif) top left repeat-x;
  color: #fff;
  font-weight: bold;
  padding: 4px;
  border-right: 1px solid #fff;
}

tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
  padding: 6px;
}

td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
  padding: 3px;
}


tr.sectiontableentry1 {
	background:#f3f3f3;
}
tr.sectiontableentry2 {
	background:#fefefe;
}

/* content styles */
table.contentpaneopen, table.contentpane {
	margin: 0;
	padding: 0;
}

table.contentpaneopen li {
	margin-bottom: 5px;
}

table.contentpaneopen fieldset {
	border: 0;
	border-top: 1px solid #ddd;
}

table.contentpaneopen h3 {
	margin-top: 25px;
}

table.contentpaneopen h4 {
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
}

.highlight {
	background-color: #fffebb;
}


/* module control elements */
table.user1user2 div.moduletable {
	margin-bottom: 0px;
}

div.moduletable {
  margin-bottom: 25px;
}

div.module_menu, div.module {
	margin: 0 0 0 2px;
	padding: 0;
	margin-bottom: 15px;
}


div.module_menu div div div div ,div.module div div div div {
	background: none;
	padding: 0;
}

div.module_menu div, div.module div {
	
}

div.module_menu div div, div.module div div {
	padding:0 0 10px 0;
	
}

div.module_menu div div div, div.module div div div {
	padding: 0px;
	width: auto;	
}

div.module_menu ul li a:link, div.module_menu ul li a:visited,
div.module ul li a:link, div.module ul li a:visited {
	font-weight: normal;
	background:transparent url(../images/blue/bullet2.jpg) top left no-repeat;
	line-height:24px;
	
}

#leftcolumn div.module table ,#rightcolumn div.module table {
	width: auto;
}

#leftcolumn h3, #rightcolumn h3 {
	height:36px;
	color:#fff;
	font-weight: bold;
	font-family: Tahoma, Helvetica,Arial,sans-serif;
	font-size: 12px;
	line-height:26px;
	margin: -2px 0 0 ;
	position:absolude;
	padding:0px 0 2px 22px;
	text-align: left;
	width:198px;
	background:transparent url(../images/h3_bg.gif) top left no-repeat;
}


#leftcolumn .moduletable_menu, #leftcolumn .moduletable, #leftcolumn .moduletable_text, #leftcolumn .c {
	margin:0 0 20px 0;
	padding: 0px;
	text-align:left;
}

#leftcolumn ul.menu, #rightcolumn ul.menu {
	margin:0;
	padding:0px 0 0 10px;
	list-style:none;
	margin: 0px 0;
	width:194px;	
}


#leftcolumn ul.menu li, #rightcolumn ul.menu li {
	margin:0;
	padding:0;
}

#leftcolumn ul.menu li a, #leftcolumn ul.menu li a:link,
#rightcolumn ul.menu li a, #rightcolumn ul.menu li a:link {
	display:block;
	line-height:20px;
	border-bottom:1px dotted #c3b586;
	padding:2px 0px 0 12px;
	height:20px;
	text-decoration:none;
	text-align:left;
	color:#666666;
}

#leftcolumn ul.menu li a:hover, #rightcolumn ul.menu li a:hover {
	color:#0d789c;
}

/* ****** left col current menu ****** */
#leftcolumn ul.menu li#current a, #leftcolumn ul.menu li#current a:link, 
#rightcolumn ul.menu li#current a, #rightcolumn ul.menu li#current a:link {
	display:block;
	line-height:20px;
	border-bottom:1px dotted #0d789c;
	padding:2px 0px 0 12px;
	text-decoration:none;
	color:#0d789c;
}

#leftcolumn ul.menu li#current a:hover, #rightcolumn ul.menu li#current a:hover {
	color:#666666;
}

/* ****** left col sub menu ****** */
#leftcolumn ul.menu li ul, #rightcolumn ul.menu li ul {
	margin:0;
	padding:0 0 0 0px;
	list-style:none;
	
}

#leftcolumn ul.menu li#current ul li a, #leftcolumn ul.menu li#current ul li a:link,
#rightcolumn ul.menu li#current ul li a, #rightcolumn ul.menu li#current ul li a:link {
	background: transparent url(../images/menu_sub_link_bg.gif) left no-repeat;
	text-decoration:none;
	color:#666666;
	padding:2px 25px;
}

#leftcolumn ul.menu li.active ul li#current a, #leftcolumn ul.menu li.active ul li#current a a:link {
	background: transparent url(../images/current_link.jpg) left no-repeat;
	text-decoration:none;
	color:#666666;
	padding:2px 25px;
}

#leftcolumn ul.menu li#current ul li a:hover, #rightcolumn ul.menu li#current ul li a:hover {
	s/menu_sub_link_bg.gif) left no-repeat;
	color:#666666;
}

/* forms */
#leftcolumn .moduletable ul, #rightcolumn .moduletable ul {
	margin:6px 0;
	padding:0;
	list-style:none;
}


#leftcolumn .moduletable ul li, #rightcolumn .moduletable ul li {
	margin:0;
	padding:0 2px;
}

table.adminform textarea {
  width: 540px;
  height: 400px;
  font-size: 1em;
  color: #000099;
}

div.search input {
	width: 69px;
        vertical-align:bottom;
        background-color: #ffffff;
	margin: 15px 0 10px 0;
}

form#form-login fieldset {
	margin:0px 20px 0 20px;
	padding:20px 0 0 0;
	border:none;
	text-align:left;
}
form#form-login ul { 
	text-align:left;
	list-style:none;
	margin:10px 0 0 0;
	padding:0;	
}
form#form-login ul li{ 
	text-align:left;
	margin:0;
	padding:0 0 0 20px;
}

#leftcolumn div.module h3 {
	top:-500px;
	left:-500px;
	padding-left:0;
	position:absolute;
}



/* thumbnails */
div.mosimage         {  margin: 5px; }
div.mosimage_caption {  font-size: .90em; color: #666; }






div.caption       { padding: 0 10px 0 10px; }
div.caption img   { border: 1px solid #CCC; }
div.caption p     { font-size: .90em; color: #666; text-align: center; }












/* Parameter Table */

table.paramlist {
	margin-top: 5px;
}

table.paramlist td.paramlist_key {
	width: 128px;
	text-align: left;
	height: 30px;
}

table.paramlist td.paramlist_value {
}

div.message {
	font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size : 14px;
	color : #c30;
	text-align: center;
	width: auto;
	background-color: #f9f9f9;
	border: solid 1px #d5d5d5;
	margin: 3px 0px 10px;
	padding: 3px 20px;
}

/* Banners module */

/* Default skyscraper style */
.bannergroup {
}

.banneritem {
}

/* Text advert style */

.banneritem_text {
	padding: 4px;
	font-size: 11px;
}

.bannerfooter_text {
	padding: 4px;
	font-size: 11px;
	background-color: #F7F7F7;
	text-align: right;
}

/* System Messages */
/* see system general.css */

.pagination span { padding: 2px; }
.pagination a    { padding: 2px; }

/* Polls */
.pollstableborder td {
	text-align: left;
}

/* Frontend Editing*/
fieldset {
	border: 1px solid #ccc;
	margin-top: 15px;
	padding: 0 15px;
}

legend {
	margin: 0;
	padding: 0 10px;
}

td.key {
	border-bottom:1px solid #eee;
	color: #666;
}

/* Tooltips */
.tool-tip {
	float: left;
	background: #ffc;
	border: 1px solid #D4D5AA;
	padding: 5px;
	max-width: 200px;
}

.tool-title {
	padding: 0;
	margin: 0;
	font-size: 100%;
	font-weight: bold;
	margin-top: -15px;
	padding-top: 15px;
	padding-bottom: 5px;
	background: url(../../system/images/selector-arrow.png) no-repeat;
}

.tool-text {
	font-size: 100%;
	margin: 0;
}

/* System Standard Messages */
#system-message dd.message ul { background: #C3D2E5 url(../../images/notice-info.png) 4px center no-repeat;}

/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B;}

/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;}



/* ****************************************************************************** */
/* blue */
input,button {
	background:transparent;
        vertical-align:bottom;
}

input[type="checkbox"], input[type="radio"]{
   background: transparent;
   border: none;
}

/* -------------------------- */
a.sgfooter:link, a.sgfooter:visited {
	color			: #fff;
	font-family: Arial,sans-serif;
	text-decoration:none;
}
a.sgfooter:hover {
	color: #fff;
	font-family: Arial,sans-serif;
	text-decoration:none;
}
#sgf {
font-size: 11px;
text-align:left;
color: #fff;
padding:4px 0 0 10px ;
font-family: Arial,sans-serif;
width:500px;
float:left;
}
.sgf {
text-align:right;
font-size: 11px;
font-family: Arial,sans-serif;
color: #666;
text-decoration:none;
}
.sgf1 {
font-size: 11px;
font-family: Arial,sans-serif;
color: #666666;
text-align:left;
}

a.sglink:link, a.sglink:visited {
	color			: #666666;
	font-size		: 11px;
	font-family: Arial,sans-serif;
	text-decoration:none;
}
a.sglink:hover {
	color			: #666666;
	font-family: Arial,sans-serif;
	text-decoration:none;
}

I have edited this page down to be bare-bones for ease...

The background image only shows behind the 'branding' div. It used to show all the way down. The problem is somewhere in the style sheet because it looks the same even when I take out all content between the body tags. I am not sure what mistake I made.

When you look at the style sheet you will find html#orchid to be commented out. I realized how to work with that to fix the problem, however I want to know what is causing this problem in the first place, for my further education.

http://www.centerpointpilates.com/welcome2.html code:

Code:

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>CENTERPOINT PILATES :: a Santa Barbara pilates studio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/centerpoint.css" rel="stylesheet" type="text/css" />
</head>
<body background="/images/orchidYellowOverlay2.jpg" style="background-repeat: no-repeat; background-position: top left;">
<div id="branding"> 
  <h1>CenterPoint Pilates - Exercising the Body and Mind</h1>
</div>
<!--end branding-->
<div id="content"> 
  <div id="navigation"> 
    <ul>
      <li><a href="/welcome.html">WELCOME</a></li>
      <li><a href="/studio.html">STUDIO</a></li>
      <li><a href="/getting-started.html">GETTING STARTED</a></li>
      <li><a href="/classes.html">CLASSES</a></li>
      <li><a href="/schedule.html">CLASS SCHEDULE</a></li>
      <li><a href="/workshops.html">WORKSHOPS</a></li>
      <li><a href="/pricing.html">PRICING</a></li>
      <li><a href="/instructors.html">TEACHERS</a></li>
      <li><a href="/contact-us.html">CONTACT US</a></li>
    </ul>
  </div>
  <!--end navigation-->
  <div id="text"> 
    <h2>Welcome</h2>
    <p>CenterPoint Pilates was founded in 2001 with the goal of inspiring each 
      individual on a program of exercising the body and mind. Our certified teachers 
      provide exceptional guidance in private, group, and class settings. The 
      studio is equipped with classic and contemporary exercise apparatus and 
      boasts a stunning view of the Santa Ynez Mountains and downtown Santa Barbara.</p>    
    </div>
  <!--end text-->
</div>
<!--end content-->
</body>
</html>

style sheet code:

Code:

/* Normalizes margins, padding */
body, div, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, blockquote, th, td {
	margin: 0;
	padding: 0; 
}
/* Normalizes font-size for headers */
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}
/* Removes Styles from lists */
ol, ul {
	list-style: none; 
}
/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}
/* Removes list-style from lists */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* Removes border from fieldset and img */
fieldset, img {
	border: 0;
}
/* Left-aligns text in caption and th */
caption, th {
	text-align: left;
}
/* Removes quotation marks form q */
    q:before, q:after {
    content: '';
}
/* normalizes links */
a:link {
   text-decoration: none;
   color: #6b9d98;
}
a:hover {
    color: red;
}
a:visited {
   text-decoration: none;
   color: #0B6E64;
}
/*----------------------------------------------------------------*/
html {
	background-color: #F6EEC2;
	text-align: center;	
}

body {
     font-family: Arial, sans-serif, Geneva, sans-serif;
	 color: #6B9D98;
	 width: 770px;
	 margin: 0 auto;
	 margin-left: 10px;
	 text-align: left;
	 position: relative;
	 
}
bodyBold {	
	
	font-family: Arial, sans-serif, Geneva, sans-serif;
	font-weight: 700;
	 color: #6B9D98;
	 width: 770px;
	 margin: 0 auto;
	 margin-left: 10px;
	 text-align: left;
	 position: absolute;
}
/*html#orchid {
    background-image: url(/images/orchidYellowOverlay2.jpg);
	background-repeat: no-repeat;
	background-position: top left;
}*/
#branding {
     background:  url(images/logo.gif) top left no-repeat;
	 text-indent: -9999px;
	 height: 70px;
	 margin: 0 0 30px 0;
}

div#content {
     position: relative;
	 width: 100%;
}

div#navigation {
     position: absolute;
	 left: 0;	 
	 width: 13%;
	 padding-top: 1em;
	 
}

div#navigation li {
     font-weight: bold;
	 font-size: .9em;
	 border: 1px solid #6B9D98;
	 width: 115px;
	 padding-bottom: 3px;
	 padding-top: 3px;
	 text-align: center;
	 margin: 0 0 20px 0;
}

div#text {
     position: absolute;
	 left: 17%;	
	 width: 80%;
	 border-left: 1px solid #6B9D98;
	 padding-left: 10px;
}

div#site_info{    	 
	 text-align: center;
	 margin-top: 10px;	 
	 font-family: Arial, sans-serif, Geneva, sans-serif;
	 font-size: .9em;
	 font-style: italic;
	 color: #6B9D98;
	 padding-bottom: 3px;	 
}

h2 {
     font-size: 1.35em;
}
indentBox {
     border: 1px solid #6B9D98;
	 width: 115px;
	 padding-bottom: 3px;
	 padding-top: 3px;
	 text-align: left;
	 margin: 0 0 0 0;
}

Hello,
im trying to do some 3column layout with css menu, but in the middle column i have <div class="attachment_pdf"><a href="/xxx/xxx.pdf">XYZ (PDF, 2 MB )</a></div and in this div there is a background image of pdf icon. Everything works in Firefox, Mozzilas but in same cases on IE they are not shown. If i have 10 icons, 3 of them are not shown. After i go with mouseover on the link, i can see them, or if i scroll the window some of them are showing... have somebody met this problem? Or where can be problem? I know, that maybe you have to see the css, and its rather complicated. Thanx.

So I have a design where the background is a large (1400x1100) image that fades into a vertical gradient at the edges.

I've set up the css as follows:

body {
background: #000 url(gradient.jpg) repeat-x;
margin: 0;
}

Here's where I run into my problem...

I've created an empty DIV to hold the large image which will appear on top of the gradient and positioned it absolutely.

<div id="bg_image"></div>

#bg_image {
width: 100%;
height: 1100px;
background: url(images/bg_image.jpg) no-repeat top center;
margin: 0;
position:absolute;
}

This works and the background looks like it should, however because the large image is inside a DIV, any time the browser window is smaller than that div (which will be the case for most users considering the image size) there will be scrollbars.

This makes perfect sense of course I just can't come up with an alternative.

If there was a way to extend a background image beyond the borders of a DIV that would work but overflow:visible; doesn't seem to work with background images only content.

I wish I could set a repeating background AND a static background in the body style, because that is exactly the effect I'm trying to achieve.

Any suggestions would be greatly appreciated!

Thanks,
Josh

Hi there. I'll try to explain this as clearly as I can:

I have a site that needs these requirements
- 3 column elastic layout with footer
- left and right columns are static
- center column is flexible to fill screen

problem i am having is that the left and right columns ONLY need to have a repeating background (because of a required drop shadow in the design) on the y axis. Unfortunately I can't seem to get the left and right columns to assume the height of the content area, which also has to be elastic (so there's no fixed height either).

Basically, the background images either don't show up, or only go as far down as "content" or based on a specific height (which is useless in this layout)

Any suggestions or code samples would greatly appreciated!

Thanks in advance ,
humanv3

For some reason repeating backgrounds won't repeat in Firefox unless I specify a height for the div.

They show up ok in IE.

This will display:

Code:

#contentcontainer {
  background-image: url('images/layout/content_bg.png');
  background-repeat: repeat-y;
  height: 350px;
  width: 785px;
  font-size: 0px;
  margin: 0px;
  padding: 0px;
  background-color: #fff;
}

This won't:

Code:

#contentcontainer {
  background-image: url('images/layout/content_bg.png');
  background-repeat: repeat-y;
  width: 785px;
  font-size: 0px;
  margin: 0px;
  padding: 0px;
  background-color: #fff;
}

I need to find a way around this as my pages are varying lengths.

Any ideas?

Thanks,

Beardy

Please take a look at my site:

http://unoriginalblog.com

I want to fill the space below my navigation sidebar with a repeating image div that would grow with the content. How would I achieve this? At the moment the div works like this:

Code:

<div id="page">

<div id="header">
  header img...
</div>

<div id="content">
  main blog bit.
</div>

<div id="sidebar">
  navigation bar
</div>

<div id="footer">
  footer...
</div>
</div>

and the css: (only the relevent bits...wordpress divides ids/classes by layout/font/etc etc)

Code:

#page {
	margin: 0px auto 0px;
	padding: 0;
	width: 760px;
	}

#header {
	padding: 0;
	margin: 0 auto;
	height: 200px;
	width: 100%;
	}

#content{
	float: left;
	padding: 0 0 20px 45px;
	margin: 0px 0 0;
	width: 490px;
	}

#sidebar{
	margin: 5px 10px 10px 10px;
	padding: 10px 0 10px 10px;
	margin-left: 565px;
	width: 170px;
	}

#footer {
	padding: 0px;
	margin: 0 auto 0px;
/* for some reason, it has to be 761px so that the whole page is aligned in ie.. firefox works both ways, 760 or 761 */
	width: 761px;
	height: 100px;
	clear: both;
	}

perhaps... i can set the bg of the #page as a repeating bg image and the sidebar bg white?... but then how can I make sure that the repeating image blends nicely? is there another way to make it so that I don't have to use bg images in #page?

Thanks for the help

I have a QA site where I want to have a very translucent image displayed over the entire page to help our testers more visually recognize that the site they are on is not production (or worse thinking they are on QA when they are on production). My initial idea was to create a fixed position div with a repeating background images. While this visually accomplished what I want, it ends up masking the entire site, making it impossible to click on any links that are displayed underneath the QA images.

What is the best way to do this (sans javascript)? Any help is much appreciated.

Hi. I would like to repeat a small slice the entire length of a <div> column, however when I try to do so, the final results show just a white column where the image should be. Does anyone know how to fix this? The image is transparent so that you can still see the background behind it.

Here is what I have as a test


my CSS page has

Code:

body {
	margin: 4px 0px;
	padding: 0px;
	background-color: #000000;
}

.header		{
		background-image: url(images/back.gif);
		background-repeat: repeat-x;
		height:197px
		width:100%;
		margin-top :0px;
		}

and my header page that I want to include in all of my pages looks like this for now

Code:

<div class="header">
      <img src="images/logos.gif" width="750" height="197">
</div>

I want the logos.gif image to sit in the upper left and the back.gif image to repeat behind it so it looks seamless. I thought this would be a super easy task but right now, with the above code all I get is the logos.gif and no back.gif image. My path to image is correct.

I even commented out the logos.gif just so I had a blank canvas and nothing.

Thanks for any help on this.

I have a page setup like this....

<table height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td valign="top" class="lt_bar"><img src="template/blue_234/images/lt_shd.jpg" /></td>
<td valign="top"></td>
<td valign="top" class="rt_bar"><img src="template/blue_234/images/rt_shd.jpg" /></td>
</tr>
</table>

and:

.lt_bar {
width: 27px;
background-image: url("images/lt_shd.jpg");
background-repeat: repeat-y;
float: left
}
.rt_bar {
width: 27px;
background-image: url("images/rt_shd.jpg");
background-repeat: repeat-y;
float: right;
}

In IE all is fine, in FireFox the right side shows, the left side does not. any clues...

I am having trouble with placing an image on my page and having that image repeat itself all the way down the page.

Code:

<div id=left> ........ content ...</div>

<div id="image">this is where i want the image</div>

<div id="content">content here</div>

Where the id=image tag is placed i want the image to appear and roll all the way down the screen. I have the following css code

Code:

#left {
	position: absolute;
	left: 0px;
	width: 215px;
	background-color: #efefef;
	border: 1px dotted #ccc;
	}
#image1 {
    background-image: url("http://mydomain.com/image.jpg") 
    background-repeat: repeat-y;
    width: 15px;
    margin-left: 215px;
}
#center {
	
	margin-left: 260px;
             margin-right: 0px;
	overflow: hidden;
	}

The image does not show on the page at all, i need to know if i am doing this correctly or if there is another way without hardcoding the image into the page

Cheers

Hi

I have created a webpage using CSS image pop-outs. The three different images are hosted on imageshack. However, the three text links I have for the three different images only direct to the first image - the other two will load the incorrect image, a copy of the first. Here's the website:

westside dot org/give

Here's the code:

<img src="(url)">
<img src="(url)">


















<style type="text/css">
<!--
.fontz {
font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
}
.a {
font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
}
.a {
font-size: 14px;
}
.a strong {
font-size: 16px;
}
-->
</style>

<span class="a"><strong><font size="5"><br>
<font face="Bookman Old Style, Book Antiqua, Garamond"><a onmouseover="this.style.cursor="pointer" " onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'block' "><span style="text-decoration: underline;">Why We Give</span></a>
</font>
</font></strong><font size="5">
</font></span><font size="5">
<div id="PopUp" style="display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(160,184,169); text-align: justify; font-size: 12px; width: 900px;">
<span class="a"><strong><font face="Bookman Old Style, Book Antiqua, Garamond"><img src="(URL um rules)">
<br>
</font>
</strong>
</span>
<div class="a" style="text-align: right;"><strong><font face="Bookman Old Style, Book Antiqua, Garamond"><a onmouseover="this.style.cursor="pointer" " style="font-size: 12px;" onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'none' "><span style="text-decoration: underline;">Close</span></a></font></strong></div>
</div>
<span class="a"><strong><br>
<br>




<font size="5">
<font face="Bookman Old Style, Book Antiqua, Garamond"><a onmouseover="this.style.cursor="pointer" " onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'block' "><span style="text-decoration: underline;">How to Give</span></a>
</font>
</font></strong><font size="5">
</font></span><font size="5">
<div id="PopUp" style="display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(160,184,169); text-align: justify; font-size: 12px; width: 900px;">
<span class="a"><strong><font face="Bookman Old Style, Book Antiqua, Garamond"><img src="(URL rules)">
<br>
</font>
</strong>
</span>
<div class="a" style="text-align: right;"><font face="Bookman Old Style, Book Antiqua, Garamond"><strong><a onmouseover="this.style.cursor="pointer" " style="font-size: 12px;" onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'none' "><span style="text-decoration: underline;">Close</span></a></strong></font></div>
</div>
<span class="a"><strong><br>
<br>



<font size="5">
<font face="Bookman Old Style, Book Antiqua, Garamond"><a onmouseover="this.style.cursor="pointer" " onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'block' "><span style="text-decoration: underline;">Other Ways to Give</span></a>
</font>
</font></strong><font size="5">
</font></span><font size="5">
<div id="PopUp" style="display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(160,184,169); text-align: justify; font-size: 12px; width: 900px;">
<span class="a"><strong><font face="Bookman Old Style, Book Antiqua, Garamond"><img src="(m rules)">
<br>
</font>
</strong>
</span>
<div class="a" style="text-align: right;"><font face="Bookman Old Style, Book Antiqua, Garamond"><strong><a onmouseover="this.style.cursor="pointer" " style="font-size: 12px;" onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'none' "><span style="text-decoration: underline;">Close</span></a></strong></font></div>
</div>
<span class="a"><strong><br>
</strong></span><br>


















</font></font></font></font><p></p></font></font>




Thanks!

I've got a mostly-css layout he

http://highballsociety.com/~lwco/test.php

Using the following CSS page he

http://highballsociety.com/~lwco/lwc.css

For some reason, the div on the right will not display the off-white background color in IE 6. It looks fine in Firebird and even on IE 5 for Mac. I have a feeling that this has something to do with the fact that I've not done very precise sizing of various divs and haven't really implremented the IE box-model hack for much of the site. Let me know if you can help.

Also, when I force IE to redraw, by moving the page off the screen and back on, or if I hover over the text in the div, it seems to try redrawing the off-white background, but never actually completes.

Thanks,
m__