Solved

Iframe transparency is gone in internet explorer 7.0 ?

Posted on 2007-03-21
10
530 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Navigation Menu Does Not Show on iPad 4 30
Allow a tab area under the contents 1 24
Triple line in an alert message 4 19
Echo'd values in dropdowns 6 27
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

679 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