CSS: Div background working in IE but not Firefox. What to do?

ooohyeah · 12-04-2006, 02:45 AM

I have a bunch of div tags which makes borders (rounded corners) and the background of the entire box is also an image. In IE it turns out perfectly, but in firefox it looks like the other images block out the background, and only a part of it shows (on the top). The GIF's are transparent, but I think maybe firefox gets confused.

Can anyone help? Thank you in advance:

Code:

         <div class="nav_main">
			<div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr">
				Menu1 Menu2 Menu3
			</div></div></div></div></div></div></div></div>
		</div>
	</div>

css:

Code:

.bl {background: transparent url(../img/corner_bl.gif) 0 100% no-repeat}
.br {background: transparent url(../img/corner_br.gif) 100% 100% no-repeat}
.tl {background: transparent url(../img/corner_tl.gif) 0 0 no-repeat}
.tr {background: transparent url(../img/corner_tr.gif) 100% 0 no-repeat; padding:10px}
.t {background: transparent url(../img/border_top.gif) repeat top; height: 100%;}
.b {background: transparent url(../img/border_bottom.gif) repeat bottom;}
.l {background: transparent url(../img/border_left.gif) repeat top left;}
.r {background: transparent url(../img/border_right.gif) repeat top right;}
div .nav_main {
	position: relative;
	float: left;
	clear: both;
	display: inline;
	background: url(../img/nav_background.jpg) repeat top left;
	width: 100%;
	height: 14px;
}

Fumigator · 12-04-2006, 05:45 AM

You have one too many </div> tags; maybe fixing that will get FF working.

Correct markup is crucial for cross-browser compatability.