Problem with iFrame and CSS

[R Schreiber]

Please see attachment.

I would like to use CSS to set the dimensions for the iFrame AND the border around it.

I actually had it working four hours ago but have screwed it up and can't remember what I did!

Ideas . . .

#outer 	{max-width:1200px;
			 min-width:400px;
			 width:100%;
			 margin-right:8px;
			 margin-left:8px;
			 position:relative;
			 margin-top:30px;
}

<div id="srchframe"><iframe 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.51721118955668</NELat><NELong>-117.60555267333987</NELong><SWLat>33.43101155674051</SWLat><SWLong>-117.77137756347656</SWLong><LocationType>city</LocationType><MidLat>33.4741113731486</MidLat><MidLong>-117.688465118408</MidLong><Zoom>13</Zoom><SearchType>1</SearchType><PolygonType>city</PolygonType><LocationType>city</LocationType><Location>Dana%20Point,%20CA%20(City)</Location><MinPrice>$700,000</MinPrice><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,TWN,CTH,CON,TWN</RESPropertyType><Features></Features></Search></iframe></div>

CSS

#srchframe{background-color:F000;
			  float:right;
			  width:880px;
			  height:1100px;
			  margin-top:30px;
			  border:outset;
			  border-width:6px;
			  color: #666;
}

Thanks much . . . Rick

[RetroNetro]

You can either do this:

#srchframe iframe{
  background-color:F000;
  float:right;
  width:880px;
  height:1100px;
  margin-top:30px;
  border:outset;
  border-width:6px;
  color: #666;
}
</style>

Though as far as I know there is no need for the #srchframe ID. You can just do:

iframe{
  background-color:F000;
  float:right;
  width:880px;
  height:1100px;
  margin-top:30px;
  border:outset;
  border-width:6px;
  color: #666;
}
</style>

Though there could be some browser that will not interpret this correctly or exactly as others. Not sure. Hope it helps.

[R Schreiber]

I'm digressing backwards again. Yikes!

If I paste the address in a URL it displays perfectly.

But now, I get nothing but a white box with a frame around it!

Try it yourself and see. Just copy from the http: to the end and paste it into a browser so you can see what it's supposed to look like.

I'm NOT using any divs or classes now, just the <iframe></iframe>

Still no search map!


<div id="maincontent">

<iframe>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.65778123876185</NELat><NELong>-117.38445281982422</NELong><SWLat>33.54282543213428</SWLat><SWLong>-117.71472930908201</SWLong><LocationType>city</LocationType><MidLat>33.6003033354481</MidLat><MidLong>-117.549591064453</MidLong><Zoom>12</Zoom><SearchType>1</SearchType><PolygonType>city</PolygonType><LocationType>city</LocationType><Location>Coto%20De%20Caza,%20CA%20(City)</Location><MinPrice>$450,000</MinPrice><MinBeds>1</MinBeds><MinSqFt>600</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,TWN,CTH,CON,TWN</RESPropertyType><Features></Features></Search></iframe>

Thanks . . . Rick

[R Schreiber]

OK . . . I got it finally.

It was in the html side of it.

One thing I will say is that I don't think setting <iframe> widths, heights, borders, etc., work well using a divs or classes.

I think it would be easier but each time I try it, somehow it drastically shrinks the size of my intended iframe window.

I'm not sure what is doing this.

Would my . . .

outer div . . .

max-width:1200px;
min-width:400px;
width:100%;
margin-right:8px;
margin-left:8px;
position:relative;
margin-top:30px;

or . . .

maincontent div . . .

width:1200px;
min-width:400px;
margin-top:30px;

have anything to do with it?


or the placement of the <iframe> within them?

Right now I have the it like this in the html page:

<div id="maincontent">

<iframe width="880px" height="1200px"  border-width:4px style="border-style:outset"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.63677464910795</NELat><NELong>-117.484188079834</NELong><SWLat>33.55069420606524</SWLat><SWLong>-117.648983001709</SWLong><LocationType>city</LocationType><MidLat>33.5937344275866</MidLat><MidLong>-117.566585540771</MidLong><Zoom>13</Zoom><SearchType>1</SearchType><PolygonType>city</PolygonType><LocationType>city</LocationType><Location>Coto%20De%20Caza,%20CA%20(City)</Location><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</RESPropertyType><Features></Features></Search></iframe>

Thanks . . . Rick