IE7 won't let me define iframe background color

A

AAaron123

A iframe element always shows white background in IE7.

In Firefox it shows the color defined in the class attribute.

Can I get IE7 to do likewise somehow?

Thanks in advance



I have the following in a context file:

<asp:Content ID="Content2" ContentPlaceHolderID="RightCPH" runat="server">

<div id="Div3" runat="server" class="MainMasterDataNormal" >

<h5>ARTICLES </h5>

</div>



<%-- Must use name per test and documentation. With Id target does not work.
Opens in new window--%>

<iframe name="ArticlesFrame" frameborder="0" src="Make Black.htm"
class="MainFrame" height="533">

</iframe>

</asp:Content>



The Style sheet file contains:

..MainFrame

{

background-color: black;

width: 95%;

margin: 10px;

}

Which sets the margin and width OK but not the backgroung color.

I can force the color by including:

src="Make Black.htm"

which has a black background, but I really want it to either use the class
or else inherit from the container background color.
 
J

Joern Schou-Rode

Can I get IE7 to do likewise somehow?

Most likely not.

Wouldn't it make more sence, to instead change the background color
directly in the document loaded into the iframe?
 
A

AAaron123

I give the user the option of selecting one of four style sheets and I'm not
sure how to get that info into the html file, but I'm going to think some
more about doing it that way?

Thanks
 
G

Guest

A iframe element always shows white background in IE7.

In Firefox it shows the color defined in the class attribute.

Can I get IE7 to do likewise somehow?

Thanks in advance

I have the following in a context file:

<asp:Content ID="Content2" ContentPlaceHolderID="RightCPH" runat="server">

<div id="Div3" runat="server" class="MainMasterDataNormal" >

<h5>ARTICLES </h5>

</div>

<%-- Must use name per test and documentation. With Id target does not work.
Opens in new window--%>

<iframe name="ArticlesFrame" frameborder="0" src="Make Black.htm"
class="MainFrame" height="533">

</iframe>

</asp:Content>

The Style sheet file contains:

.MainFrame

{

background-color: black;

width: 95%;

margin: 10px;

}

Which sets the margin and width OK but not the backgroung color.

I can force the color by including:

src="Make Black.htm"

which has a black background, but I really want it to either use the class
or else inherit from the container background color.

This is because background of the iframe is overlayed with background
of the source document. In your case you see the white document over
black iframe. To set the background use iframe's ALLOWTRANSPARENCY
attribute and set the background-color attribute of the BODY element
must be set to transparent.

Example:

main.htm

....
<iframe class="MainFrame" src="iframe.htm" ALLOWTRANSPARENCY="true"></
iframe>
....

iframe.htm

....
<body style="background-color:transparent">
....

OR you can also use javascript, for example

<script>
document.all.f.style.backgroundColor = "red";
</script>

where "f" is id of the iframe object (<iframe id="f"...

More about this
http://msdn.microsoft.com/en-us/library/ms535258.aspx

Hope this helps
 
A

AAaron123

I didn't have to think long.
Once the frame is loaded I have no problem.
The problem I have is the iframe background color before the user selects
something to load the iframe with.

The white blank iframe is stark.

I made a mistake in the post. I said:
<iframe name="ArticlesFrame" frameborder="0" src="Make Black.htm"
class="MainFrame" height="533">

I should have said
<iframe name="ArticlesFrame" frameborder="0" class="MainFrame" height="533">

Which is why I said
I can force the color by including:

src="Make Black.htm"

But I don't always want black.

Once I assign a real value to src the background is not visible.

Below I reproduce the post - corrected

Thanks
=============


An iframe element always shows white background in IE7.

In Firefox it shows the color defined in the class attribute.

Can I get IE7 to do likewise somehow?

Thanks in advance



I have the following in a context file:

<asp:Content ID="Content2" ContentPlaceHolderID="RightCPH" runat="server">

<div id="Div3" runat="server" class="MainMasterDataNormal" >

<h5>ARTICLES </h5>

</div>

<iframe name="ArticlesFrame" frameborder="0" class="MainFrame" height="533">

</iframe>

</asp:Content>



The Style sheet file contains:

..MainFrame

{

background-color: black;

width: 95%;

margin: 10px;

}

Which sets the margin and width OK but not the backgroung color.

I can force the color by including:

src="Make Black.htm"

which has a black background, but I really want it to either use the class
or else inherit from the container background color.
 
A

AAaron123

A iframe element always shows white background in IE7.

In Firefox it shows the color defined in the class attribute.

Can I get IE7 to do likewise somehow?

Thanks in advance

I have the following in a context file:

<asp:Content ID="Content2" ContentPlaceHolderID="RightCPH" runat="server">

<div id="Div3" runat="server" class="MainMasterDataNormal" >

<h5>ARTICLES </h5>

</div>
<iframe name="ArticlesFrame" frameborder="0"
class="MainFrame" height="533">

</iframe>

</asp:Content>

The Style sheet file contains:

.MainFrame

{

background-color: black;

width: 95%;

margin: 10px;

}

Which sets the margin and width OK but not the backgroung color.

I can force the color by including:

src="Make Black.htm"

which has a black background, but I really want it to either use the class
or else inherit from the container background color.

This is because background of the iframe is overlayed with background
of the source document. In your case you see the white document over
black iframe. To set the background use iframe's ALLOWTRANSPARENCY
attribute and set the background-color attribute of the BODY element
must be set to transparent.

Example:

main.htm

....
<iframe class="MainFrame" src="iframe.htm" ALLOWTRANSPARENCY="true"></
iframe>
....

iframe.htm

....
<body style="background-color:transparent">
....

OR you can also use javascript, for example

<script>
document.all.f.style.backgroundColor = "red";
</script>

where "f" is id of the iframe object (<iframe id="f"...

More about this
http://msdn.microsoft.com/en-us/library/ms535258.aspx

Hope this helps



=============
I had a bug in my post. I fixed above by removing
src="Make Black.htm"
from the iframe element.

You see how much that changes the problem?
There is no src value. The iframe opens without an overlay. When the user
makes a selection the attribute src is set equal to something.
So I tried to set the iframe background color to something pleasing until a
selection is made.

Thanks
 
G

Guest

I had a bug in my post. I fixed above by removing
src="Make Black.htm"
from the iframe element.

You see how much that changes the problem?
There is no src value. The iframe opens without an overlay. When the user
makes a selection the attribute src is set equal to something.
So I tried to set the iframe background color to something pleasing until a
selection is made.

Thanks

Aaron,

It seems this is by design in IE. It shows white by default.

I don't know if it helps, here's the trick I found with Microsoft
Visual Filter. If you set a background of a page and the opacity of an
object to 0 (100% transparent) you will "see" the transparent iframe
over the page.

<span style="background-color: yellow;">
<iframe style="filter:progid:DXImageTransform.Microsoft.Alpha
(opacity=0);" width="200" height="200"></iframe>
</span>

However I think your idea with src="Make Black.htm" is much simpler
 
A

AAaron123

Thanks for working with me

I had a bug in my post. I fixed above by removing
src="Make Black.htm"
from the iframe element.

You see how much that changes the problem?
There is no src value. The iframe opens without an overlay. When the user
makes a selection the attribute src is set equal to something.
So I tried to set the iframe background color to something pleasing until
a
selection is made.

Thanks

Aaron,

It seems this is by design in IE. It shows white by default.

I don't know if it helps, here's the trick I found with Microsoft
Visual Filter. If you set a background of a page and the opacity of an
object to 0 (100% transparent) you will "see" the transparent iframe
over the page.

<span style="background-color: yellow;">
<iframe style="filter:progid:DXImageTransform.Microsoft.Alpha
(opacity=0);" width="200" height="200"></iframe>
</span>

However I think your idea with src="Make Black.htm" is much simpler
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top