SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    yet another weird png/IE6 problem

    it never ends, with IE6 and png's..

    http://mayacove.com/dev/css/test_png.html

    pls compare to how this looks in any browser other than IE6 (IE7 & 8 (& all others) it looks fine).. the png is a bg-image.. why is IE6 making it so huge?? (it has to be a png, b/c it sits on a gradient bg.. and regardless of position, IE6 makes it huge.. I had never seen this.. )

    am stumped.. thank you very much..

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just used IE tester. The difference I saw was that the picture of the lady wasn't there at all

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

    I can see the enlarged image in my IE tester ok.

    The alpha image loader doesn't behave like the normal background properties and it has its own properties of crop, scale and image.

    As the JS has the filter set to "scale" then the image will be scaled to fit the container it sits in.

    One solution would be to size the container to fit the image as follows.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta http-equiv="imagetoolbar" content="no"/>
    <meta http-equiv="imagetoolbar" content="false"/>
    <link rel="stylesheet" type="text/css" href="style_.css" />
    <script type="text/javascript" src="http://mayacove.com/dev/css/js/jquery_1.4.1.min.js"></script>
    <script type="text/javascript" src="http://mayacove.com/dev/css/js/pngFix.js">
    
    
    </script>
    <script type="text/javascript" src="http://mayacove.com/dev/css/js/test.js"></script>
    <style>
    p {
        margin:0 0 15px 0;
    }
    div {
        margin:0;
        padding:0;
    }
    h1, h2, h3, h4, h5 {
        margin:0;
        padding:0;
        font-weight:normal;
    }
    body {
        margin:0;
        background:#a5aaad;
        color:#333;
        font-family:arial, helvetica, geneva, verdana, sans-serif;
        font-size:12px;
        line-height:150&#37;;
    }
    #wrapper {
        width:960px;
        margin:0 auto 20px auto;
        position:relative;
        background:url('http://mayacove.com/dev/css/images/bg_main_gradient.jpg') 0 0 no-repeat; /*border:1px solid red;*/
        border-bottom:2px solid #454545;
    }
    #wrapperInnerAbout {
        height:800px;
        width:960px;
        position:relative;
    }
    .girl{
        position:absolute;
        bottom:0;right:0;
        width:283px;
        height:488px;
        background:url('http://mayacove.com/dev/css/images/bg_person1.png') right bottom no-repeat;
      margin:0;
    }
    #wrapperFooter {
        width:960px;
        margin:0 auto
    }
    body.inner #wrapper {
        padding-top:175px;
    }
    </style>
    </head>
    <body class="inner">
    <div id="wrapper">
        <div id="wrapperInnerAbout"><p class="girl"></p> </div>
    </div>
    </body>
    </html>
    Another solution would be the twin helix pngfix which has support built in for background-positioning and repeating.

    I usually prefer to code them with css only and forget about repeatng or positioning.

  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the best solution is to forget about fixing png's for ie and make a different set of images for it.

  5. #5
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I can't resize the container, the container has lots of content, img, which goes at bottom right of container, is just part of content.. loaded img directly in HTML, positioned, IE won't position it.. oh brother......;-(

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by maya90 View Post
    I can't resize the container, the container has lots of content, img, which goes at bottom right of container, is just part of content.. loaded img directly in HTML, positioned, IE won't position it.. oh brother......;-(
    I gave you a working example above but it just means having that extra nested element which is placed absolutely and will work just like the background image (assuming you give the other content position:relative and a higher z-index).

    Or as noonope says above just use normal non transparent images for IE6 with the background attached to the image (or use png8 for ie6).

  7. #7
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Or as noonope says above just use normal non transparent images for IE6 with the background attached to the image (or use png8 for ie6).
    i left out the png8 part as i gave the advice once before to the OP, with details, but she chose to ignore it

    i she was to follow it then, she would not have now to deal with such problems

  8. #8
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you very much for your help.. ended up putting it in a div of same width as img, positioned div, and that worked in IE6.. :-) learned yet one more lesson re IE6 and png's....


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
  •