SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Define an iframe in CSS

    Hi,
    Is it possible to define an iframe in CSS ?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    It depends what you mean exactly?

    You obviously can't define a real iframe because only an iframe can do that

    If you just want a box that has scrollbars and you can place content in it then you can just set a width and height of a div and then set overflow to auto. However you won't be able to dynamically load content (like an iframe does) in that element because CSS can't do that.

  3. #3
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is the code i am using, is there a better way?

    Code:
    <iframe style="position:absolute; top:250px; left:89px; z-index:100" id="dohop" FRAMEBORDER=0 scrolling="yes"
    src="xxxx-not-allowed-post-a-link?" 
    width="550px" height="350px">
    </iframe>

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Well you can set the position and size using css but you still need some attributes for it to work cross browser.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    iframe#dohop{
        position:absolute; 
        top:250px; 
        left:89px; 
        z-index:100;
        width:550px;
        height:350px;
      border:none;
    }
    /* to remove the border around the iframe in IE6 you need to add this to the actual iframe page
    html,body{margin:0;padding:0;border:none}
    */
    
    </style>
    </head>
    <body>
    <iframe id="dohop"  scrolling="yes" src="iframesrc.htm"></iframe>
    </body>
    </html>


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
  •