CSS background url not working in firefox, but works in IE?

Question

I've got a shadow background for my site layout showing up fine in IE, but firefox only shows the shadow (an image) if I use "height:100px;", or if I actually type some text in. I'm using the shadow img with a div for the layout. How can I make this work in firefox?

css:

.bg_shadow {
    margin-left:auto;
    margin-right:auto;
    background:url("../images/bg_shadow.gif") repeat-y scroll left top transparent;
    width:1024px;
    height:100%;
}
body {
    margin:0;
    padding:0;
    border:0;           /* This removes the border around the viewport in old versions of IE */
    width:100%;
    background:#fff;
    min-width:600px;        /* Minimum width of layout - remove line if not required */
                    /* The min-width property does not work in old versions of Internet Explorer */
    font-size:90%;
    text-align:center; /*used in centering the liquid layout in the browser window */
    /*background:#CCCCCC;*/ /*page background color */
}
#wrapper {
   margin:0 auto;
   width:1000px;   /* you can use px, em or % */
   text-align:left;
}
a {
    color:#01128E;
}
a.link:hover {
    color:#FFFFFF;
    background-color:#01128E;
    text-decoration:none;
}
h1, h2, h3 {
    margin:.8em 0 .2em 0;
    padding:0;
}
p {
    margin:.4em 0 .8em 0;
    padding:0;
    line-height:1.35em;
}
img.padme {
    margin:10px 25px;
}
#ads img {
    display:block;
    padding-top:10px;
}

/* Header styles */
#header {
    clear:both;
    float:left;
    width:100%;
    position:relative;
}
#header {
    border-bottom:1px solid #000;
}
#header p,
#header h1,
#header h2 {
    padding:.4em 15px 0 15px;
    margin:0;
}
#header p.login{
    position:absolute;
    top:0;
    right:0;
    text-align:right;
    margin:0;
    padding-top:10px;
}

/* 'widths' sub menu */
#horizontal_border {
    clear:both;
    background:#eee;
    border-top:4px solid #01128E;
    margin:0;
    padding:0px 15px !important;
    text-align:right;
}
/* column container */
.colmask {
    position:relative;  /* This fixes the IE7 overflow hidden bug */
    clear:both;
    float:left;
    width:100%;         /* width of whole page */
    overflow:hidden;        /* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
    float:left;
    width:100%;
    position:relative;
}

.col1,
.col2,
.col3 {
    float:left;
    position:relative;
    padding:0 0 1em 0;
    overflow:hidden;
}

/* 2 Column (right menu) settings */
.rightmenu .colleft {
    right:25%;          /* right column width */
    background:#FAFAFA;     /* left column background colour */
}
.rightmenu .col1 {
    width:71%;          /* left column content width (left column width minus left and right padding) */
    left:27%;           /* (right column width) plus (left column left padding) */
}
.rightmenu .col2 {
    width:21%;          /* right column content width (right column width minus left and right padding) */
    left:31%;           /* (right column width) plus (left column left and right padding) plus (right column left padding) */
}
/* Footer styles */
#footer {
    clear:both;
    float:left;
    width:100%;
    border-top:1px solid #000;
}
#footer p {
    padding:10px;
    margin:0;
}
.slogan{
    font-family:Arial, Helvetica, sans-serif;
    font-size:1em;
    color:#999999;
    position:relative;
    top:-20px;
    left:30px;
}

.header_gradient{
    background:url("../images/header_gradient.gif") repeat-x scroll left top transparent;
}

.background_color{
    background-color:#EEEEEE;
}
#nav_div{
    width:100%;
    height:35px;
    background:url("../images/spacer.gif") repeat left top;
    }

html:

<div class="bg_shadow">
    <div id="wrapper">
        <p>Main Content</p>
    </div>
</div>

Answer 1

Try using min-height: 100px; in your CSS or adding &nsbp; to your empty element in your HTML.

Answer 2

well, got lucky....put in "overflow:hidden" in the bg_shadow class and the shadow showed up exactly how i wanted it to. not sure why, but this worked.

thanks for your replys.

Answer 3

height:100%;

100% of what? If you don't specify a height on the parent <body>, the 100% is meaningless.

The browser can't know the height of the body because it depends on the height of the child element... which is a height you're trying to specify in percentage relative to the height of the body. CSS breaks this circular dependency by saying that percentage heights are ignored and auto is used instead if the containing block doesn't have a specified height.

If this is working for you in IE, you are probably in Quirks Mode. This works because in Quirks Mode, the <body> element is (incorrectly) used to represent the viewport, and so has an inherent specified height of however big the window is. But you don't want to be in Quirks Mode, it's full of incredibly sucky bugs. Use a Standards Mode DOCTYPE and IE will behave more like the other browsers.

Then use .bg_shadow { min-height: 100px; } or whatever the minimum height is to show the shadow if you really don't have any static content inside it. For IE6, you can add a rule like * html .bg_shadow { height: 100px; } to work around the lack of support for min-height without breaking other browsers that would take height: 100px; literally.