...

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



ooohyeah
12-04-2006, 03: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:



<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:



.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, 06:45 AM
You have one too many </div> tags; maybe fixing that will get FF working.

Correct markup is crucial for cross-browser compatability.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum