CSS - Firefox 'wrapper' Background Not Showing

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

Hi,

my css is probably a mess as I've been hacking things together for a few days.

my site:jasondaydesign.com

I have a div where my content divs are contained.
In firefox & chrome, the background for the div shows fine. In IE, the background does not show.

I'm not sure where the css issue is that's causing this.

Could someone point me in the right direction for solving this?

Thanks!

Hi:

I have the following in my CSS file:
PHP Code:
#body {
    background: url('images/columns.gif') repeat-y;
    text-align: left;
} 





The problem is that the background image is not showing up un MS Internet Explorer. It works fine in Firefox. Is this a bug? Do I need a hack?

Hey guys, I've recently started working on my css and for some reason my background image isn't showing up in my container. Any idea why?

CSS Code:
Original - CSS Code /* CSS Document */ * { margin: 0; padding: 0; } body { font-size: 62.5%; background: #344149; } p, li { font: 1.2em/1.8em Tahoma, sans-serif; margin-bottom: 10px; } h1 { font: 2.0em Tahoma, sans-serif; color: white; height: 0px; } h2 { font: 1.8em Tahoma, sans-serif; color: green; margin-bottom: 10px; } ul { margin-left: 25px; } img { border: none; } #page-wrap { background: black; min-width: 780px; max-width: 1260px; margin: 10px auto; width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 1262? "1260px" : "auto"); } #page-wrap #inside { margin: 10px 10px 0px 10px 10px; padding-top: 10px; padding-bottom: 10px; } #main-content { background: transparent url(/Images/Background_Content.jpg) no-repeat top right; padding-left: 180px; padding-right: 180px; padding-top: 20px; } #header { background: #000000; text-align: center; } #left-sidebar { background: transparent url(/Images/Background_Content.jpg) no-repeat top right; width: 150px; float: left; padding-left: 15px; padding-top: 20px; } #right-sidebar { background: transparent url(/Images/Background_Content.jpg) no-repeat top right; width: 150px; float: right; padding-right: 15px; padding-top: 20px; } #footer { background: #267f23; text-align: center; padding-top: 20px; padding-bottom: 20px; color: white; }

  

 /* CSS Document */


 * {


     margin: 0;


     padding: 0;


 }


  


 body {


     font-size: 62.5%;


     background: #344149;


 }


  


 p, li {


     font: 1.2em/1.8em Tahoma, sans-serif;


     margin-bottom: 10px;


 }


  


 h1 {


     font: 2.0em Tahoma, sans-serif;


     color: white;


     height: 0px;


 }


  


 h2 {


     font: 1.8em Tahoma, sans-serif;


     color: green;


     margin-bottom: 10px;


 }


  


 ul {


     margin-left: 25px;


 }


  


 img {


     border: none;


 }


  


 #page-wrap {


     background: black;


     min-width: 780px;


     max-width: 1260px;


     margin: 10px auto;


     width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 1262? "1260px" : "auto");


     }


     #page-wrap #inside {


         margin: 10px 10px 0px 10px 10px;


         padding-top: 10px;


         padding-bottom: 10px;


     }


     


 #main-content {


     background: transparent url(/Images/Background_Content.jpg) no-repeat top right;


     padding-left: 180px;


     padding-right: 180px;


     padding-top: 20px;


 }


     


 #header {


     background: #000000;


     text-align: center;


 }


     


 #left-sidebar {


     background: transparent url(/Images/Background_Content.jpg) no-repeat top right;


     width: 150px;


     float: left;


     padding-left: 15px;


     padding-top: 20px;


 }


  


 #right-sidebar {


     background: transparent url(/Images/Background_Content.jpg) no-repeat top right;


     width: 150px;


     float: right;


     padding-right: 15px;


     padding-top: 20px;


 }


  


 #footer {


     background: #267f23;


     text-align: center;


     padding-top: 20px;


     padding-bottom: 20px;


     color: white;


 } 

It's the Background_Content.jpg that isn't loading for some reason. It resides in the Image folder located in the same directory as the html file.

Oh and the reason I had it included so much was to test to see if it was just the main-content that wouldn't load it.

The main content should include the left-sidebar and right-sidebar right?

Please help!

Hi everyone,

I have a design I am working on a design, which has a image for a background, well the image does not show, I am not sure why, it just shows white text. Anyway here is my code.
Code:

#logo{
	background-image: url('logo.png');
	background-repeat: no-repeat;
}
#logo .text{
	letter-spacing: -0.1em;
	font-weight: bold;
	font-size: 21px;
	text-align: left;
	color: #FFFFFF;
}

That does not work, however, this does.
Code:

<img src="logo.png" alt="Logo" />

Any suggestions?

The only way i can get my backgroud image to show is to explicitly state my body elements within each document. If I put them in css file and refer each page to that css file, my background image does not work, but all the other elements in that css file do. Why?

JOhn

Hi, I have some simple CSS for a div tag, inwhich there should be a tiling background image. Here is the CSS code:
Code:

#mainContent{
z-index:5;
	padding:0;
	margin: 2px; 
       background-image: url(images/common/bodybg.gif);
	background-repeat:repeat-y;
	height:100%;
	}

Then I have my div tag: <div id="mainContent">
which holds 2 other divs, both without backgrounds.
Yet my tiling background doesn't show. Is there anything wrong with my code? I have checked the image path etc, but can't figure it out.

Here is the site: http://www.caillouette.com/SouthernLiving/

thanks

Hello,

I have been trying to figure this out, but have been unsuccessful. I am using a modalPopupExtender, but when the popup comes up, my background is still active. I suspect it has to be something in my css file, but would appreciate some help on this. I suspect it is the css that is causing this, but cannot figure out what. TIA!

Here is the code for the MPE:

<cc1:ModalPopupExtender ID="MPE1" runat="server"
TargetControlID="btnShowModalPop"
PopupControlID="divPop"
BackgroundCssClass="modalBackground"
PopupDragHandleControlID="panelDragHandle"
DropShadow="true"/>


Here is the code in my css file:

.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}

.modalPop {
background-color:Gray;
border-width:3px;
border-style:solid;
border-color:Black;
padding:0;
width:250px;
color:White;



}

.drag
{
background-color:#ff0000;
cursor: move;
border: solid 2px white;



}










I found the issue by referencing a blank css file and slowly adding statements in. It was a combination of the following which prevented the backgroundcssclass to not be shown propertly:

#body div div { background: url(images/body_tr.gif) top right no-repeat; }

#body div div div { background: url(images/body_bl.gif) bottom left no-repeat; }
#body div div div div{ background: url(images/body_br.gif) bottom right no-repeat; }


#body div div div { background: url(images/body_bg.gif) bottom left no-repeat; }
#body div div div div { background: url(images/body_bg.gif) bottom right no-repeat; }


#body .inner div { background: none; }

I ended up add these bg imgs in my master page div tags directly and is working fine.....for now :P
Edit/Delete Message

This puzzles me for this is the first time EVER that it is not working. I have "background-image" coding and NONE of those images are even showing up, yet when i add them on the index file as a normal image all is well...

Any ideas?

Hi all,

I've got a jpg background image using CSS and it's not displaying in Opera, but it is in absolutely every other browser back to IE 5.0.

If I change the image to a gif, it displays fine. Is there any reason why the jpg wouldn't display in Opera?

Hi all,

I haven't been working with CSS that long and I've searched for a fix but couldn't get anything to work. I can't get a background color to display in Firefox but it does in IE. Inside my "mainwrap" I have two columns and for some reason when I set my background to white for the "mainwrap" it just doesn't show up in Firefox.

Here's xhtml code:
xhtml Code:
Original - xhtml Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="toparea"> <div id="header"></div> <!--end header--> <div id="menuarea"> <div id="menubox"> </div> <!--end menubox--> </div> <!-- end menuarea--> </div> <!--end toparea--> <div id="middlearea"> <div id="mainwrap"> <div id="topwrap"></div> <!--end topwrap--> <div id="leftcolumn"> <div id="content"></div> <!--end content--> <div id="recentwork"></div> <!--end webwork--> </div><!--end leftcolumn--> <div id="rightcolumn"></div> <!--end rightcolumn--> <div id="bottomwrap"></div> <!--end bottomwrap--> </div> <!--end mainwrap--> </div> <!--end middlearea--> <div id="bottomarea"></div> <!--end bottomarea--> </body> </html>

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="toparea">

<div id="header"></div> <!--end header-->

<div id="menuarea">
<div id="menubox">
</div> <!--end menubox-->
</div> <!-- end menuarea-->

</div> <!--end toparea-->

<div id="middlearea">

<div id="mainwrap">

<div id="topwrap"></div> <!--end topwrap-->

<div id="leftcolumn">

<div id="content"></div> <!--end content-->

<div id="recentwork"></div> <!--end webwork-->

</div><!--end leftcolumn-->

<div id="rightcolumn"></div> <!--end rightcolumn-->

<div id="bottomwrap"></div> <!--end bottomwrap-->

</div> <!--end mainwrap-->
</div> <!--end middlearea-->

<div id="bottomarea"></div> <!--end bottomarea-->

</body>
</html>

Heres the CSS:

css Code:
Original - css Code /* CSS Document */ body { background-image: url(../images/bottombg.jpg); background-repeat: repeat; font-family: Tahoma, sans-serif; margin: 0; } /* Begin top area */ div#toparea { width: 100%; height: 128px; background-image: url(../images/topareabg.jpg); background-position: top; background-repeat: repeat-x; float: left; } div#header { width: 800px; height: 100px; background-image: url(../images/headerbg.jpg); margin-left: auto; margin-right: auto; } div#logo { float: left; margin-top: 25px; margin-left: 5px; } div#tagline { margin-top: 37px; margin-left: 5px; float: left; } div#menuarea { width: 800px; height: 25px; margin-left: auto; margin-right: auto; } div#menubox { float: right; } .buttonbox { float: left; } .buttonbox img { border: none; } /* Begin middle area */ div#middlearea { width: 100%; background-image: url(../images/middleareabg.jpg); background-repeat: repeat; float: left; } div#mainwrap { width: 800px; margin-left: auto; margin-right: auto; background-color: #FFFFFF; } div#topwrap { width: 800px; height: 20px; background-image: url(../images/topNavbg.jpg); float: left; } div#leftcolumn { width: 550px; background-color: #FFF; float: left; } div#content { width: 500px; margin-left: 10px; margin-top: 10px; } div#content p { font-family: Tahoma, Arial, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 15px; } div#recentwork { width: 540px; height: 250px; background-color: #666666; margin-left: 10px; } div#rightcolumn { width: 250px; background-color: #FFF; float: left; } div#bottomwrap { width: 800px; height: 25px; background-image: url(../images/bottombgNav.jpg); float: left; } /* Begin bottom area */ div#bottomarea { width: 100%; height: 200px; background-image: url(../images/bottombg.jpg); background-repeat: repeat; float: left; } /* Text styles */ h1 { font: 100 normal 22px/normal Tahoma, Arial, sans-serif; text-transform: none; color: #999999; } .tagline { font-family: Tahoma, Arial, sans-serif; font-size: 12px; color: #999; }

  

 /* CSS Document */


 body {


     background-image: url(../images/bottombg.jpg);


     background-repeat: repeat;


     font-family: Tahoma, sans-serif;


     margin: 0;


 }


  


 /* Begin top area */


  


 div#toparea {


     width: 100%;


     height: 128px;


     background-image: url(../images/topareabg.jpg);


     background-position: top;


     background-repeat: repeat-x;


     float: left;


 }


  


 div#header {


     width: 800px;


     height: 100px;


     background-image: url(../images/headerbg.jpg);


     margin-left: auto;


     margin-right: auto;


 }


  


 div#logo {


     float: left;


     margin-top: 25px;


     margin-left: 5px;


 }


  


 div#tagline {


     margin-top: 37px;


     margin-left: 5px;


     float: left;


 }


  


 div#menuarea {


     width: 800px;


     height: 25px;


     margin-left: auto;


     margin-right: auto;


 }


  


 div#menubox {


     float: right;


 }


  


 .buttonbox {


     float: left;


 }


  


 .buttonbox img {


     border: none;


 }


  


 /* Begin middle area */


  


 div#middlearea {


     width: 100%;


     background-image: url(../images/middleareabg.jpg);


     background-repeat: repeat;


     float: left;


 }


  


 div#mainwrap {


     width: 800px;  


     margin-left: auto;


     margin-right: auto;


     background-color: #FFFFFF;


 }


  


 div#topwrap {


     width: 800px;


     height: 20px;


     background-image: url(../images/topNavbg.jpg);


     float: left;


 }


  


 div#leftcolumn {


     width: 550px;


     background-color: #FFF;


     float: left;


 }


  


 div#content {


     width: 500px;


     margin-left: 10px;


     margin-top: 10px;


 }


  


 div#content p {


     font-family: Tahoma, Arial, sans-serif;


     font-size: 13px;


     line-height: 20px;


     margin-bottom: 15px;


 }


  


 div#recentwork {


     width: 540px;


     height: 250px;


     background-color: #666666;


     margin-left: 10px;


 }


  


 div#rightcolumn {


     width: 250px;


     background-color: #FFF;


     float: left;


 }


  


 div#bottomwrap {


     width: 800px;


     height: 25px;


     background-image: url(../images/bottombgNav.jpg);


     float: left;


 }


  


 /* Begin bottom area */


  


 div#bottomarea {


     width: 100%;


     height: 200px;


     background-image: url(../images/bottombg.jpg);


     background-repeat: repeat;


     float: left;


 }


  


 /* Text styles */


  


 h1 {


     font: 100 normal 22px/normal Tahoma, Arial, sans-serif;


     text-transform: none;


     color: #999999;


 }


  


 .tagline {


     font-family: Tahoma, Arial, sans-serif;


     font-size: 12px;


     color: #999;


 } 

Thanks for your time!

My page works great in firefox, but in IE the top navigation div (top_navigation) SHOULD have a background color of red for testing perposes, but the color doesn't change! It looks like its inheriting the background color #e4dfd7 from the css body tag.

I've tried using an inline style, or using !important, nothing works, and I have to make this available in at least IE6 and up.

Thanks in advance for any help!

html code -> cosmosristorante dot com / ox / index.asp

I have been trying to implement a shadowed effect on a layout I'm working on. Kind of like on this page . I tried it with 3 nested divs and will show you guys both sets of code. With both methods, the top level div is not showing (the one with top.jpg as a background) because it appears that the middle.jpg is covering it.

Here is the code I have:

Method 1:
HTML
Code:

 <div id="wrapper">
      <?php mosMainBody(); ?>
  </div>

CSS
Code:

#wrapper {
  width:  805px;
  height: 100%;
  margin: auto;
  background: url(../images/middle.jpg) right repeat-y;
}

#wrapper::before {
  display: block;
  line-height: 0;
  background: url(../images/top.jpg) no-repeat top right;
}

#wrapper::after {
  display: block;
  line-height: 0;
  background: url(../images/bottom.jpg) no-repeat bottom right;
}

Method 2 Nested Divs:
HTML
Code:

<div id="wrap1"><div id="wrap2"><div id="wrap3">
      <?php mosMainBody(); ?>
</div></div></div>

CSS
Code:

#wrap1 {
  background: url(../images/top.jpg) no-repeat top ;
  width: 805px;
  margin: auto;
  clear: both;
}

#wrap2 {
  background: url(../images/middle.jpg) repeat-y;
  width: 805px;
  margin: auto;
}

#wrap3 {
  background: url(../images/bottom.jpg) no-repeat bottom;
  width: 805px;
  margin: auto;
}

The page I'm working on is located at http://www.havenotband.com/index.php