SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast asbali's Avatar
    Join Date
    May 2006
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Some elements not displaying backgroung image in IE6&7

    This is odd because two different divs that use the same css declaration for background images are displaying differently

    See my page:
    Nahid Fashions

    As this page loads in IE6&7 you should see several the background images. On the side boxes to the right a gradiant dark grey background image is displayed for most of the side boxes. They all use the follow CSS declaration

    Code:
    .sideBoxContent 
     {background: url(../images/1X170_sidebox.png) repeat;}
    However, the sidebox with the heading "Information" does not display the background image once the page fully loads.

    The problem also affects the left side of the page where the product information is displayed (the gradient grey dark grey is not displayed). The best way to see this is in FireFox where background images displayed properly.

    I'm at a lost as to how to attack this problem because I don't see a logical thread to follow.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is classic "haslayout" behaviour and you should read the faq on this subject as you will run into it time and again until you understand the causes and effects of it.

    You actually have half of the fix in your code but you saw better to comment them out

    Add this:

    Code:
    * html .centerColumn, * html #productAttributes {height: 1%;}
    .centerColumn,#productAttributes {min-height:0}
    Basically when you have an element that contains floats or other complicated content then that element needs to have layout or it doesn't take care of its children very well.

    Read the faq for a thorough understanding of this ie quirk.

  3. #3
    SitePoint Enthusiast asbali's Avatar
    Join Date
    May 2006
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the info and the faq link. I really appreciate your efforts to educate.

    I have emplemented the fix for haslayout. It corrects the problems with divs, backgrounds in tables (and table cells) are still missing.

    I've tried adding the parent div of the table to the CSS code to correct the haslayout, but this has no affect on IE6&7.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,


    You'll have to be more specific as to what the problem is as I don't know what I'm looking for.

    What elements are missing and where will if find then exactly?

    It looks much the same in ie and firefox (apart from the fixed positioning that ie6 doesn't support). However I am not familiar with the page so it may seem obvious to you what's missing but I'll need specific directions

  5. #5
    SitePoint Enthusiast asbali's Avatar
    Join Date
    May 2006
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    tables rows not showing background images

    Scroll down after loading the link below. There are three products listed. You will see the dark grey gradiant background in FF, but IE6&7 does not show.

    These products are listed in tables rows not divs.

    Nahid Fashions: Custom Works

    thanks again for your help.

    sa

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Try applying it to the td and not the TR.

    e.g.
    Code:
    .productListing-odd td, .productListing-even td {
    height:140px;
    margin-bottom: .5em;
    background: url(../images/1X170_sidebox.png) repeat;}

  7. #7
    SitePoint Enthusiast asbali's Avatar
    Join Date
    May 2006
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again for you help.
    Is there a technical reason what this has to be applied to the td and not the tr? Just curious.

    sa

  8. #8
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, the background should be applied to the cell (td) not the table row (tr)
    otherwise compliant browsers won't see it ;-)

    Nadia


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
  •