Click to See Complete Forum and Search --> : background color not showing in firefox


MaryEllen
07-05-2006, 04:12 PM
First, I have to say thanks to EVERYONE who posts/answers here because I got through most of my questions by reading everyone elses problems.

I have one last issue that I am not able to resolve: the background color for my nav block is not showing in firefox, though it shows fine in IE. I set both the background of my nav block, and the background of the block wrapper to red thinking that even if the nav is shorter than the content (which is the ususal) the wrapper bg will "fill in" the blank, but it is not. Can someone help??

Here is the top part of my style sheet referring to the layout/spacing/etc.

/*STYLES FOR PAGE LAYOUT */


BODY {
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: normal
color: #000000;
background-color: #CCCCCC;
font-size: 10pt;
padding-top: 5px;
text-align: center;
}

/* THIS SETS THE VIEW BACKGROUND TO 800 PX AND RED */

#wrapper {
width: 800px;
margin-left: auto;
margin-right: auto;
height: auto;
background-color: #cc3300;
overflow: visible;

}

/* TOP IMAGE */

#top {
width: 800px;
height: 150px;
margin-left: 0;
margin-right:0;
position:relative;
overflow: hidden;
visibility: visible;

}

/* SETS THE BLOCK THAT WILL CONTAIN THE PAGE CONTENT */

#content {
background-color: #FFFFFF;
width: 638px;
float: right;
top: 0px;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
border-style: solid;
border-color: #CC3300 #CC3300 #cc3300 #cc3300;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
z-index: 1;
}

#padding {
background-color: #FFFFFF;
padding-left: 10px;
padding-right: 5px;
}

/* NAVIGATION BLOCK */
#nav {
margin: 0px;
width: 160px;
float: left;
z-index: 2;
background-color: #cc3300;
height: auto;
text-align: left;
}


here is my "working" page: http://www.naceweb.org/natmtg/default-layers.htm

I'd appreciate any help/suggestions. I'm quite a novice and getting this right will be a nice feather in my cap right before evaluations :D

KDLA
07-05-2006, 04:29 PM
You should use background image the color and width of the column, and apply it to your wrapper. The nav div will only be as high as the content within it, which according to your table setting is 175px. IE likes to stretch things, but Fx takes coding literally.

KDLA