Solved

Iframe transparency is gone in internet explorer 7.0 ?

Posted on 2007-03-21
10
523 Views
Last Modified: 2009-12-16
Hi

I have just created a new webpage, using again an IFrame. Wadda surprise when I visualized it in the all bran new Internet Explorer 7.0 - transparencies are gone ! Is there a work arround to display transparency again even if it is viewed with explorer 7.0?

I have tried [allowtransparency="true"] option but o results.

Any help will be appreciated.

Thanks
0
Comment
Question by:SirTKC
  • 5
  • 4
10 Comments
 
LVL 15

Expert Comment

by:stanscott2
ID: 18767510
I think that, in addition to the allowtransparency=true, you also need to add

style="background-color: transparent;

to the <BODY> tag.
0
 
LVL 3

Expert Comment

by:exoska
ID: 18767634
stan s right, just to make it open.

<iframe src="iframe.htm" FRAMEBORDER="0" name="IFRAME NAME" style="position:absolute;"
allowtransparency="true"></iframe>

in iframe.htm>
<body style=background-color:transparent>
0
 
LVL 3

Author Comment

by:SirTKC
ID: 18767666
Allright...

This was a nice try but, ain't worked arround the issue.

This Iframe contains a frame set. I have inserted this CSS Style on both levels (frameset and pages within the frame set)

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

No results.

I also have tried to include in the Iframe properties the following string value

<iframe src="commercial.html" width="501" height="359" frameborder=0 scrollbar-face-color="indigo" style="background-color: transparent;" ALLOWTRANSPARENCY="true" scrolling="no"></iframe>

No results either.

I know that there is a way to make it transparent.... but how ?
0
 
LVL 3

Expert Comment

by:exoska
ID: 18767838
well many unsuccessful tries,
but this one works @ ie7

first, the father page to hold iframe
<HTML>
<HEAD>

</HEAD>
<BODY bgcolor=red>
<div style="height: 1px; width: 1px;
filter: Alpha(Opacity=80, FinishOpacity=0); border-style: none; border-width: 0">
<IFRAME SRC="New7.html" NAME="editFrame"  ></IFRAME>
</div>
</BODY>
</HTML>


then the iframe page ( New7.html )
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title>safsaf</title>
  </head><FRAMESET COLS="30%,*">

<FRAME SRC="fr1.html" NAME="nav">

<FRAME src="fr2.html" NAME="display">

</FRAMESET>
</html>

then the inner frames
fr1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>
  </head>
  <body>
FR1
  </body>
</html>

fr2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>
  </head>
  <body>
FR2asdf asfsdf
  </body>
</html>




the DIV tag at the father page, makes the  transparency true.. but it has to be given some width and height, or it wont render..

try it please.
0
 
LVL 3

Author Comment

by:SirTKC
ID: 18768260
I am glad to say that it brought transparency to my page. BUT ! It took everything into transparency, even the content of my frames.

To make sure, I have reproduced the exact same scenario that you proposed exoska (father.html as the father page, New7.html as the frameset and fr1.html & fr2.html as frames).

Everything within the div went 80% transparent including my text and images. I even brought the opacity to 0. Everything disappeared inside the IFrame.

I will increase this one to 500 pts - it seem to be a tought one...

D(...) Explorer 7 !!! ;-)
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 3

Expert Comment

by:exoska
ID: 18768359
sorry, but i thought you were looking for that.
well, since transparency is a body style , and framesets do not work with body tags,
some other workaround will be needed.. i hope we can figure one out. just gotta go to sleep for now:)
0
 
LVL 3

Accepted Solution

by:
exoska earned 500 total points
ID: 18768371
one final thing, please consider using iframes, as frame bodies, if not too complicated the frameset is.

table+iframe makes a strong alternative if you are not thinking of frame resizing.
0
 
LVL 3

Author Comment

by:SirTKC
ID: 18775101
Hi exoska,

Yes matter of fact [table + Iframe] instead of [table + Iframe + Frameset within the Iframe]  is a much more simple alternative. But for the purpose of what I needed , I simply throwed the whole thing in the trash and had it redone in JavaScript (kind of hover pictures gallery with smart preview)

After doing some tests, I built a simple menu in a table adjscent to the cell containing the Iframe named "showit" and had all content displayed in this Iframe as target "showit". This alternative worked beautifully based on your final recommendation.

However, all points are going to you.

Thanks a million for your interests in the question !
0
 
LVL 3

Expert Comment

by:exoska
ID: 18775121
i m glad Sir:)
0
 
LVL 3

Author Comment

by:SirTKC
ID: 18775226
For those seeking the same solution for similar problem, here is the working code.

=====================================================
<head>
<TITLE></TITLE>
<style type="text/css">
<!--
body {
      background-color: #003366;
}
-->
</style>
</head>


<HTML>
<table width="735" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="260"><table width="100%" height="160" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td><a href="content.html" target="showit">Frame 1 </a></td>
      </tr>
      <tr>
        <td><a href="content2.html" target="showit">Frame2</a></td>
      </tr>
      <tr>
        <td><a href="content3.html" target="showit">Frame3</a></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table></td>
    <td width="500" height="400"><p><iframe name="showit" src="content.html" width="500" height="400" frameborder=0 scrollbar-face-color="indigo" ALLOWTRANSPARENCY="true" scrolling="yes"></iframe></p>    </td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
</table>
</HTML>
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now