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.

Comments

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

    THANK YOU A LOT

  2. frameborder=”0″

    cheers

  3. 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. 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. Thanks
    Great post!

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

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

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

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

  10. thanks you so very much…very helpful.

  11. thank you!

    ~daria`

  12. 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. 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. Dht’s Working But The Easy Way Ia Availible

    frame border=”0″

  15. 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. The Code Above will show google in a borderless and scrolless iframe!

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

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

  19. khadar pasha says

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

  20. As said above:

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

    ???

  21. frameborder=”0″ totally works.

    my syntax reads:

    be sure your quotes aren’t “curly”

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

  23. 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. Try it: frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″
    enjoy:)

  25. 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. I have the same problem, i tried this solutions and there’s still blue board in IE!

  27. 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. For Firefox I used this CSS and HTML to get rid of the borders and scroll bars..

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

  29. 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. I used this: framespacing=”0″ frameborder=0 border=”0″ style=”border-style: none;width: 100%; height: 120px;” marginwidth=”1″ marginheight=”0″ It works well.

Trackbacks

  1. moving home says:

    removal van…

    iFrames – How to Remove the iFrame Border…

Leave a Reply to Ramesh Cancel reply

*