Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member johnjm22's Avatar
    Join Date
    Feb 2006
    Location
    Barstow, CA
    Posts
    27
    Member #
    12537
    I'm trying to create an iFrame with a transparent background in both FF and IE.

    If I don't specify a background color (in the parent page, and the iFrame source page), the iFrame will default to transparent in FF, but displays a white background in IE.

    I tried adding allowTransparency="true" to the iFrame tag in the parent page, but it had no effect. I then added bgcolor="transparent" to the body tag in the iFrame source page, and it made the iFrame background transparent in IE, but made it blue in FF.

    Is there anyway to make the iFrame background transparent in both FF and IE?

    Parent Page Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Chrysalis (Band) | Official Site - Tours / Shows</title>
    <style type="text/css">
    A:link {text-decoration: none}
    A:visited {text-decoration: none}
    A:active {text-decoration: none}
    A:hover {text-decoration: underline; color: white;}
    A:link IMG { border: none }

    </style>


    <style type="text/css">

    #dropmenudiv{
    position:absolute;
    background-color: ;
    border:1px solid black;
    border-bottom-width: 0;
    font:normal 10px Verdana;
    line-height:16px;
    z-index:100;
    }

    #dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid black;
    padding: 1px 0;
    text-decoration: none;
    font-weight: bold;
    }






    #dropmenudiv a:hover{ /*hover background color*/
    background-color: #000000;opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5;border:1px solid black; }


    }

    /* Sample CSS definition for the example list. Remove if desired */
    .navlist li {
    list-style-type: square;
    width: 135px;
    background-color: #FFFFB9;
    }

    </style>


    <script type="text/javascript">

    /***********************************************
    * AnyLink Vertical Menu- Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    //Contents for menu 1
    var menu1=new Array()
    menu1[0]='<a href="lineup.html"> &nbsp;&nbsp; Line Up</a>'
    menu1[1]='<a href="history.html">&nbsp;&nbsp; History</a>'
    menu1[2]='<a href="wiki.html">&nbsp;&nbsp; Wiki</a>'




    //Contents for menu 2, and so on
    var menu2=new Array()
    menu2[0]='<a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a>'
    menu2[1]='<a href="http://www.javascriptkit.com/javaindex.shtml">JavaScript tutorials</a>'
    menu2[2]='<a href="http://news.bbc.co.uk">JavaScript Reference</a>'
    menu2[4]='<a href="http://www.javascriptkit.com/java/">Java Applets</a>'
    menu2[3]='<a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a>'
    menu2[4]='<a href="http://www.javascriptkit.com/howto/">Design Tutorials</a>'

    var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
    var horizontaloffset=2 //horizontal offset of menu from default location. (0-5 is a good value)

    /////No further editting needed

    var ie4=document.all
    var ns6=document.getElementById&&!document.all

    if (ie4||ns6)
    document.write('<div id="dropmenudiv" style="visibility:hidden;width: 160px" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

    function getposOffset(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    }


    function showhide(obj, e, visible, hidden, menuwidth){
    if (ie4||ns6)
    dropmenuobj.style.left=dropmenuobj.style.top=-500
    dropmenuobj.widthobj=dropmenuobj.style
    dropmenuobj.widthobj.width=menuwidth
    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
    obj.visibility=visible
    else if (e.type=="click")
    obj.visibility=hidden
    }

    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }

    function clearbrowseredge(obj, whichedge){
    var edgeoffset=0
    if (whichedge=="rightedge"){
    var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWid th-15 : window.pageXOffset+window.innerWidth-15
    dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
    if (windowedge-dropmenuobj.x-obj.offsetWidth < dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetWi dth
    }
    else{
    var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
    var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeig ht-15 : window.pageYOffset+window.innerHeight-18
    dropmenuobj.contentmeasure=dropmenuobj.offsetHeigh t
    if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move menu up?
    edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
    if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? (position at top of viewable window then)
    edgeoffset=dropmenuobj.y
    }
    }
    return edgeoffset
    }

    function populatemenu(what){
    if (ie4||ns6)
    dropmenuobj.innerHTML=what.join("")
    }


    function dropdownmenu(obj, e, menucontents, menuwidth){
    if (window.event) event.cancelBubble=true
    else if (e.stopPropagation) e.stopPropagation()
    clearhidemenu()
    dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
    populatemenu(menucontents)

    if (ie4||ns6){
    showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
    dropmenuobj.x=getposOffset(obj, "left")
    dropmenuobj.y=getposOffset(obj, "top")
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+horizontaloffset+ "px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
    }

    return clickreturnvalue()
    }

    function clickreturnvalue(){
    if (ie4||ns6) return false
    else return true
    }

    function contains_ns6(a, b) {
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    }

    function dynamichide(e){
    if (ie4&&!dropmenuobj.contains(e.toElement))
    delayhidemenu()
    else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
    delayhidemenu()
    }

    function hidemenu(e){
    if (typeof dropmenuobj!="undefined"){
    if (ie4||ns6)
    dropmenuobj.style.visibility="hidden"
    }
    }

    function delayhidemenu(){
    if (ie4||ns6)
    delayhide=setTimeout("hidemenu()",disappeardelay)
    }

    function clearhidemenu(){
    if (typeof delayhide!="undefined")
    clearTimeout(delayhide)
    }

    </script>


    </head>

    <script>
    function ouvre() {
    window.open('http://chrysalismusic.net/virbplayer.html', 'popupwindow', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no,width=540,height=276')
    }
    </script>

    <script language="JavaScript1.2">

    //Highlight image script- By Dynamic Drive
    //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
    //This credit MUST stay intact for use

    function makevisible(cur,which){
    strength=(which==0)? 1 : 0.7

    if (cur.style.MozOpacity)
    cur.style.MozOpacity=strength
    else if (cur.filters)
    cur.filters.alpha.opacity=strength*100
    }

    </script>


    <BODY bgcolor="black" link="white" vlink="white" alink="white"> <center>
    <TABLE WIDTH="800" height="1000" background="http://chrysalismusic.net/images/bg4.jpg">
    <TR>
    <TD width="131" height="302"></TD>
    <TD width="162"></TD>
    <TD width="491"></TD>
    </TR>
    <TR>
    <TD>&nbsp;</TD>
    <TD valign="top"> <font color="white" size="2" face="Verdana, Arial, Helvetica, sans-serif">
    <a href="news.html">News</a><br>

    <a href="band.html" onClick="return dropdownmenu(this, event, menu1, '75px')" onMouseout="delayhidemenu()">Band &nbsp; &nbsp; </a><br />


    <a href="chrysalis_debut_album.html">Releases</a><br>
    <a href="tour.html">Tour</a><br>
    <a href="http://www.flickr.com/photos/12542179@N07/sets/72157603131992479/show/">Images</a><br>
    <a href="tour.html" title="LAUNCH MEDIA PLAYER!" onmouseover="window.status='Launch Media Player'; return true;" onmouseout="window.status = '';" onclick='ouvre()' id='ici'>Audio</a><br>
    <a href="http://www.youtube.com/chrysalismusic">Video</a><br>
    <a href="downloads.html">Downloads</a><br>
    <a href="store.html">Store</a><br>
    <a href="links.html">Links</a><br>
    </font>


    <br><br>
    <a href="photos/chrysalis23.jpg" target="new"><img src="photos/thums/chrysalis23.jpg" border="0" style="filter:alpha(opacity=70);-moz-opacity:0.7" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"></a>
    <br><br>
    <a href="photos/159175100_l.jpg" target="new"><img src="photos/thums/159175100_l.jpg" border="0" style="filter:alpha(opacity=70);-moz-opacity:0.7" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"></a>
    <br><br>
    <a href="photos/chrysalis06.jpg" target="new"><img src="photos/thums/chrysalis06.jpg" border="0" style="filter:alpha(opacity=70);-moz-opacity:0.7" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"></a>
    </TD>
    <TD valign="top"><p><font color="#FFFFFF" size="1" face="Verdana, Arial, Helvetica, sans-serif"><br><br>


    <IFRAME src="updated_news.html" allowTransparency="true" width="350" height="435"
    scrolling="no" frameborder="0">
    [Your user agent does not support frames or is currently configured
    not to display frames. However, you may visit
    <A href="foo.html">the related document.</A>]
    </IFRAME>




    </TD>
    </TR>
    </TABLE>
    </center>
    </body>
    </html>
    iFrame Source Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>

    <head>
    <title>Chrysalis (Band) | Official Site - News</title>
    <style type="text/css">
    A:link {text-decoration: none}
    A:visited {text-decoration: none}
    A:active {text-decoration: none}
    A:hover {text-decoration: underline; color: white;}
    A:link IMG { border: none }

    </style>
    </head>



    <div id="staticbuttons" style="position:absolute;">
    <a href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0"><img
    src="http://www.robinasmith.com/includes/skins/default/images/up_arrow_purple.gif" border="0"></a><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br>
    <a href="javascript:" onmouseover="myspeed=thespeed" onmouseout="myspeed=0"><img
    src="http://www.robinasmith.com/includes/skins/default/images/down_arrow_purple.gif" border="0"></a>
    </div>

    <script>



    //Page Scroller (aka custom scrollbar)- By Dynamic Drive
    //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
    //This credit MUST stay intact for use

    var Hoffset=20 //Enter buttons' offset from right edge of window (adjust depending on images width)
    var Voffset=435 //Enter buttons' offset from bottom edge of window (adjust depending on images height)
    var thespeed=3 //Enter scroll speed in integer (Advised: 1-3)

    var ieNOTopera=document.all&&navigator.userAgent.index Of("Opera")==-1
    var myspeed=0

    var ieHoffset_extra=document.all? 15 : 0
    var cross_obj=document.all? document.all.staticbuttons : document.getElementById? document.getElementById("staticbuttons") : document.staticbuttons

    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }

    function positionit(){
    var dsocleft=document.all? iecompattest().scrollLeft : pageXOffset
    var dsoctop=document.all? iecompattest().scrollTop : pageYOffset
    var window_width=ieNOTopera? iecompattest().clientWidth+ieHoffset_extra : window.innerWidth+ieHoffset_extra
    var window_height=ieNOTopera? iecompattest().clientHeight : window.innerHeight

    if (document.all||document.getElementById){
    cross_obj.style.left=parseInt(dsocleft)+parseInt(w indow_width)-Hoffset+"px"
    cross_obj.style.top=dsoctop+parseInt(window_height )-Voffset+"px"
    }
    else if (document.layers){
    cross_obj.left=dsocleft+window_width-Hoffset
    cross_obj.top=dsoctop+window_height-Voffset
    }
    }

    function scrollwindow(){
    window.scrollBy(0,myspeed)
    }

    function initializeIT(){
    positionit()
    if (myspeed!=0){
    scrollwindow()
    }
    }

    if (document.all||document.getElementById||document.l ayers)
    setInterval("initializeIT()",20)

    </script>


    <BODY link="white" vlink="white" alink="white">

    <font color="white" size="1" face="Verdana, Arial, Helvetica, sans-serif">

    <u>5.24.08</u><br>
    Official <a href="tour.html"><u>tour dates</u></a> for Spring 08 now posted.<br><br><br>


    <u>2.06.08</u><br>
    Thanks to everyone who's purchased our album over the past year. It's now officially one of CDbaby's all time best selling records for the genre!! In other news, we're still writing material for our next album. The writing process is taking a little longer than expected, but we can assure you it will be well worth the wait. We hope to get the new record out sometime this year. <br><br>


    <br>
    <u>11.11.07</u><br>
    New site up. Check out the Dowloads section for some
    unique content.<br><br><br>



    <u>10.05.07</u><br>
    Tentative Tour Dates posted. Take a look at our <a href="http://www.myspace.com/chrysalismusic" target="new"><u>Myspace</u></a>
    page for more info.
    <br><br><br>

    <u>09.15.07</u><br>
    Just wanted to let everyone know that we've started pre-
    production on our new record which we hope to have out
    sometime in April of 08. We're very excited about the
    new material, and can't wait for everyone to hear it.
    We plan on doing some studio videos, so keep checking
    back for more info. And finally, thanks to everyone who
    supports us. We'll see on the road!<br><br><br>

    <u>03.21.07</u><br>
    We've got a song featured on the latest Skratch Magazine
    comp CD. The disc can be had for free at record stores
    and venues all over Southern California. Pick one up!
    <br><br><br>


    </body>
    </html>

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    try IE-specific css... put this in the <head> of your doc.

    <!--[if IE]>
    <style type="text/css">iframe {background: transparent;}</style>
    <![endif]-->

  4. #3
    Junior Member johnjm22's Avatar
    Join Date
    Feb 2006
    Location
    Barstow, CA
    Posts
    27
    Member #
    12537
    Thanks for the reply smoseley. I gave that a try, but still no luck.:ermm:

    What puzzles me about this whole thing is that if I put <body bgcolor="tranparent"> in the frame source, the iFrame background will show up as being blue in FF, but will indeed be tranparent in IE.

    Here's a link to the site:
    ChrysalisMusic.net/070108.html (Look at it in both IE and FF)

  5. #4
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    firefox is probably trying to equate the string "transparent" to a numeric value and rendering the background based upon that value.

  6. #5
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    have you tried all the codes together, like have you tried the code that works for FF AND the code that works for IE at the same time? it might work


Remove Ads

Posting Permissions

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

Search tags for this page

clear background color iframe internet explorer
,
css make iframe active when hidden is hovered
,
firefox iframe opacity example
,
ie iframe hover hidden
,
ifram video over background in ie8
,
iframe background color internet explorer
,
iframe onmouseout ie10
,
internet explorer 10 transparent iframe javascript
,
place a transparent div over iframe to disable clicks in internet explorer
,

transparent iframe background in firefox

Click on a term to search for related topics.
All times are GMT -6. The time now is 03:53 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com