Inline Frames
What's all the fuss?
When it comes to talking about inline frames (iframes), most people seem to have one of two views.
They either think they are great, as an easy way to include a number of different pages within a single layout, though this is usually because it's the only way they know of to do what they want, but sometimes because they simply don't have the option of using any server side languages to include content such as PHP or CGI, or they think frames are pure evil and should be avoided at all costs.
I think the main reason for peoples hatred of iframes is that they are not supported by all browsers, well, a few years ago that might have been a valid argument but now, i would think you'll very rarely get a visitor to your page using a browser without frame support, except mabye the odd geek using lynx.
There's probably more chance of somebody visiting your page using a 600x480 resolution than there is somebody not supporting frames, and how many sites will work correctly at 600x480?, not many.
The main problem is the first group of people don't bother to take the time and understand how to use iframes properly, giving the second group of people more of a reason to hate the concept when they come across them being used on a website.
Simple Frame-Styling
The first thing is the frameborder element, something that is given a value of 1 by default and will create an indented border around your frame, which in most cases looks horrid, for example:
Setting the value frameborder="0" inside your <iframe> tag will remove this border completely
Next, the scrolling element. A frame will show horizontal and or vertical scrollbars if the content inside doesn't fit within the size of the frame, it's these scrollbars that make frames even less desirable to look at.
There's three values yes, no and auto with "auto" being the default value given if you don't add a scrolling="" element and meaning that the browser will decide if scollbars are shown depending on whether or not the content page is larger than the frame itself
Setting the value scrolling="no" inside your <iframe> tag will remove the scrollbars, but obviously if the content page is larger than the frame your visitors will not see everything, for example:
But by using fixed sizes in your content pages so they do fit the frame and remembering to remove the frameborder, suddenly it doesn't look so ugly anymore.
Other iframe elements that can be used to adjust the look of your pages are:
- hspace: hspace will define a space to the left and right of the frame, allowing you to keep it away from other content, eg: hspace="50" (size in pixels)
- vspace: vspace will define a space to the top and bottom of the frame, using both hspace and vspace is essentially adding a margin to the frame.
- margins: using margins eg: <body topmargin="25"> inside the content page will allow you to define the internal space within the frame, keeping it away from the edges.
There's other iframe elements such as the obvious ones like height and width (these can be defined in a stylesheet rather than the iframe tag itself) align (left, right, top, middle, bottom) and name but it's mostly the above that people seem to neglect making their frame-based sites look horrid and very "dated"
Finally, although they will be rare, it's best to allow for the fact that eventually somebody without frame support will visit your page, and the best way to do this is to make use of the <noframes></noframes> tags.
Any content included inside these tags will be shown to non-frame capable browsers but hidden from the rest, so you can use them to just display a message that frame support is needed to view the page or show them some alternative content.
So although iframes are a little dated, they can still be useful and not look that bad if a little thought is applied.