Yet another weird png/IE6 problem

HTML & CSS
1

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

i left out the png8 part as i gave the advice once before to the OP, with details, but she chose to ignore it :slight_smile:

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

3

the best solution is to forget about fixing png’s for ie and make a different set of images for it.

4

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… :slight_smile: learned yet one more lesson re IE6 and png’s…

5

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).

6

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.


<!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;
}
[B]#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;
  [/B]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">[B]<p class="girl"></p> [/B]</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.

7

Just used IE tester. The difference I saw was that the picture of the lady wasn’t there at all

8

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…;-(