Transparent background shows WHITE

**ikon** · 04-12-2005, 08:34 PM

heres my dilemma. i currently use Firefox as my default browser. i use frames on my website on every page. and in those frames i use the 'Scrollable IFrame' script. everything is fine there, no questions regarding the script. however, i set the background of the frame loaded html pages to be transparent, so the text i put in the scrollable frame would look like it was part of the graphic background of my website. The transparent background shows up in Firefox, but when i look at the website in Internet Explorer, the background is WHITE instead of transparent!! can anyone explain why this is happening, and what i can do to make the transparent background work in BOTH browsers???

heres a link to my website, for visual description.. http://www.ikonmusic.net

**mwinter** · 04-12-2005, 08:49 PM

Originally Posted by ikon

[...] when i look at the website in Internet Explorer, the background is WHITE instead of transparent!! can anyone explain why this is happening

The answer is, quite simple: IE is crap. There's no other way to put it.

what i can do to make the transparent background work in BOTH browsers???

You have to include the proprietary allowtransparency property, set to true:

HTML Code:

<iframe src="..." allowtransparency="true"></iframe>

The background-color property of the iframe element will then default to transparent, but it can still be set to any legal value.

Mike

**ikon** · 04-13-2005, 05:21 AM

okay, that helped. got everything squared away on the subpages. but now the only issue is the iframe scroller on the homepage> http://www.ikonmusic.net ....when looking at that page in firefox, its fine, but again in IE, the background is white..i used the IFRAME scroller script for that> http://www.dynamicdrive.com/dynamici...e-scroller.htm ...which carries the external.htm file for the frame loaded page...i put the tag in the iframe itself, like you said:

<iframe id="datamain" src="'+iframesrc+'" width="320px" height="100px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" allowtransparency="true"></iframe>

but its still showing up white, unlike the subpages where it worked in every other instance..im thinking i might have to alter the code in the external.htm file itself...any suggestions?

**mwinter** · 04-13-2005, 12:12 PM

Originally Posted by ikon

but its still showing up white, unlike the subpages where it worked in every other instance..im thinking i might have to alter the code in the external.htm file itself

Yes, you do. Without a correct DOCTYPE, user agents will fallback to quirky behaviour. In this mode, IE defaults to a white background not a transparent one. Either set a DOCTYPE at the very start of the document:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<!-- ... -->

or explicity set the background-color CSS property to transparent:

HTML Code:

<head>
  <style type="text/css">
    html,
    body {
      background-color: transparent;
    }
  </style>

  <!-- ... -->
</head>

Either way, you still need the proprietary allowtransparency attribute.

Mike

**ikon** · 04-13-2005, 04:12 PM

thank you. worked just fine

**analogue** · 07-27-2005, 03:38 PM

hi thanks for that transparency method. Just so you guys know, The method above does work in I.E 6, Netscape 7.2, Mozilla Firefox 1.04, but does NOT work in Opera 8.01 !!!! 3 out of 4 major browsers is pretty good, but is there some additional code i can add that will make it work in Opera as well? anyone got any ideas?

**Twey** · 07-27-2005, 05:00 PM

Opera have removed all support for transparency.

**jrthib** · 05-02-2006, 03:41 AM

Help! My webpage is http://homepage.mac.com/jrthib1/SBHS/ i am redesigning the website for my school. I tried the workarounds that were posted in this thread but none worked for me. any suggestions what i can do?