Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: Transparent background shows WHITE

  1. #1
    Join Date
    Mar 2005
    Posts
    110
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default Transparent background shows WHITE

    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

  2. #2
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote 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

  3. #3
    Join Date
    Mar 2005
    Posts
    110
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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?

  4. #4
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote 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

  5. #5
    Join Date
    Mar 2005
    Posts
    110
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    thank you. worked just fine

  6. #6
    Join Date
    Jul 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question This method works every where except Opera!

    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?

  7. #7
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Opera have removed all support for transparency.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  8. #8
    Join Date
    May 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Transparent Background is White in Explorer

    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?

  9. #9
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Opera hasn't had a massive change of heart and decided to support transparency in the last few months.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  10. #10
    Join Date
    Jul 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Perfect!! I had the same problem and this solution saved a lot of my time! Thank's a lot.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •