Nested DIV Background Question

[chadvirus]

I have a nested DIV pair -- both DIVs are the same size and the outer DIV has a tiled background, while the inner DIV has a background image which is not tiled and stays in the lower right corner. That way, no matter what the size of the contents of the inner DIV is, the background image always aligns to the bottom right corner and the outer DIV tiles to the appropriate size.

However, the combination only seems to work on IE6 on PC...on Safari, IE5 and Firefox on a Mac the background image of the inner DIV disappears.

I've posted screenshots of both to show you what I mean.
PC - http://www.chadtempest.com/ie6.jpg

Mac - http://www.chadtempest.com/saf.jpg

and the code - http://www.chadtempest.com/css.txt

Anyone know how to fix this or have a better solution?

Thanks in advance for any help.

[SComm]

Try z-index.

Give your inner div a z-index of 100 to bring it to the front.

#side {
width: 735px;
background-image: url(images/side.jpg);
background-repeat: no-repeat;
background-position: right bottom;
z-index: 100; }

[chadvirus]

tried it...no luck, however I did notice that when I away the third level of nesting, it seemed to reappear.

in essence, instead of:

<div id="with_tiled_bg">
<div id="with_norepeat_bg">
<div id="content">
<p>content</p>
</div>
</div>
</div>

it's now:

<div id="with_tiled_bg">
<div id="with_norepeat_bg">
<p>content</p>
</div>
</div>

can you only nest DIVs with background images once in Safari, Firefox and IE Mac before they start disappering?

[SComm]

I know that you can nest divs more than once and still view the background... but I'm not sure what the problem is...

<div id="with_tiled_bg">
<div id="with_norepeat_bg">
<p>content</p>
</div>
</div>

I don't see those lines of code in the link you posted?

[chadvirus]

I don't see those lines of code in the link you posted?

Sorry, didn't mean to confuse the issue...I was just trying to shorten up the code and make it generic to give an example. Here's the actual code:

<div id="main">

<div id="side">

<div id="thumbs">
<h1>custom</h1>
  <?php do { ?><?php
  echo "<a href='photodetail.php?id=" . $row_custom['custom_id'] . "&cat=cust'> <img src='images/photos/thumbs/". $row_custom['thumbnail'] . "' /></a>" ; ?>
  <?php } while ($row_custom = mysql_fetch_assoc($custom)); ?>
</div>

</div>

</div>

and when I take out the second nested DIV "thumbs" it seems to work:

<div id="main">

<div id="side">

<h1>custom</h1>
  <?php do { ?><?php
  echo "<a href='photodetail.php?id=" . $row_custom['custom_id'] . "&cat=cust'> <img src='images/photos/thumbs/". $row_custom['thumbnail'] . "' /></a>" ; ?>
  <?php } while ($row_custom = mysql_fetch_assoc($custom)); ?>
</div>

</div>

Might it be because thumbs is only 550 px wide and the two DIVs above it ("main" and "side") are 735px wide?