PDA

View Full Version : Wrapper and Background Image repeating trouble


mrhaydel
08-04-2008, 12:53 AM
I'm trying to get a background image/color to repeat down the left hand column of a site, here: 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 here:

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:

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;
}

ninnypants
08-04-2008, 04:31 AM
I checked it and the tan color goes down all the way, but I did find this error

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