Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

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

    • CommentAuthorhuffmani
    • CommentTimeMar 3rd 2008
     permalink
    why aren't the images loading in ie?

    I just can't see the error.

    #container {
    margin: 0px auto;
    text-align: left;
    width: 1000px;
    }
    #content_header, {
    width: 1000px; padding: 0px; margin: 0px;
    }
    #content_header {
    background: url(bimages/background_t.jpg) no-repeat;
    height: 6px;
    }
    #content {
    background:url(bimages/background.jpg);
    background-repeat: repeat-y;
    }
    #inside {
    padding: 0px 36px;
    }
    #content_footer {
    clear:both;
    background: url(bimages/background_b.jpg) no-repeat;
    height: 6px;
    }
    #logo {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://gorge.iahuffman.com/css/bimages/logo.png', sizingMethod='crop');}
    #logo[id] {
    background: url(bimages/logo.png) no-repeat;
    height: 130px;
    width: 1000px;
    }
    #926 {
    display:inline;
    width: 926px;}
    #right {
    float: right;
    width:723px;
    padding: 0px 0px 0px 0px;
    display:inline;}

    #left {
    float:left;
    width:200px;
    padding: 0px 0px 0px 0px;
    display:inline;
    }

    /***************************Site Wide Boxes***************************/
    /*filter: progid:DXImageTransform.Microsoft.AlphaImageLoader = ie 5 fix for .png*/

    /* Blue Width 723*/
    #blue723_t {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://gorge.iahuffman.com/css/bimages/blue723_t.png', sizingMethod='crop');}
    #blue723_t[id] {

    background: url(bimages/blue723_t.png) no-repeat;
    height: 11px;
    }
    #blue723_bod {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://gorge.iahuffman.com/css/bimages/blue723_bod.png', sizingMethod='crop');}
    #blue723_bod[id] {
    background: url(bimages/blue723_bod.png);
    background-repeat: repeat-y;
    width: 723px;
    }
    #blue723_b {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://gorge.iahuffman.com/css/bimages/blue723_b.png', sizingMethod='crop');}
    #blue723_b[id] {
    background: url(bimages/blue723_b.png) no-repeat;
    height: 11px;
    }
    #blue723_bod p {
    padding: 0px 8px;
    }
    • CommentAuthorhuffmani
    • CommentTimeMar 3rd 2008
     permalink
    gorge.iahuffman.com full html
    •  
      CommentAuthorArcNeXuS.net
    • CommentTimeMar 4th 2008 edited
     permalink
    not sure if this matters but I did notice when i clicked on image link I got file not found 404 error in firefox .....yoiu might want to look again at code for those image links.. maybe the quotes are not needed in CSS???
    when I loaded the images link without the quote it worked .


    hope this helps...

    and on a related note.. if the style sheet is in style folder [CSS] then the path for the images should start from there I think ...so you can test it both ways .. see if it works with a relative path rather than absolute url....maybe make a second page copy and jsut change those paths to test
    • CommentAuthordavist11
    • CommentTimeMar 4th 2008
     permalink
    You need to have a transparent gif as the background image when you are using the AlphaImageLoader. Like so:

    #blue723_t {
    background-image: url(blank.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://gorge.iahuffman.com/css/bimages/blue723_t.png', sizingMethod='crop');
    }


    I wrote a PNG Guide on my site that may help as well.
    •  
      CommentAuthorJJenZz
    • CommentTimeMar 10th 2008 edited
     permalink

    You need to have a transparent gif as the background image when you are using the AlphaImageLoader.


    That is not true. Transparent backgrounds will work fine in IE without gifs.

    The problem seems to be that the images aren't where you are referencing them. If you browse to http://gorge.iahuffman.com/css/bimages/blue723_t.png you just get a 404 (as ArcNeXuS has said).
  1.  permalink
    I found an effective PNG transparency solution for IE.

    1. Download this file: www.southernmedia.org/iepngfix.htc
    2. Create a stylesheet for IE6 and below only, using IE conditional comments (example: )
    3. Add this line to your IE stylesheet:

    * {behavior: url('iepngfix.htc');} (where URL is the path to the file)

    It worked perfect for me =) I hope it does for you, if it doesn't, let me know ;)
Add your comments
    Username Password
  • Format comments as (Help)