Firefox DIV & Float: left Background issue.

background image will not appear

[Lokeypod]

Please help... this is driving me nuts.

If I apply "float: left;" to the right-column div, the background dissappears. what the?

thanks for any help.

THE (relevant) CSS:

#leftcolumn_acc {
display: block;
background-image: url('/_res/i/all/bkgd_ww.jpg');
background-repeat: repeat-x;
width: 758px;
}

#rightcol_acc {
float: left;
padding-left: 20px;
margin-top: 20px;
}

THE CODE:

<div id="leftcolumn_acc">

<!-- START LEFT COLUMN CONTENT -->
<!-- START STACKED ITEMS -->

<div id="ovrvwstack">
<div><img src="_res/i/all/fibx_top.gif" width="530" height="14" border="0" alt="" /></div>

<!-- START FEATURED ITEM AREA -->

<div id="acctop">
<div id="fibx">
<div id="fibximg">
<img src="_res/i/model/srx/2006/fibx_srx_1x.jpg" alt="" />
</div>
<div id="fibxct">
<img src="_res/i/model/srx/2006/fibx_ttl_srx.gif" alt="Featured SRX Item" />
<div class="fitxt">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
<a href="#"><img src="_res/i/all/btn_enlarge.gif" alt="enlarge" /></a>
</div>
</div>

<div id="fitnav">
<a href="#"><img src="/_res/i/nav/fibx_nav_1.gif" oversrc="/_res/i/nav/fibx_nav_1_over.gif" alt="wheels" class="fitnavimg"></a>
<a href="#"><img src="/_res/i/nav/fibx_nav_2.gif" oversrc="/_res/i/nav/fibx_nav_2_over.gif" alt="cargo management" class="fitnavimg"></a>
<a href="#"><img src="/_res/i/nav/fibx_nav_3.gif" oversrc="/_res/i/nav/fibx_nav_3_over.gif" alt="electronics" class="fitnavimg"></a>
<a href="#"><img src="/_res/i/nav/fibx_nav_4.gif" oversrc="/_res/i/nav/fibx_nav_4_over.gif" alt="exterior" class="fitnavimg"></a>
<a href="#"><img src="/_res/i/nav/fibx_nav_5.gif" oversrc="/_res/i/nav/fibx_nav_5_over.gif" alt="interior" class="fitnavimg"></a>
<a href="#"><img src="/_res/i/nav/fibx_nav_6.gif" oversrc="/_res/i/nav/fibx_nav_6_over.gif" alt="performance" class="fitnavimg"></a>
</div>
</div>
<!-- END STACKED ITEMS -->
<!-- END LEFT COLUMN CONTENT -->

<!-- START RIGHT COLUMN CONTENT -->
<div id="rightcol_acc">

<img src="_res/i/all/acc_txt.gif" border="0" alt="" />

<a href="#"><img src="/_res/i/all/btn_gotoacc.gif" oversrc="/_res/i/all/btn_gotoacc_over.gif" alt="Go To GM Accessories" ></a>

<div class="greyline" style="width:150px;"><!-- --></div>

<div><a href="javascript:;" onMouseOut="mm_swapImgRestore()" onMouseOver="mm_swapImage('Image1','','/_res/i/all/carrot_over.gif',1)" class="orng"><img id="Image1" src="/_res/i/all/carrot.gif" border="0" alt="" class="carrot" >Request Accessory Brochure</a></div>

<div><a href="javascript:;" onMouseOut="mm_swapImgRestore()" onMouseOver="mm_swapImage('Image2','','/_res/i/all/carrot_over.gif',1)" class="orng"><img id="Image2" src="/_res/i/all/carrot.gif" border="0" alt="" class="carrot" >Locate a Dealer</a></div>

</div>
<!-- END RIGHT COLUMN CONTENT -->

</div>

[tedster]

Hello lokeypod, and welcome to the forums.

For the code you pasted in, the only background image rule is for #leftcolumn_acc, not for #rightcolumn_acc

Also note, the image paths inside url() do not need quote marks in a css file

[Lokeypod]

Thanks tedster,

I fixed it by placing a width on the nested css, and setting the reapeat-image property on a seperate line from before. Strange. Thanks for your tips!