Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Iframe transparency is gone in internet explorer 7.0 ?

Posted on 2007-03-21
10
Medium Priority
?
546 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: 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 1500 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: 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.

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.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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).

704 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