Background Css Not Showing On Ff

[jc624]

Can anyone tell me what I can do to fix this in FF?http://www.e-mailprecisely.comIt looks fine but when you go to any article the bg in the main page is missing (looks good in IE):

<div style="background-image: url('http://e-dialog.typepad.com/images/left_copybigc.png'); width: 846px; height: 100%;">

The funny thing is that if I right-click on where the big content image bg is suppose to be in FF, and I go to "view background image" I can actually see the missing bg image!I think maybe it's not detecting height: 100%........here is the css:

/*   Global declarations  */html, body {height: 100%;margin: auto;background-color: #f5f5f5;padding:0;font:12px/12px  Arial, Helvetica, sans-serif;color:#000000;background:url(http://e-dialog.typepad.com/images/bg.png) repeat-x top center;}body, p, div, h1, h2, img {	margin: 0px;	padding: 0px;}a {	border: none;	color:#105cfd;}img {	border: none;}h1 {	font:21px/21px  Arial, Helvetica, sans-serif;	padding: 0;	margin: 0;	}h2 {	font-size:10px;	}h3 {	float: right;	margin: 0 20px 3px 0;	padding: 4px 0px 0 6px;}h4 {	float: left;	margin: 0 6px 0px 0;}h5 {	  float: left;	  font-size: 18px;}/*  Hero  *//* Container */#header_wrap {	background-image:url(http://e-dialog.typepad.com/images/header.png);	background-repeat: no-repeat;	background-position: top center;}#main {	margin: auto;	width: 846px;	height: 900px;}#mainb {	margin: auto;	width: 846px;	height: 100%;}#leftside {	background: url(http://e-dialog.typepad.com/images/left_copy.png) no-repeat;	width: 510px;}#leftsideb {	background-image: url(http://e-dialog.typepad.com/images/left_copyb.png);	width: 510px;}#leftsideblog {	width: 510px;}#header {	width: 846px;	padding-top: 168px;}#headerb {	width: 846px;	padding-top: 168px;}

Any thoughts? Thanks.

[Ingolme]

100% is a relative term. If it's measuring 100% relative to something with zero height, it will be zero itself.If the parent element has no height defined, using % in the height property will always yield zero.

[jc624]

100% is a relative term. If it's measuring 100% relative to something with zero height, it will be zero itself.If the parent element has no height defined, using % in the height property will always yield zero.

Right but what would be the solution? Since I don't want to specify the height?

[Ingolme]

Right but what would be the solution? Since I don't want to specify the height?

What are you trying to obtain by writing 100%?A block element will expand its height automatically to fit the content within it.

[jc624]

What are you trying to obtain by writing 100%?A block element will expand its height automatically to fit the content within it.

Regardless I took it off ..still does it. That was just to see if that help with the image to show up but nothing.

[Ingolme]

Hmm, can you link to a test page? A background image should appear as long as the element is in view and has a size.

[jc624]

Test page...um?Well someone says it FF ksize to big for FF:http://e-dialog.typepad.com/images/left_copybigc.pngwhich I find it straight bologna....I mean I can see it in IE I thought of z-index, putting quotes, the reason I did this huge thing is because of the size varies with topics....I might have to go back to the drawing board.Thx for the input keep em coming

[Ingolme]

Does the <div> element have any content within it?Put a few lines of text in it and see if it shows anything.

[jc624]

Does the <div> element have any content within it?Put a few lines of text in it and see if it shows anything.

WooW smart thinking!I did that on a test page:http://e-dialog.typepad.com/test/And I can see the bg now! Damn you height!Another weird thing is when I break it the other copy expands to the right...

tdrfghrstyhrteyhtrw <br />dfgdgdfgdfg

very odd..

[jc624]

Anyone has any other input? I think this might have to go back to square one to eliminate those damn borders and make my life easier and just to have a background color