I will go on record - I do NOT like IE 6.

I've created images for a web site that I've been asked to create. The images have transparent backgrounds and are saved as .PNG. Now the situation; they show up great and as expected in Firefox (no big surprise); however, in IE the background is translucent, sorta like a real light blue-gray?

Is there a way to get IE 6.0 to display the images properly, or am I just gonna have to "bite the bullet"? BTW, is this evident in the newer versions of IE?

Oh, yeah, can someone inform me how to get the images to display in the upper left and right corners of the page? Right now, the left image displays properly but the right one is "pushed" down about a quarter inch. There is an <h1></h1> tag between them. I'm trying to build this site without using table tags; pure CSS. My DTD is XHTML 1.0 Strict.

Thanks;
Greg

try http://24ways.org/2007/supersleight-transparent-png-in-ie6

and position absolute attribute for positioning.

If you could post your CSS that would help.

The css code in question is in the #header ID. I've included the html <div> tags below. The bannerback.jpg is the background image for the header and the text and transparent images lay on top.

I can get the left image to position in the upper left corner correctly, the right image is tight against the right of the page but pushed down from the top leaving a quarter inch gap.

<style type="text/css">

body,html{
margin:0;
padding:0;
color:#000;
background:#a7a09a;
}
#wrapper{
width:750px;
margin:0 auto;
background:#99c;
}
#header{
padding:0 0 0 0;
background-image:url('../images/bannerback.jpg');
background-repeat:repeat-x;
height:90px;
}

.rimg{
position:absolute;
}
#navigate{
padding:5px 10px;
background:#c99;
}
#navigate ul{
list-style:none;
margin:0;
padding:0;
}
#navigate li{
display:inline;
margin:0;
padding:0;
}
#main{
float:left;
width:730px;
padding:10px;
background:#9c9;
}
#sidebar{
float:right;
width:250px;
padding:10px;
background:#99c;}
#footer{
clear:both;
padding:5px 10px;
background:#cc9;
}
#footer p{
margin 0;
}
h1{
margin:0;
text_align:center;
}
h2{
margin:0 0 1em;
}
</style>

<div id="wrapper">
<div id="header">
<img src="../images/smallgillies.png" width="100" height="100" alt="" title="" border="0" align="left" />
<h1>Curran Highland Dance</h1>
<img src="../images/thistleleft.png" width="87" height="100" alt="" title="" border="0" align="right" />
</div>
. . . .
</div>

If I understand you correctly what you are trying to do is to position the right image on the right side of the banner instead of the right side of the page. If that is the case, then just apply padding-right or margin-right until you push your image back on the banner.

I am also reading your question as, your image is pushed too far down from the top. If that is your question, then do "margin-top:-25px;" or however much space you have to compensate for. The negative means that the image will go up.

I reckon you need a float left, and a float right for them.
Why not try to just use these images as background images and not include them in the html

but just in the css?

There are plenty of good reasons for that, beyond the stated issue...

For security's sake, you would do well to abandon use of IE 6.

This is his philosophical opinion. Most developers will tell you, that until the usership of IE6 goes down more, you must keep developing for it. Know your audience, and that will help you make those browser decisions.

I do highly recommend Janys suggestion. I think placing images in the CSS is far better than within the markup.

IE6, in particular, loves to float elements.

And most security experts recommend dropping IE 6 like a rock.

Most "developers" are overlooking the fact that catering to ignorance and carelessness will not encourage those users to transition away from IE 6. Things that don't work properly in their browsers just might help to have that effect.

How many cigarette machines do you see inside doctors' offices? Plenty of patients still smoke...