Not signed in (Sign In)

Vanilla 1.1.10 is a product of Lussumo. More Information: Documentation, Community Support.

General Support: CSS Background image not showing up in Internet Explorer for Windows

Bottom of Page

1 to 10 of 10

  1.  
  1.  
    Hi everyone,
    I used CSS to put a background image behind the thumbails and large images in the gallery....the images work fine on Mac Safari, Firefox, etc---but are failing to appear in Windows Explorer---any help would be much appreciated....they appear fine in Windows Firefox.

    Thanks in advance=

    http://s169531809.onlinehome.us/plogger/index.php?level=album&id=23
    • CommentAuthorddejong
    • CommentTimeSep 2nd 2006
     
    Believe it or not ... the background image is there!

    First, I suggest you read this article on the IE box model:
    http://www.communitymx.com/content/article.cfm?page=2&cid=E0989953B6F20B41

    Second, consider what an image with padding looks like ... exactly like an image without padding. Now, would you expect to see the background through the image?

    Third, decide what you're going to do. The simplest way out is to force the image larger with width & height in CSS for IE:

    * html .photo-large {
    width: 525px;
    height: 377px;
    }

    The better way would be to put the background on an additional div around the image, then put a margin around the image. Margins (in most cases) are rendered commonly by all browsers, and will provide the "frame" you're looking for. However, the former solution might work better in this case because you want the image to stretch but have the frame stay a constant size.

    Cheers,
    Derek
  3.  
    Derek,
    Thanks for your help in advance. I read the article you suggested and added the code into the CSS you specified. However, nothing has changed....I do see the background image when I refresh the IE browser, but once the image renders, it hides the background image. Also, the bkgd image is not placed directly, and increasing the padding and margin doesn't seem to help.

    Here's the code from CSS:
    .photos-large { background-image: url(../../css/css-frame.jpg); background-repeat: no-repeat; background-position: 0 6px; width: 362px; height: 320px; padding: 40px 100px; margin: 4px; }

    * html .photos-large { background-image: url(../../css/css-frame.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: -50px 6px; margin: 4px; padding: 100px 40px; width: 362px; height: 320px; }
    #picture-holder a:hover img{ background-image: url(../../css/css-main_frame.jpg); background-repeat: no-repeat; background-position: 0 6px; width: 362px; height: 320px !important; border-width: 0; margin: 3px; }


    http://s169531809.onlinehome.us/plogger/index.php?level=picture&id=317


    Not sure what the heck to do from this point...

    Thanks again for your fine help.
    Brandon
    • CommentAuthorddejong
    • CommentTimeSep 7th 2006
     
    Yeah, my code worked in IE's DOM Inspector, but not real-world CSS.

    Implemented my second suggestion, have a look at your site. I think small thumbs are still broken, but the large thumb seems to be working fine.

    Regards,
    Derek
  5.  
    Derek, You are the bomb. Thanks. So, what should I do about the thumbnails? Still not clear on how you made the large images work----thank you so much.

    Now the frames aren't lining up in other browsers----see next note. Thanks in advance for your fine work!
  6.  
    Derek,
    I haven't had a chance to take a look at your CSS implementation, but there are now some new incompatibilities:

    MAC OS:
    Safari---frames not lined up
    IE 5.2---frames not lined up
    Firefox---WORKING

    WINDOWS:
    IE: WORKING!
    FIREFOX: WORKING!

    Thanks and sorry for the continual problems...
    Brandon
    • CommentAuthorddejong
    • CommentTimeSep 9th 2006
     
    Don't believe the hype:


    Whoever told you it doesn't work with Safari wasn't being entirely truthful. Here's the most recent (I believe) version of Safari on OS 10.4.7.

    As for IE5.2/Mac, Microsoft discontinued its download availability last year, and stopped offering support for it shortly thereafter. As any frequenter of this forum knows, I think it's beyond time to stop supporting this browser. Continue to support it and folks will continue to use it.

    Cheers,
    Derek
  8.  
    Derek,
    Thanks...was a caching problem on my end. Now, last thing----how can I implement your stellar work on the bookmarks now? Then I'm finished---promise. Thanks in advance.
    Brandon
    • CommentAuthorddejong
    • CommentTimeSep 11th 2006
     
    "how can I implement your stellar work on the bookmarks now?"

    If you can rephrase the question so that I understand it, I wager we can work something out.

    Regards,
    Derek
  10.  
    Derek,
    Sorry...I mean "how can I implement your stellar work on the thumbnails now?"

1 to 10 of 10

  1.