...

View Full Version : Resolved graphics problem IE



TinyScript
03-21-2009, 04:48 PM
Hi folks, I'm trying make a header using some gradients. It looks great in firefox and opera, but for some reason, the ends look messed up in IE. I don't understand why. The repeating image used as the background is a slice of the image used for the ends. They are the same gradient color. I don't understand how they don't blend. I have the z-index set so the header title image doesn't get covered by them if the page is resized.
Has anyone else seen this happen before? I've never seen it.
http://i43.tinypic.com/155ntw2.jpg



<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8" />
<title>testt</title>
<style type="text/css">
<!--
body{
background-color:#009;
}
#toprightcorner{
background-color:#009;
position: absolute;
top :30px;
right:0px;

}
#topleftcorner{
background-color:#009;
position: absolute;
top :30px;
left:0px;

}
#imgL{
position: absolute;
top :0px;
left:30px;
z-index:-1;
}
#imgR{
position: absolute;
top :0px;
right:30px;
z-index:-1;
}
#imgHWPDX{
padding-top :60px;
float:center;
z-index:1;
}
#header
{
color:white;
position: absolute;
top :30px;
left:60px;
right:60px;
height:125px;
background-color:#FFF;
background-image:url(blugradient.png);
background-repeat:repeat-x;


}
</style></head>

<body>
<div ID="header"><center><img ID="imgHWPDX" src="HWPDX.gif"></center></div>
<div ID="topleftcorner"><img ID="imgL" src="blueGradientRoundcorners.gif"></div>
<div ID="toprightcorner"><img ID="imgR" src="blueGradientRoundcorners.gif"></div>
</body>
</html>

abduraooft
03-21-2009, 04:50 PM
It's almost impossible to reproduce the error at our end using the above code. A link would be helpful.

TinyScript
03-21-2009, 05:04 PM
Yeah, it might help.

http://h1.ripway.com/tinyscript/header/testgradBG.html

_Aerospace_Eng_
03-21-2009, 05:38 PM
The issue is with how IE displays the colors on pngs. Make your gifs pngs and the issue will go away or if you don't want to go that route: http://www.biorust.com/tutorials/detail/231/en/

TinyScript
03-21-2009, 05:48 PM
Works! thank you. Yet another lesson learned. I love this place.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum