SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Set "background-color #F999" in iFrame

    Any ideas on how to set a background color for an iframe?

    In IE 8 there is a background color of white, however if I remove the background color code shown below the background color is still white.

    But - in Chrome much of the background is transparent along the inside top and bottom of the iframe.


    Code:
    <iframe width="880" height="1200" style="border: outset; background-color:#F999" src="http://www.searchpoint.net/Search/mapSearch.aspx?_account=idd&_new=1&org_id=carets&agent_public_id=SSCHRRIC_socal&sponsor_office_id=H631_SOCAL&master_uid=DDA3E921-85C2-488C-8B79-DA50DB9D19BA&criteria=<Search><OrgId>carets</OrgId><NELat>33.61304676018744</NELat><NELong>-117.8405570983887</NELong><SWLat>33.5843072580453</SWLat><SWLong>-117.88999557495118</SWLong><LocationType>zip%20code</LocationType><MidLat>33.5986770091164</MidLat><MidLong>-117.86527633667</MidLong><Zoom>14</Zoom><SearchType>1</SearchType><PolygonType>zip</PolygonType><LocationType>zip%20code</LocationType><Location>92625%20(Zip%20Code)</Location><MinPrice>500000</MinPrice><MinBeds>2</MinBeds><MinBaths>2</MinBaths><MinSqFt>1400</MinSqFt><Status>A,B</Status><oper_in_misearch_features_2>OR</oper_in_misearch_features_2><oper_in_misearch_features_3>OR</oper_in_misearch_features_3><RESPropertyType>SFR,CON</RESPropertyType><Features></Features></Search>"><p>Your browser does not support iframes.</p></iframe>
    Also I did some research and it appears that I cannot use CSS to set the width and height placement and other styles , etc., because . . ?

    I need to do that in the html code section for the iframe main page, or, can I declare an internal style sheet for that, or not?

    If so where and how?

    www.propertieswithstyle.com/cdmsearch.html

    As always - thanks much . . . Rick

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    background-color:#F999"
    #F999 is not a valid background color. Basically you either must use 6 letters/digits or a shorthand 3 digits.

    E.g. #999999 can be shortened to #999.

    What background color do you want?

  3. #3
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An iframe takes it's instructions from the page you are pulling it in from, not from your local html or css. You cannot do anything to what displays in the iframe with html or css. You might be able to do something with some javascript but I doubt it. And as pointed out the colour you were trying to display is not a legal colour code, but even if you fix it it still won't show up in the iframe.

    Frankly iframes are an ugly Microsoft idea which should be avoided in the first place.
    Ed Seedhouse

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Ed Seedhouse View Post
    An iframe takes it's instructions from the page you are pulling it in from, not from your local html or css. You cannot do anything to what displays in the iframe with html or css.
    If you change the color code posted above to something like

    Code:
    <iframe width="880" height="1200" style="border: outset; background-color:#999 ...
    it colors the whole iframe background grey—at least in Firefox. I haven't tested this on other browsers.

  5. #5
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,061
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Ed Seedhouse View Post
    An iframe takes it's instructions from the page you are pulling it in from, not from your local html or css. You cannot do anything to what displays in the iframe with html or css. You might be able to do something with some javascript but I doubt it.
    You can access and minipulate the iframe if and only if it's on the same domain as the website itself where the iframe is embedded in. If it's on another domain (even if that other domain is a subdomain of the domain the main website is on) you can not manipulate in any way using javascript.

    Quote Originally Posted by ralph.m View Post
    it colors the whole iframe background grey—at least in Firefox. I haven't tested this on other browsers.
    That's because the body of the iframe content document doesn't have a background set. If it did, you wouldn't be able to do this
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  6. #6
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    #F999 is not a valid background color. Basically you either must use 6 letters/digits or a shorthand 3 digits.

    E.g. #999999 can be shortened to #999.

    What background color do you want?
    Ralph . . . silly me - that is one I do know but somehow missed - short hand or long hand.

  7. #7
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ed Seedhouse View Post
    An iframe takes it's instructions from the page you are pulling it in from, not from your local html or css. You cannot do anything to what displays in the iframe with html or css. You might be able to do something with some javascript but I doubt it. And as pointed out the colour you were trying to display is not a legal colour code, but even if you fix it it still won't show up in the iframe.

    Frankly iframes are an ugly Microsoft idea which should be avoided in the first place.
    Ed . . . in lieu of an iframe what would you do? With an iframe at least I can keep the end user in my site (and my menus) while viewing another sites page.

    I'm not trying to change any elements within the iframe but behind the iframe.

    There is transparency (in Chrome only) showing through the iframe to my css background image for the page. Why only in Chrome?

    The differences between browsers is especially frustrating.

    Can I set an image the exact size if my iframe with a z number placing it under the iframe? I understand z layers but I've never used it in a page.

    With my limited knowledge I'm open to suggestions.

    Thanks . . . Rick

  8. #8
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    Ed . . . in lieu of an iframe what would you do? With an iframe at least I can keep the end user in my site (and my menus) while viewing another sites page.

    I'm not trying to change any elements within the iframe but behind the iframe.

    There is transparency (in Chrome only) showing through the iframe to my css background image for the page. Why only in Chrome?

    The differences between browsers is especially frustrating.

    Can I set an image the exact size if my iframe with a z number placing it under the iframe? I understand z layers but I've never used it in a page.

    With my limited knowledge I'm open to suggestions.

    Thanks . . . Rick
    This is what I've tried . . .



    #zimg { width:880;
    height:1200;
    background-color:#CCC;
    z-index: -1;
    }

    <div id="maincontent">

    <div id="zimg"></div>

    Had no effect at all.

    Interestingly however - when my page with the iframe loads in Chrome the iframe background is white for a split second and then the transparency appears.

    What does this mean?

    Thanks . . . Rick

  9. #9
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    See Attached two pages

    Here are the two mapsearch pages. One in IE 8 and the other in Chrome.

    You can easily see the transparency in the Chrome version at the top. Unacceptable.

    Any ideas?

    Thanks . . . Rick
    Attached Images Attached Images

  10. #10
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is what I ended up doing in my mapsearch.css page which is only for the map searches.

    I just added background: #666; to the maincontent <div>.

    I'm not happy with the method but I guess as long as it's only for the map search pages it will have to suffice.

    I haven't tested it on line yet - maybe I should so that first.

    Yep - it works from the server in Chrome.

    Hope it helps someone.

    #maincontent{ float:right;
    width:73.33%; /* 880px */
    margin-left:25%;
    background: #666;

    }

    Thanks everyone. Rick


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •