Set "background-color #F999" in iFrame

HTML & CSS
1

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.


<iframe width="880" height="1200" style="border: outset; [COLOR="#0000CD"]background-color:#F999"[/COLOR] 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

#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

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.

4

If you change the color code posted above to something like

<iframe width="880" height="1200" style="border: outset; background-color:#[COLOR="#FF0000"]999[/COLOR] ...

it colors the whole iframe background grey—at least in Firefox. I haven’t tested this on other browsers.

5

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.

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 :slight_smile:

6

Ralph . . . silly me - that is one I do know but somehow missed - short hand or long hand.

7

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

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

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

10

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