iframes

[DarrenPWS]

Hi all,
can anyone please tell me the advantages and disadvantages of using <iframe>s in my website.

I know how helpful they can be, but really do not know much about their negative side.

Thanks a lot
Darren Darkins

http://www.positive-websolutions.co.uk

[paulhiles]

Hi Darren,

On the one hand, iframes seem like the ideal solution for those browsers that cannot handle frames, but on the other, the downside with using an <iframe> in a design, is that it won't be a 100% compatible with all browsers. In particular, some older browsers will not recognise the iframe at all... in these cases you'd need to provide an alternate text that would display instead of the frame itself.

Also, looking to the future, if you're hoping to convert a design into an XHTML document, the XHTML 1.1 standard does not include the use of frames OR the <iframe> tag. My advice is to look into alternative methods with DIV layers and new CSS2 techniques.

Hope that helps,

Paul

[mikmik]

Good point, Paul. You can place content in a div box that has a set height, and give it a property of 'overflow:scroll', it will appear to spiders as just normal page text (because it is), and still work like an 'iframe'.

If you need to know more, post here again and I'm sure we can help.

[DarrenPWS]

Thanks guys,

the information that you have given me is extremely useful, and I will now be using this <div overflow:scrolling> technique when required.

One question about it though : do all browsers support this way of scrolling??

Thanks in advance.

Darren

[DarrenPWS]

Hi again, just to take full advantage of what you know, I was wondering if either of you knew how to get rid of the horizontal scroll bar when using the overflow:scroll command?? preferably a cross browser method??

Thanks, DD

[mikmik]

Hi Darren,
I found this page that shows browser support for layout properties, and it shows that all browsers above versions 4 support it except that in opera it may be problematic. Mozilla, IE and Netscape are all good on PC's, IE5 on mac might be iffy.
For the horizontal scroll, I think that using a % for width, instead of an absolute measurement, and narrowing the width so that the content doesn't spread wider than the alotted space on the page, is the only way to get rid of it.
There are so many ins and outs to understand in this area, but I am beginning to see how powerful CSS can be when used properly. But man, lots to be aware of!

[paulhiles]

For a good example of how to implement a DIV with scrolling set to auto, have a look at New Plastic Arts. The events box at the bottom right hand of the page has the appearance and behaviour of an iframe, however it has all been achieved with CSS.

This is a code snippet for the eventstable ID:

div#eventstable {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
overflow:auto;
height: 120px;
margin: 5px 0 0 0;
background: #fff;
width: 240px;
}

The page displays consistently in Mozilla Firebird and IE 6.0. it also validates as XHTML1.0 Strict!

Paul