SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

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

    Problem with iFrame and CSS

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


    Code:
    #outer 	{max-width:1200px;
    			 min-width:400px;
    			 width:100%;
    			 margin-right:8px;
    			 margin-left:8px;
    			 position:relative;
    			 margin-top:30px;
    }
    Code:
    <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

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


    Thanks much . . . Rick
    Attached Images Attached Images

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You can either do this:
    Code:
    #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:
    Code:
    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.

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

    <iframe> COMPLETE DISCONNECT . . . ?

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

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

  4. #4
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    <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


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
  •