SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot codescribbler's Avatar
    Join Date
    Nov 2004
    Location
    New York, NY
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry IE6 selectively not rendering background images

    Hey all-

    I'm ripping my hair out over a ghostly bug in IE6. The layout I'm building needs lots of background images, and IE6 seems to randomly not display them. In some cases, it's one of these deals where you refresh the page, the image doesn't show, you refresh it again or resize or scroll down and back up and it magically appears.

    Does anyone know what the source of this problem might be, and how it can be averted? I'm guessing it has to do with IE6 loading background images after processing everything else and basically not getting around to making them show...would a JS preloader help?

    Unfortunately, I am not at liberty to post the code here due to contractual stuff. I can tell you, however, that the exact same code (relating to the images) is randomly rendering or not rendering from page to page and from refresh to refresh.

  2. #2
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I often do is make a replica of whatever I'm working on if I ever have a problem and it's too advanced for myself to solve. It may be due to your container not containing floats because hasLayout was not triggered. You can try this temporary hasLayout trigger that I often use if I ever have problems...

    *{zoom:1;}
    Even if it fixes some things, you will need to remove it and for the elements it fixed (if any), you need to trigger hasLayout on those elements alone. Zoom is not a valid property but its easy to type.. some simple triggers are height:1%, or a width, or 2 rules in which the first you add display:inline-block and then you need a seperate rule for the same selector and re-set it with display:block (it keeps layout though).

    It would really be good if you can describe or make a replica though.

  3. #3
    SitePoint Zealot codescribbler's Avatar
    Join Date
    Nov 2004
    Location
    New York, NY
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure what is helpful...it's XHTML with a no-tables layout. Code validates, so there shouldn't be a broken structure involved.

    There seems to be some connection with applying position: relative, though the rendering bug does not occur on the elements with position: relative applied.

    Background images are all GIF or JPEG, there are no PNGs.

    Widths are explicitly applied to the elements in question, which I think should address the hasLayout issue.

    What other information is useful?

  4. #4
    SitePoint Zealot codescribbler's Avatar
    Join Date
    Nov 2004
    Location
    New York, NY
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow...tentatively speaking, the zoom thing seems to be helping...thanks for the tip, I'll see what else I can figure out.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,354
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Wow...tentatively speaking, the zoom thing seems to be helping..
    Read the faq on "haslayout" as it will explain the issues you are having in detail .

    Now that you know the problem is "haslayout" remove the *{zoom:1.0} and address the element (or elements that are causing the problem). It is not a good idea to apply "haslayout" to all elements as it slows the page rendering down and has other unwanted side effects.

    You are looking for a parent that holds your elements that doesn't have "layout". This will most likely be an element where you have defined its size by using margins alone. If possible give this element a dimension to force "haslayout" and the problem will go away. If you can't use a valid dimension then the height:1% hack can be used but must only be given to IE6 and under only using the star selector hack (* html elementname {height:1%}).

    As you noticed sometimes position:can fix the issues because it invokes a diiferent rendering algorithm but usually the main cause is the lack of "layout".

    Read the faq on "haslayout" and the links contained therein for a full understanding of the single most important issue that affects ie6 (and under).

  6. #6
    SitePoint Evangelist ramone_johnny's Avatar
    Join Date
    Jan 2004
    Location
    Brisbane - Australia
    Posts
    434
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ive seen similiar issues to this that have been a nightmare to rectify. Its one of those.."It either should work or not at all!"

    Occasionally Ive seen the behaviour of the browser become indifferent and have been able to address such issues simply by clearing the cache, history and all temp files. Shutting it down and relaunching.

    I know it sounds weird but Ive seen it happen many a time!

    RJ


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
  •