SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    boston
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Nested DIV Background Question

    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.

  2. #2
    SitePoint Enthusiast SComm's Avatar
    Join Date
    Mar 2004
    Location
    Texas
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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; }

  3. #3
    SitePoint Member
    Join Date
    Sep 2004
    Location
    boston
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <div id="with_tiled_bg">
    <div id="with_norepeat_bg">
    <div id="content">
    <p>content</p>
    </div>
    </div>
    </div>
    it's now:
    Code:
    <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?

  4. #4
    SitePoint Enthusiast SComm's Avatar
    Join Date
    Mar 2004
    Location
    Texas
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know that you can nest divs more than once and still view the background... but I'm not sure what the problem is...

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

  5. #5
    SitePoint Member
    Join Date
    Sep 2004
    Location
    boston
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SComm
    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:

    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:

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


Bookmarks

Posting Permissions

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