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.