Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Transparent image bg changes colour in IExplorer

Status
Not open for further replies.

ferolo

Technical User
Sep 29, 2005
13
0
0
SE
Hi!

I am using dreamweaver mx 2004 for building my website.
I have also done some images in photoshop with rounded corners for my text-content. This leaves some "room" between the content and the image real size, which is a trasparent backgroundg(i am using some shadows which makes things difficult). each time i preview or use the Internet explorer the transparent bg changes to a bright blue colour instead of remaining transparent. This does not happen in the other browsers, such as netscape navigator 8.0 and mozilla firefox. In those the area between the rounded corners and content remain transparent. This problem only happens in internet explorer.

Does anyone know how to change this so i can view the images with the transparency still there? it looks really weird with the bright blue on a red background :p.

Can u change this in any way so i can use my own created content?
 
Is it the image border? Set that to 0. If not post the code so we can have a look

Cheech

[Peace][Pipe]
 
i tried with settingthe border to 0... it did not make any diference. As i mentioned this only happens in internet explorer, which conufses me greatly.

here is the code:
------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Startsidan</title>
<style type="text/css">
<!--
body {
background-color: #CACACA;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body>
<div id="toplayerbg" style="position:absolute; width:1024px; height:120px; z-index:1; left: 1px; top: 1px;"><img src="Bilder/layout/top_bg.png" width="1024" height="120" border="0"></div>
<div id="leftlayerbg" style="position:absolute; width:131px; height:649px; z-index:2; left: 1px; top: 119px;"><img src="Bilder/layout/left_bg.png" width="131" height="649"></div>
<div id="Layer1" style="position:absolute; width:675px; height:478px; z-index:3; left: 131px; top: 116px;"><img src="Bilder/layout/content_main_grey.png" width="675" height="480" border="0"></div>
</body>
</html>
----------------

got any ideas as to what i can do???
 
o i forgot to mention, i hae tried using different formats for the image, jpeg, gif and bmp. The image mainly concerned is content_main_grey.png, although i have some more images i want to use in the same way.
 
If the background is going to be a set colour, USE that colour on your image background instead of making it transparent.



----------------------------------------
Sometimes, when my code just won't behave, I take it outside and make it listen to britney spears music, and when it comes back it's really well behaved. I wonder if it's suffering from post tramatic stress syndrome now..
 
umm.....as i mentioned i am using shadows....this makes the background issue a little tricky. there are shadows on the background that i cant use like that. I guess ill just make one big picture and set it in a table instead...it does not sound like anyone know how to solve this issue. I just dont get it...this problem ONLY occurs in Internet explorer. THe other browsers works FINE. someone should kick some microsoft ass someday :(
 
there are several images across eacother....if the background isnt trancsparent then the whole thing looks terrible...internet explorer....WHYYYYY!!!!!!
 
Actually the thing is, Internet Explorer,has a Problem Rendering PNG files with transparency correctly, it will always give it some color for the transparent parts, your best bet is to use GIF's
JPG's and BMP's have no intrinsic transparency. In other words you can't make transparent images with those formats.

I haven't seen this behaviour in any other browser except Microsofts Internet Explorer. firefox renders the transparebcy correctly, Opera does to, and I believe Netscape also. Internet Explorer ignores the transparent sections and just assigns a color to them based on the palete available.

Use a Transparent Gif, and play around with the palettes to get the best looking image you can.




----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
WOW!
another great answer.... ILUV THIS FORUM!!!

thx..now. i know what to do..and u have just saved me A LOT of time :)
 
|You are welcome, glad i could help.


----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top