1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How can i get rid of the "white-space" around an iframe?

Discussion in 'HTML & JavaScript' started by phatzilla, Sep 11, 2011.

  1. phatzilla

    phatzilla Supreme Member

    Joined:
    Apr 9, 2009
    Messages:
    1,365
    Likes Received:
    1,017
    I'm trying to call a full-sized iframe without scrolling enabled, and its working fine except theres dead white space surrounding the entire frame, which makes it look ugly as hell. Is there anyway to remove this?
     
  2. xpwizard

    xpwizard Junior Member

    Joined:
    Nov 6, 2010
    Messages:
    198
    Likes Received:
    122
    Can you post the code your using? Or provide a screenshot so I can see what the problem is.
     
    Last edited: Sep 11, 2011
  3. artizhay

    artizhay BANNED BANNED

    Joined:
    Nov 21, 2010
    Messages:
    1,867
    Likes Received:
    1,335
    Like a margin? Padding? Or you mean the iframe is taller than the content, so the background is white...?

    The first two can be solved like so:
    HTML:
    <iframe src="blah.php" style="margin:0; padding:0; border:0;"></iframe>
    But yeah, post a screenshot.
     
  4. Nitros

    Nitros Power Member

    Joined:
    Jan 30, 2009
    Messages:
    573
    Likes Received:
    295
  5. phatzilla

    phatzilla Supreme Member

    Joined:
    Apr 9, 2009
    Messages:
    1,365
    Likes Received:
    1,017
    Hey sorry if it wasnt clear.

    Just try this html code (it's what im using)

    HTML:
    <IFRAME 
         SRC="http://www.blackhatworld.com" 
         WIDTH=100% HEIGHT=99% 
         SCROLLING=NO
         frameborder=0
         marginheight=0
         marginwidth=0
         hspace=0
         vspace=0
         >
    
    </IFRAME>
    
    And open www.blackhatworld.com side by side, and you'll see what i mean


    I've also added pictures -- the red line was added to show the border of the Iframe.
     

    Attached Files:

    Last edited: Sep 11, 2011
  6. artizhay

    artizhay BANNED BANNED

    Joined:
    Nov 21, 2010
    Messages:
    1,867
    Likes Received:
    1,335
    Use this:
    HTML:
    <html>
    <head>
    	<style type="text/css">
    	html, body {
    		margin:0;
    		padding:0;
    	}
    	</style>
    </head>
    <body>
    <IFRAME 
         SRC="http://www.blackhatworld.com" 
         WIDTH=100% HEIGHT=99% 
         SCROLLING=NO
         frameborder=0
         marginheight=0
         marginwidth=0
         hspace=0
         vspace=0
         >
    
    </IFRAME>
    </body>
    </html>
     
    • Thanks Thanks x 1
  7. phatzilla

    phatzilla Supreme Member

    Joined:
    Apr 9, 2009
    Messages:
    1,365
    Likes Received:
    1,017
    Hey artizhay,

    That works, except theres still white space left on the bottom (its gone on the top, right, and left sides though!) Any way to get rid of it?
     
  8. Abstroose

    Abstroose Elite Member

    Joined:
    Nov 20, 2008
    Messages:
    2,097
    Likes Received:
    3,475
    Occupation:
    Thai Boxer
    Location:
    UK
    Home Page:
    Change height from 99% to 100%.
     
  9. artizhay

    artizhay BANNED BANNED

    Joined:
    Nov 21, 2010
    Messages:
    1,867
    Likes Received:
    1,335
    Can I ask what the application is for this? Are you planning on having any other content on the page, or are you just trying to fill the screen with an external site?

    When it comes to displaying external sites, usually everyone turns to iframes because that's what people know. People forget, or don't know about, the original frame, and although it's old school, it will work better for your application, if your goal is to display an external site in its entirety.

    Try this out:
    HTML:
    <html>
    <head>
    	<title>My Site</title>
    	<style type="text/css">
    	html, body{
    		margin:0;
    		padding:0;
    		overflow:auto;
    	}
    	</style>
    </head>
    <frameset rows="100%, *" border="0" framespacing="0" frameborder="0">
    	<frame noresize="" src="http://www.blackhatworld.com/"></frame>
    </frameset>
    </html>
    That will display a whole site in a much more browser-compatible, user-friendly way. If you don't want scrolling, add scrolling="no" after the frame source parameter.

    The widths/heights CSS percentages you're using can cause problems in various browsers, and if you ever want to use scrolling, that will cause even more problems if you use an iframe. So check out the frame and see if that's what you're looking for. An example is at my site http://www.buymyskinid.com/ but the page that you see there is my CPA tracking link.
     
    • Thanks Thanks x 1
  10. phatzilla

    phatzilla Supreme Member

    Joined:
    Apr 9, 2009
    Messages:
    1,365
    Likes Received:
    1,017
    awesome man, that works great. Thanks!