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?
Click to expand...

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.
Click to expand...

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>
Click to expand...
<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.
Click to expand...

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
Click to expand...

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
Click to expand...

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

Similar Threads

I need help fixing my website 2
Help me sort out this script 1
Is it possible an iframe can overlapp another? 3
Image on header 2
Survey details won't go through using php, ajax, Mysql 0
Align img inside nav tabs section 5
How to position the *tooltip* comment on these buttons? 9
I need help making a zooming function 11

Members online

No members online now.
Total: 66 (members: 1, guests: 65)
Robots: 436

Forum statistics

Threads
473,995
Messages
2,570,233
Members
46,820
Latest member
GilbertoA5

Latest Threads

Top