Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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;
    }

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    You have one too many </div> tags; maybe fixing that will get FF working.

    Correct markup is crucial for cross-browser compatability.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •