Solved

Iframe transparency is gone in internet explorer 7.0 ?

Posted on 2007-03-21
10
528 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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

Find out what you should include to make the best professional email signature for your organization.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

837 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