iFrames – How to Remove the iFrame Border

An iFrame is a great way to syndicate content (text or images) on another site. It embeds a window within the host web page whose height and width can be adjusted by the iFrame code. When embedding the iFrame it displays a border around it.

Article – How to Create an iFrame

Creating an iFrame without showing the border

Here’s a web page displaying multiple flash slide shows using several iFrames

1. The Problem

When using the same flash files and html code for each slide show on the same web page the slide shows did not work. When image.xml (one of the flash files) was renamed to image2.xml to display the next slide show, it did not appear on the page.

2. The Solution

a) To display several Flash Slide Shows on the same web page I needed to create an iFrame for each slide show. I placed all flash files for each slide show in a separate folder, named them accordingly then uploaded them to the server ie

slidehow1
slidehow2
slidehow3
slidehow4

b) I created an iFrame for each slide show with different images for each one and wrapped it in a css box. I used a css box (instead of tables) so I can easily remove the border plus add padding between each slide show.

CSS

iframe {
border: 0px solid #ffffff;
}
.central-1 {
margin-left: 140px;
position: relative;
width: 400px;
border:0px;
background-color:#fff;
}
.central {
margin-left: 140px;
position: relative;
width: 400px;
border:0px;
background-color:#fff;
padding-top:240px;
}

c) Explanation

The CSS border code above removes the border.
The first CSS box (.central-1) has no top padding because it is the first slide show that appears under the text.
The second CSS box (.central) contains padding to create space between each slide show.

XHTML


<div class="central-1"><iframe class="border" src="http://compass.ihost-websites.com/slideshow1/" width="320" height="320"
frameborder=”0? scrolling=”no” align ="left" name=”myInlineFrame”></iframe></div>

d) Benefits of creating several iFrames on the same webpage

– helps the page to load faster than if the flash code for each slide show was inserted in the web page

– easy to add more sildes to each slide show if needed

– slide shows display the same as if the flash code was actually inserted in the web page.

This entry was posted on Tuesday, June 12th, 2007 at 9:02 am and is filed under Web Design . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

«
»

31 Responses to “iFrames – How to Remove the iFrame Border”

  1. Insecret Says:
    January 31st, 2009 at 7:50 am

    Hwo write this topic is THE BEST !!!!!!!

    THANK YOU A LOT

  2. Jeffrey Says:
    February 27th, 2009 at 6:18 am

    frameborder=”0″

    cheers

  3. Luke Says:
    March 11th, 2009 at 9:08 am

    cheers for this!

    it’s not often I use frames but every time I do I get the dreaded blue border and frameborder=”0″ slips my mind every single time!

  4. automotive floor jack Says:
    March 14th, 2009 at 7:50 am

    This is the first time I commented here and I should say you provide us genuine, and quality information for bloggers! Great job.
    p.s. You have an awesome template for your blog. Where did you find it?

  5. Mattis Says:
    April 15th, 2009 at 6:00 am

    Thanks
    Great post!

  6. sani Says:
    May 7th, 2009 at 3:32 am

    i add a frame. but it has some kinds of left padding i apply css to remove apddiing but nothing happend.

  7. brian Says:
    June 4th, 2009 at 1:26 pm

    thank you very much.
    your post helped me a lot.

  8. will Says:
    July 6th, 2009 at 4:26 pm

    thanks the frameborder=”0? did the trick http://www.what2fly.com

  9. ez rent a car Says:
    August 30th, 2009 at 8:47 am

    Thank you! That worked. Not I have to figure out how to remove the scroll bar. =)

  10. Murali Says:
    September 26th, 2009 at 1:16 am

    thanks you so very much…very helpful.

  11. daria` Says:
    January 3rd, 2010 at 4:18 pm

    thank you!

    ~daria`

  12. Joel nealy Says:
    January 4th, 2010 at 2:14 pm

    Im having trouble tucking twitter into an iframe.

    It automatically redirects to the twitter homepage as if the iframe is a gateway or a link.

    I want to conatin twitter inside the iframe and not have it redirect the whole web page to twitter.com

    any ideas?

  13. Herman Says:
    January 6th, 2010 at 8:32 am

    Joel..try the instructions in this article.
    http://www.drostdesigns.com/content-syndication-how-to-create-an-iframe/
    Let me know if it doesn’t work and I’ll do my best to solve it.

  14. Ramesh Says:
    February 22nd, 2010 at 2:22 am

    Dht’s Working But The Easy Way Ia Availible

    frame border=”0″

  15. Sue Says:
    April 7th, 2010 at 1:08 am

    Thank you! This has really helped a lot! I was able to remove the border using frameborder=”0″ and scrollbar using scrolling=”no” so I’m very happy. Not sure what the name=”some text here” actually does though, it made no difference to my iFrame (as far as I could see).
    Many thanks!

  16. TMFK - Simple Answer Says:
    April 28th, 2010 at 11:25 am

    The Code Above will show google in a borderless and scrolless iframe!

  17. Dr.Vet. Cumpanasu Florin Says:
    May 2nd, 2010 at 4:03 am

    I also need no margins between the iframe and the parent content. Still not working…

  18. Nick H Says:
    May 17th, 2010 at 2:31 pm

    frameborder=”0″ does not work in Firefox. Any ideas?

  19. khadar pasha Says:
    May 24th, 2010 at 7:47 am

    Thanks .Well you definitely gave me a sigh here!
    cheers

  20. Muz Says:
    September 20th, 2010 at 6:59 am

    As said above:

    Nick H Says:
    May 17th, 2010 at 2:31 pm
    frameborder=”0″ does not work in Firefox. Any ideas?

    ???

  21. heather Says:
    September 21st, 2010 at 1:45 pm

    frameborder=”0″ totally works.

    my syntax reads:

    be sure your quotes aren’t “curly”

  22. heather Says:
    September 21st, 2010 at 1:46 pm

    iframe frameborder=”0″ width=”100″ height=”24″

  23. AsMoDeUs Says:
    December 1st, 2010 at 6:53 pm

    i tryed this and it did not work frameborder=”0? scrolling=”no” so ive changed it to frameborder=”0″ scrolling=”no” like any normall coder would and now it works and on all browsers ENJOY

  24. Zbigniew Says:
    December 26th, 2010 at 10:45 am

    Try it: frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″
    enjoy:)

  25. BJ Says:
    January 28th, 2011 at 5:06 pm

    Hi,

    Tried the code frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ and there is no border in IE and Google Chrome, but still there is a border in FF. Any solution? Thanks!

  26. Ghost videos Says:
    April 29th, 2011 at 4:10 pm

    I have the same problem, i tried this solutions and there’s still blue board in IE!

  27. Karthikeyan Says:
    June 27th, 2011 at 5:02 am

    IE6 & IE9 seem to have problem with the CSS method. Its necessary to include the frameBorder=”0″ attribute to the IFRAME to get away. Any clues?

  28. Herman Says:
    July 1st, 2011 at 12:46 pm

    For Firefox I used this CSS and HTML to get rid of the borders and scroll bars..

    .iframe {
    border: 0px solid #ffffff;
    }

  29. Herman Says:
    July 1st, 2011 at 12:47 pm

    For Firefox I used this CSS and HTML to get rid of the borders and scroll bars..

    .iframe {
    border: 0px solid #ffffff;
    }


    <iframe src="http://www.domain.com/" width="900" height="1500" frameborder="0" scrolling="no" class="border" name="myInlineFrame"></iframe>

  30. moving home Says:
    August 1st, 2011 at 2:26 pm

    removal van…

    iFrames – How to Remove the iFrame Border…

  31. tranngoc Says:
    August 30th, 2011 at 10:51 am

    I used this: framespacing=”0″ frameborder=0 border=”0″ style=”border-style: none;width: 100%; height: 120px;” marginwidth=”1″ marginheight=”0″ It works well.

Leave a Reply