IE7 won't let me define iframe background color

Discussion in 'ASP .Net' started by AAaron123, Dec 9, 2008.

  1. AAaron123

    AAaron123 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.
     
    AAaron123, Dec 9, 2008
    #1
    1. Advertising

  2. On Tue, 09 Dec 2008 17:21:38 +0100, AAaron123 <>
    wrote:

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

    --
    Joern Schou-Rode
    http://malamute.dk/
     
    Joern Schou-Rode, Dec 9, 2008
    #2
    1. Advertising

  3. AAaron123

    AAaron123 Guest

    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

    "Joern Schou-Rode" <> wrote in message
    news:eek:p.ulw1kzwg31zpn8@marvin...
    > On Tue, 09 Dec 2008 17:21:38 +0100, AAaron123 <>
    > wrote:
    >
    >> 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?
    >
    > --
    > Joern Schou-Rode
    > http://malamute.dk/
     
    AAaron123, Dec 9, 2008
    #3
  4. On Dec 9, 5:21 pm, "AAaron123" <> wrote:
    > 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
     
    Alexey Smirnov, Dec 9, 2008
    #4
  5. AAaron123

    AAaron123 Guest

    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.
     
    AAaron123, Dec 9, 2008
    #5
  6. AAaron123

    AAaron123 Guest

    "Alexey Smirnov" <> wrote in message
    news:...
    On Dec 9, 5:21 pm, "AAaron123" <> wrote:
    > 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
     
    AAaron123, Dec 10, 2008
    #6
  7. On Dec 10, 2:10 am, "AAaron123" <> wrote:
    > 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
     
    Alexey Smirnov, Dec 10, 2008
    #7
  8. AAaron123

    AAaron123 Guest

    Thanks for working with me

    "Alexey Smirnov" <> wrote in message
    news:...
    On Dec 10, 2:10 am, "AAaron123" <> wrote:
    > 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
     
    AAaron123, Dec 10, 2008
    #8
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Luigi Donatello Asero

    Let or not let the text float

    Luigi Donatello Asero, Jan 15, 2004, in forum: HTML
    Replies:
    6
    Views:
    489
    Steve R.
    Jan 15, 2004
  2. Replies:
    30
    Views:
    3,442
    Ben C
    Mar 22, 2008
  3. fig000
    Replies:
    0
    Views:
    4,576
    fig000
    Sep 6, 2004
  4. Replies:
    1
    Views:
    295
    marss
    Feb 14, 2007
  5. devdoer
    Replies:
    5
    Views:
    92
Loading...

Share This Page