Styling iframes with CSS

If you still haven’t heard, hear it now: FRAMES ARE DEAD – well, technically, they are more like the undead – the zombies of webdesign. They should be gone and forgotten but refuse to stay buried. It’s much better not to use them.

However, there may be a situation, where inserting a separate html document into your page makes sense. And there’s an app for that: Iframes (aka inline frames). This code inserts a basic page into an html page:

<iframe src="http://www.killersites.com/">
<p>Your browser does not support iframes.</p>
</iframe>

At this point, there is absolutely no styling applied to the iframe, and it looks like this. Note the line regarding lack of browser support. Iframes are supported by all the major browsers, but it’s a good idea to add this for the odd browser that doesn’t.

While I am a strong supporter of using the HTML strict doctype and writing validating, standard-compliant code – iframes will not validate, which leaves us with two options: Either suck up the iframe-related validation errors or switch to HTML transitional doctype for the pages with iframes.

CSS gives you the power to dress your iframe up a bit. The following attributes are available:

  • src (the URL of your iframe)
  • longdesc (this specifies the URL of the iframe, but is hardly supported and can just as well be ignored)
  • name (obviously, the name of your iframe)
  • height (the height of your iframe)
  • width (the width of your iframe)
  • frameborder (1 or 0 – 1 is for yes, 0 for no)
  • marginheight (determines the top and bottom margin of your iframe)
  • marginwidth (determines right and left margins of your iframe
  • scrolling (Do you want a scrollbar? Yes, no, or auto – ‘Yes’, is obvious. ‘No’ should not be used – what if someone does not see the entire content? If this is set to ‘no’, that viewer can never get to the hidden parts of what you’re inserting. ‘Auto’ lets the browser decide if one is needed and seems the best option here to me.)
  • (align) – I’m just mentioning this for completeness; it has been deprecated. Don’t use it.

So this inline CSS:

<iframe src="http://www.killersites.com" 
name="Killersites.com" height="400px" width="700px" 
frameborder="0" marginheight="20" marginwidth="35" 
scrolling="auto">
<p>Your browser does not support iframes.</p>
</iframe>

Gives you that. And if you add a bit more CSS to the frame itself:

iframe {
 margin-left: 95px;
}

you can position the entire frame where you want it.

This post was written by:

This entry was posted on Saturday, June 5th, 2010 at 7:23 pm and is filed under CSS Basics, CSS Misc, Killer CSS Tips and Tricks. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

10 Responses to “Styling iframes with CSS”

  1. admin says:

    Hi,

    I should point out that iFrames are widely used to create Ajax effects in a web page. For example: Google Maps makes heavy use of Ajax and reportedly, iFrames.

    If you are not sure what Ajax is, in a nutshell: it is a way to dynamically load new stuff (text, images) into your web pages through a secret backdoor that nobody will see open or close. Anyway, learn more about it on our ajax tutorial website:

    http://killerajax.com/

    Stefan

  2. Martie van Gass says:

    Good day, I am learning CSS. At this stage I’ve got a website that is in frames because the editing goes easier if you have to edit the menu only in 1 html page. How do I convert a frame page to a HTML CSS page so that I still only have to edit 1 menu page included in 10 different pages?
    Thank you
    Martie

  3. The best way to do that is to use PHP includes. Here is how: http://www.killerphp.com/articles/php-includes/.
    If you run into any problems or have questions, just post in the Killersites Forum: http://www.killersites.com/community/

  4. Viktor K. says:

    This is crappy HTML code.
    What you are referring to as CSS are inline iframe attributes, that are not part of CSS!
    Moreover you included the error to give the ‘width’ & ‘height’ attribute ‘px’-Values as the standard docs tell these attributes should only get numeric values. Pixel ist the standard unit. And adding ‘px’ makes the values invalid.

  5. Cristian says:

    LOL. Frames may be dead, but using iframes is one fo the most helpful techniques in web design. For example, using iframes you can load a header and a menu only once and handle dynamic content after that.

  6. There are frames and there are iframes. The post only says frames are dead – HOWEVER … Iframes have a different reason and purpose, and there’s nothing wrong with using them. Besides, I wouldn’t tell you something should NOT be used and then tell you how to do it.

  7. joyahmed says:

    The css code i frame is very nice but I can`t know active my website……….Now what i can do

  8. Andrea says:

    joyahmed, if you have specific questions, you get the best response posting them on the Killersites Forum: http://www.killersites.com/community/. The more specific you are, the better we can help.

  9. jama.jamazoka says:

    I’m thinking – is this you wrote that post ? Because I saw exactly word-by-word same article in few places over the Internet. Just check it out yourself at:

    OR google it

    “https://www.google.com/search?q=%22If+you+still+haven%E2%80%99t+heard,+hear+it+now:+FRAMES+ARE+DEAD+%22&hl=en&rlz=1G1GGLQ_ENUK346&biw=1240&bih=583&source=lnms&sa=X&ei=ol9LUdPqL4GUtAaRroDACw&ved=0CAkQ_AUoAA”

    • admin says:

      We wrote it … the link you sent was from an article posted years after we wrote it.

      Lots of thieves on the Web.

      Stefan