Introducting CSS3 Colors

Defining colors in red, green and blue is supported by CSS3 in several ways.

Hexadecimal Values

You can declare the hexadecimal value of your red, green and blue with hexadecimal values ranging from 0 to 255 in the format of 00 to FF, put the three together preceded by a hash (#), and that’s the color. For example, #FFFFFF for complete saturation of red, green and blue comes out white, #000000 for lack of any color comes out black. A mix and match of hexadecimal values from 0-255 using any two characters A-F0-9, case insensitive, for the red green and blue values, combined together in the order of red, green and blue can create millions of colors.

Did I mention case-insensitivity? It doesn’t matter if you use #FFCC00 or #ffcc00 – the value syntax is case insensitive.

The RGB hexadecimal notation also has a shorthand, of #RGB, where the R, G, and B are a single character, A-F0-9, case insensitive, put together, preceded by a hash mark. Identical to the long format, the browser expands the RGB value, such as #369 to #336699.

All browsers support all of the hexadecimal values, both short hand and long hand. There used to be a discussion of web-safe colors. Web face colors has been a non-issue, even for hand held devices. It is safe to use any color combination (may not be pretty or legible, but it will render).

rgb() syntax

Instead of using the hexadecimal values for RGB, you can use the base 10 value for your mix of red, green and blue, or even percentages. Instead of preceding your color with a hash tag, the syntax is the keyterm ‘rgb’ follow by your comma-separated values in parenthesis.

#FFFFFF = #FFF = rgb(255, 255, 255) = rgb(100%, 100%, 100%).

All browsers support all of the RGB color combinations in general. Some browsers allow the mixing of rgb() numbers with percents, but the specifications clearly state that this is not expected behavior, and not all browsers support it, so avoid mixing value types.

What’s new?

New in CSS3 is RGBA. RGBA is similar to RGB, but with an added A for AlphaTransparency. The rgb() specifications were extended in CSS3 to include ‘alpha’ to allow specification of the opacity of a color. The first three values are still red, green, blue. Thee fourth value is the opacity level, 1 being fully opaque, 0 being fully transparent, and any float being everything in-between.

rgb(255, 255, 255) = rgb(100%, 100%, 100%) = rgba(255, 255, 255, 1)

The above are all equal to white, since 1 means fully opaque. But don’t get confused: rgba(0,0,0,0) is transparent, not black, because the level of opacity is none.

Unlike RGB, there is no hexadecimal notation for RGBA. Unlike RGB, the IEs don’t understand RGBA. IE8 correctly ignores properties with rgba() in the value. IE6 and IE7 overwrite values, without understanding them, and generally inherit the default value when confused.

RGBA is going to be extremely useful as drop shadows on boxes and text become better supported. While it is very common to see text-shadow: 3px 3px 3px #CCCCCC; or text-shadow: 3px 3px 3px #000000;— including a gray or black shadow, the effect looks much better if you write text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4); While the color #CCCCCC and rgba(0,0,0,0.4) look similar when solid over a white background, when included as a shadow, the #CCCCCC starts off as a solid grey, which looks a little off. The RGBA color is always translucent, which looks MUCH better.

Hue, Saturation and Lightness

HSL stands for hue, saturation and lightness. The HSL format simplifies color palette creation as you can pick a hue as the base, then manipulate the lightness/darkness and saturation of the hue selected.

HSL is a new color type added in CSS3, standing for hue, saturation and lightness. The syntax is similar to rgb(), but instead of including the values for red, green and blue, the color value accepts values in degrees from 0 to 359 for hue, and percentages for saturation and lightness, with 50% being the norm for lightness and 100% being the norm for saturation.

Lightness of 0% will be white, 50% will be the actual hue, and 100% will be black. Saturation of 100% will be the hue, and saturation of 0 will give you a shade of gray from white to #808080 to black depending on the lightness.

Up Next

In part 2, we’ll cover hsl and hsla in greater depth.

Making IE recognize HTML5 elements

IE6, IE7 and IE8 don’t recognize the HTML elements. This causes a major problem when you’re using the HTML5 elements, such as ‘aside’, as part of (or your complete) selector in your CSS. Add this snippet either in your HTML or as a condionally included file, and IE will be able to handle your HTML5 elements as selectors in your CSS, and as members of your DOM in javascript. (thanks to John Resig for the inspiration)

<!--[if IE]>
<script type="text/javascript">
var html5elmeents = "address|article|aside|audio|canvas|command|datalist|details|dialog|figure|figcaption|footer|header|hgroup|keygen|mark|meter|menu|nav|progress|ruby|section|time|video".split('|');
for(var i = 0; i < html5elmeents.length; i++){

Printing HTML5 in Internet Explorer: where HTML5 is not supported

The code snipped above does wonders for enabling the various Internet Explorer’s to understand HTML5 elements as element selectors for scressn media, it does nothing to enable print CSS. The above javascript doesn’t cure the ‘print’ issue. Jonathan Neal has come up with a javascript solution to the IE HTML5 print issue.

IE Print Protector is a javascript file that allows you to print HTML5 pages in Internet Explorer, helping IE render HTML5 elements correctly, both on screen and in print.

Introducing @font-face

@font-face, a feature that has been talked about since 1998, is finally here! Nope, it’s not a twitter ID. @font-face is a component of CSS3 that allows the designer/developer of a web site to include fonts that are not installed on the user’s computer.

Web site design has been hampered by the limited number of fonts available to most clients. Designers have been using image replacement and methods such as sIFR and Cufón to make up for limited choices in typography. If designers want to ensure their designs look almost identical for all users, they’re limited to the few font sources that are known to be installed on almost all computers.

Wait. Let’s make that sentence past tense. “If designers wanted to ensure their designs looked almost identical for all users, they were limited to the few font sources that were known to be installed on almost all computers.” There is now a solution! We are no longer limited to Arial, Helvetica, Georgia, sans-serif!

@font-face enables the developer/designer to use any (with legal limits) font family on a web site by downloading the font file onto to client computer, and then declaring it as you would any font-family.

@font-face has been supported to some extent for years. It was in the CSS2 specifications. Microsoft implemented @font-face in Internet Explorer 4, but, as is typical of Microsoft, used a proprietary font format format (EOT). Due to copyright and legal issues, @font-face was dropped in the CSS2.1 specification. But, now it’s back. And it’s supported. It is expected to be in the W3C CSS3 specification when that finally gets finalized. Assuming that it will be in the CSS3 specification, all other browsers (Opera, Webkit, Mozilla) support @font-face with an implementation that supports formats like TTF and OTF. IE continues to support only the EOT format. Webkit for mobile (think ‘iPhone’) supports only SVG.

There are two steps to using the font of your choosing in your CSS file: 1) you must first declare your intention to import a font by using the @font-family syntax, telling the browser how you are going to reference the font (what name you will use to refer to the font), where to download the file, and what format the font is in. 2) You then have to include the font name in a font-family declaration, just as you would include Helvetica, Georgia or "Times New Roman".

The syntax for the @font-face implementation is:

@font-face {
  font-family: yourNameForTheFont; /* required */
  src: source;						/* required */
  font-weight: weight;				/* optional */
  font-style: style;				/* optional */

The source takes both the file name source and the format type. The source can take several formats. In addition, you can declare more than one source. If the browser doesn’t find the first source, it will go for the next source, and so on, until it either finds a source, or it runs out of sources. As withe all CSS file references, the URL should be a relative or absolute path. If relative, it should be relative to the CSS file.

Example formats include:

@face-font {
     font-family: 'My Font Name'
     src: url('../fonts/makeUpSomethingElse.eot');
     src: local('Edwardian Script ITC'),
          url('../fonts/EdwrdScrpItc') format('opentype'),
          url('../fonts/GaelicWimsy') format('svg'),

It is not enough to declare the creation of the font. You have to use it. Once you’ve downloaded the font and assigned it a font-family name, you can use that name as you would any other font name as the value of the font-family property

.mySelector {
    font-family: 'My Font Name', Arial, Helvetica, sans-serif;

Hurdles to consider when considering implementing @font-face

Yes, @font-face is finally supported in all browsers. But implementation isn’t so simple. There are several hurdles to consider and overcome to ensure that your implementation works, looks good, provides a good user experience and is all legal:

  1. Different formats for different rendering engines and devices

    While all browsers support @font-face to some extent, we still have browser support and compatibility issues to contend with. Most modern browsers support both the TTF and the OTF format. Firefox 3.6+ supports WOFF, a web-only font format. As mentioned earlier, Safari for iPhone only accepts the SVG format. And, we’re stuck with IE only accepting the EOT file format. There are also some rendering differences in those various formats.

  2. Huge file sizes

    Though not exactly a hurdle to implementation, font file sizes are a concern to keep in mind when it comes to user experience. Font files can be huge. Some formats are way larger than others. An embedded font means you have to download to use. A source with simple lines, like Arial or Helvetica, may weigh about 16 – 20kB. More complex fonts, with complex strokes, that you’re more likely to want to include, may be over 200kB in file weight. And remember that you may need to download the bold, italic and bold-italic versions of your font


  3. Delay in rendering

    Depending on the file size of your font file, and whether the font is already cached in the client browser, embedding fonts can cause the browser to rewrite the page. In our above code example, the page may render with Arial, Helvetica or other sans-serif font, then redraw the page when the font file is successfully downloaded.

    Embedded fonts do not always show immediately . The delay in rendering depends on the browser and whether the fonts have been loaded in cache or not. As such, text with embedded fonts as the font family may take a moment to display or display first with a system font, as the embedded font is loaded.

  4. Legal implications of font usage

    To allow the downloading of a font, you must have a web-font license for the font! It’s not enough that you purchased a font and have a right to use it for personal use with any application on your own computer, including production of print material for distribution. You have to have a license or other permission to distribute the font file itself, since, in effect, this is what you are doing with @font-face. Check the Web site you are downloading or purchasing the font from, or the documentation that comes with the font. Only embed fonts that have the appropriate licenses.

Not a hurdle, but something to be aware of:

For security reasons, some browsers (like Safari) ask the users if they are alright with downloading fonts from the internet – so that is a user experience consideration as well.

Tips for @Font-Face

  1. Fallbacks for browsers that don’t support @font-face: Depending on what font you choose, your default fonts may not look right at that font-size. Using Modernizr can be helpful in controlling the appearance when @font-face is not supported. For example, if you use an expanded font, such as Impact, or a very condensed font, fallback fonts such as Arial or Verdana can break your layout. With Mondernizr you can tell the browser to user larger or smaller font-sized if the browser doesn’t support @font-face, or even tell the browser to user sIFR, Cufon or any image replacement method for non supporting browsers only.

    .fontface  h1 {
      font: 16px/24px 'My Font Name', Arial, Helvetica, sans-serif;
    .no-fontface  h1 {/*
      Rules for sIFR/Cufon or for an image replacement method of your choice, or a better font size for Arial and Helvetica.
    .no-fontface  h1#myID {
    	background-image: url(imagereplacement);
  2. Include default fonts in every font declaration: Do not forget to include default fonts in your font-family declaration. Puts the declared font-family name of your downloaded @font-face embedded source, and follow it with the default alternatives (arial, helvetica, sans-serif).

  3. Include font variants only if needed, but do include them if used: Check which variants of the font you need for your site. Include the italic, bold and italic bold font if you are going to use it. But don’t included more than you have to! You don’t want the user to have to wait for the download of a font if that font is going to be unused.
  4. Check out the following resources:

Clearing Floats

The most widely used method of clearing floats uses the addition of an element, generally a <br class="clearfix" />, to clear both left and right. While it is the most ubiquitous method, even included in the Adobe Dreamweaver CS3 templates.

.brclear { 
     font-size: 1px;
     line-height: 0;

Listing 1: CSS from the Dreamweaver template CSS.

These fixes use a break with the classes of .brclear and .clearfix respectively in the markup as a clearing element. This fix works great: the CSS provided ensures that the break does not disturb the layout by taking up any space on the page. Yes, it works great, but it has two major problems:

  1. The addition of non-semantic, purely presentational elements to the HTML
  2. The inclusion of a <br> to your code inhibits you from not breaking should your design change.

While it’s not "illegal" to include non-semantic code, my argument has always been "<br> is only for poetry," and I avoid using it other than to intentionally break a paragraph into two lines for semantic reasons. There are several ways of clearing a float *without* adding a <br> to clear your float. In this tutorial, we’ll go over these four.

  1. Clearing the next element
  2. Floating the parent container
  3. overflow: hidden
  4. Generated content

Because of cross browser issues, and for general markup reasons, different methods are more appropriate for certain situations. We will cover several issues, but not all. Think of this as a guide, not a rule book, for clearing floats.

Clearing the next element

The easiest way to clear a float is to add a clear to the next element in your mark up.

<div class="floatLeft">content...</div>
<div class="floatLeft">content...</div>
<div class="floatLeft clearBoth">content ...</div>
.floatLeft {
     width: 33%;
     float: left;
.clearBoth {
     clear: both;

Listing 2: Clearing via the next element in the page.

This is the simplest method, and great for simple float clearing. In listing 1, all the div’s are one-third of the width of the parent element. We clear on the third div. Had we not cleared the third div, the three divs would have all been on one line, taking up only 99% of the parent element’s width.

Note that this is just an example. The div with the clearBoth class could have been any element coming after the last floated element, and could have had any class name, as long as the class had the property/value of clear: both; in your CSS. I used these class names to make it more obvious what we were trying to achieve. It is recommended to *not* use class names based on appearance, and to opt for class names based on function.

This method works most of the time, and is an easy solution that keeps you from adding a bunch of non-semantic elements simply to clear floats. However, it doesn’t work for everything you may want to do. When you float an element, and then clear an element with another floated element, as we did in Listing 2, the cleared element will drop to the next line, but the parent element will not grow to encompass your floated element unless you also float the parent (more on floating the parent below). If your clearing element is not floated, this method does work.

And, of course, there are bugs with both floating and clearing floats in IE6 and IE7. Bugs include a bug in IE7 where a non-floated element with a width will overlap a floated element within a non floated element that has a height declared; a bug in IE7 where the margin-top of the non-floated clearing element will be added to the margin bottom of the element it is clearing; and a bug in IE6 where the floated element will flash on and off the screen.

Although floating the next element may not work for every float you want to clear — especially if your float is the last element on the page, or if it causes one of the numerous bugs — it works in many situations, and is simple to implement. In practice, I tend to add {clear: both;} to main sections of my page, such as on my #topnavigation, #content and #footer divs.

Floating the parent container

To clear a float, you can float the parent element, as long as the parent has a total width equal to 100% of the width of the page or it’s own parent. The floated element will be at least as tall as it’s tallest floated child. And, since it has a width of 100%, the next element on the page will automatically be cleared.

To understand the importance of the W3C rule that a floated element is at least as tall as the tallest floated element contained within it, you need to understand the basic of floats.

A float is an element that is laid out according to the normal flow, then taken out of the flow and shifted to the left (if floated left) or right (if floated right) as far as possible. When you float an inline element it becomes a block. Content can flow down the right side of a left-floated element and down the left side of a right-floated element, unless prohibited from doing so by the “clear” property, or because the width of a float is 100%. Floated elements will move to the left or right until their outer edge touches the containing block edge or the outer edge of another float. The top of a floated element will be at the same level as the float next to it, if there is enough room, or at the bottom of the preceding block if the element was originally inline. If there isn’t enough room on the current line for the floated box, it will move down, line by line, until a line has room for the float. (If two floats don’t appear to start on the same line, it is usually because the padding is different.)

Because a floated element is no longer in the normal flow of the document, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist. If a parent or containing element only contains floats, the parent element will have no height, as if it were empty. … A float can overlap other boxes in the normal flow. [If you float the parent] give it a width, or it will shrink to be as narrow as possible.

IE8: The Good: CSS 2.1 Selector Support in Internet Explorer

Internet Explorer 8, IE8, was released on March 19, 2009. Depending on your statistics source, as of July 2009, IE8 already has 17.8% of the browser market share. In the last section we provided an overview of what is new, good, bad and different in IE8. In this article, we take a deeper look at CSS 2.1 support in the IE8 browser, and compare IE8’s CSS support to IE6 and IE7.

CSS 2.1 Support

As mentioned in the overview, IE8 has complete support for CSS2.1. IE8 is the first browser to support all of the W3C CSS2.1 specifications, and currently has the best support of any browser (including Firefox, Safari and Opera) of the CSS 2.1 specifications. One may think (though no one outside of Microsoft does) that this makes IE8 the best browser, but it doesn’t. IE8 may be the first IE to support CSS 2.1, but Firefox, Safari, and Opera have already moved on to supporting features proposed in CSS3.

Internet Explorer 8 supports all CSS 2.1 Selectors

By having complete support for CSS 2.1, IE8 has a lot of improvements over IE7 and IE6 in terms of CSS support. Below are listed all the individual CSS2.1 selectors, with a brief explanation of how IE6, IE7 and IE8 compare. You’ll note that IE8 supports ALL of the selectors listed. While not shown in this grid, Firefox, Opera and Safari all support all the CSS 2.1 selectors, and have been doing so since previous releases.

By having complete support for CSS 2.1, IE8 has a lot of improvements over IE7 and IE6 in terms of CSS support. Let’s look at the differences:

Pattern Meaning IE6 IE7 IE8



Dynamic pseudo-classes are generally thought to be applicable to links and form elements since IE6 and IE7 don’t support them on other elements. IE8 supports pseudo classes correctly on ALL the elements.



The ‘:before’ and ‘:after’ pseudo-elements can be used to insert generated content before or after an element’s content. Completely ignored by IE6 and IE7, it is supported by IE8. See generated content


Universal Selector: any element *{}. While all browsers support this selector, it’s best to use it sparingly if at all.


Type or Element selector: a specific element, such a p, td, ol {}


Class selector: a class or several classes, such as: .myClass {}

IE6 does not support dual class names. For example, .one.two {} will target <p class="one two"> in all modern browsers, except IE6, which ignores it. Except for this exception, class selectors are supported by all browsers.


ID Selector: Matches an element based on it’s ID: #myId {} Supported by all browsers


Descendant selector: Matches any element F that is a child of element E

E > F

Child Combinator: Matches element F that is the first element child of element E

E + F

Adjacent simbling selector: Matches element F that is a the next sibling of element E. label input {} will match any input that follows a label such as <label>a label</label><input type="text">.

Note that there is a sibling selector – E~F – in CSS3 that is supported by IE7 and IE8, but not IE6


Attribute Selector: Matches if the element matched has the attribute: input[type] {}.

The exception to the support is that the browsers won’t match the element that has the attribute if the attribute value is empty


Attribute Selector: Matches if the element matched has the attribute: input[type=checkbox] {}.


Attribute Selector: Matches if the element matched has the value of the attribute value: a[rel~=nofollow] {} should match <a href="..." rel="noindex nofollow">.


Attribute Selector: Matches if the element matched has the attribute with the value has atleast the val as part of the value: div[lang|=en] should match <div lang="en-us">

E :first-child

The CSS selector should match the inner div element, because it is the first child of the outer div element Comments are not elements, so they should not be considered when determining the first child.


Non visited link (non included above with pseudo classes since only links can be links)


Visited link (not included above with pseudo classes since only links can be visited)


Matches element of type E if it is in (human) language c (the document language specifies how language is determined).


First letter pseudo-element: Matches the first letter of the element E.


First-line pseudo-element: Applicable to block-level elements, inline-block, table-caption or a table-cell, targets the contents of the first formatted line of a element.

Note that Opera 9.6, Firefox and Safari all support all of the above CSS selectors.

Full Support
Χ No Support
Δ Some support, but not full support

IE support of :hover pseudoclass

The :hover pseudo-class enables you to alter the presentation of an element when the user mouses over the element. For example, similar to Excel, you can change the color of a table row when the user mouses over a table rows using only CSS. IE6 and IE7, only support the :hover pseudoclass on links (the <a> tag) and some form elements. One very popular use of the hovering is drop down menus. In the past, because of IE6 and IE7, javascript had to be added to make sub-navigation appear on hover in those browsers. IE8, like all other standards compliant browsers, now supports the :hover pseudoclass on all displayed elements.

IE support of :before and :after pseudo-elements

The :before and :after pseudo elements enable you to add content before and/or after specified elements. For example, you can add special characters in front of list items, thereby not limiting yourself to the limited number of default list-style-types. IE6 and IE7 have no support for these pseudo-elements. IE8, however, has fully compliant support for these pseudo-elements. In fact, IE8 has better support for the content property of these pseudo elements than any other browser: better support even than Firefox.

Using differences in CSS selctor support to target browsers

Users of Community MX are encouraged to use conditional comments to target different versions of Internet Explorer. You can also use CSS selectors to target specific browsers. IE6 and IE7 have limited support for CSS 2.1 selectors. IE8 supports all of CSS 2.1 selectors, but very limited support fo CSS 3 selectors. On the other hand, all other non-IE grade-A browsers have support of several CSS 3 selectors. You can use these difference to your advantage to target specific browsers. In the last section, we provided one hack:

p.myclass {
color: green; /* all browsers */
body:first-child p.myclass { /* IE8 and all CSS 2.1 compliant browsers */
color: blue;
} body:last-child p.myclass { /* CSS 3 supportive browsers */
color: red;

This IE8 CSS filter targets all browsers with a regular element.className selector to target all paragraphs with the myClass class. It then targets all CSS2 compliant browsers with the CSS2.1 pseudo-class. It then filters out IE8 but using CSS3 to target all modern, non-IE browsers. It’s best not to use it, but it is important to understand how CSS can be used to filter browsers so you can follow other people’s code.

Up Next

In this section of IE8: the good, the bad, the ugly (and pretty), we’ve covered IE Support for CSS selectors. In the next section wel will look at IE’s support of CSS 2.1 properties and values of interest.

Introducing IE8: The good, the bad, the (not so) ugly

Browsers come out every day. Webkit has a nightly build. Wireless devices come with their own, often unique, browsers. Even with the plethora of available browsers, Internet Explorer, a browser that is not regularly updated, has over 55% of the browser market. Internet Explorer 6 (IE6), which came out eight years ago, still holds 9% (between 6% and 18%, depending on where you look) of the browser market share. IE8 was released only in March 2009, and by July 2009, it already had 17.8% of the browser market share.

In this article, we take a look at the IE8 browser, and cover some tips and tricks to make sure your sites look good in both old and new browsers. Will cover many of the topics hilited below in greater depth in the next sections of the "Welcome to IE8" series.

CSS 2.1 Support

IE8 has complete support for CSS2.1. In fact, IE8 is the first browser to support all of the W3C CSS2.1 specifications. IE8 passes the Acid2 browser test. You can learn more about the Acid2 test from the web standards project. In brief, it’s test page designed to expose browser CSS2.1 rendering flaws, including testing transparent PNGs, generated content, the box model, and positioning, among others. While other browsers have been passing this test since 2005, Internet Explorer didn’t pass the Acid2 test until the release of IE8 on March 19, 2009. I guess late is better than never.

Internet Explorer 8 supports all CSS 2.1 Selectors

By having complete support for CSS 2.1, IE8 has a lot of improvements over IE7 and IE6 in terms of CSS support. We will take a look at the individual CSS2.1 selectors, and how IE6, IE7 and IE8 compare later in this series. The important things to note are that IE8 supports the :hover pseudo class on all elements, not just links as in previous versions. IE8 also supports the :before and :after pseudo-elements, along with the CSS content and counter properties and values. See CSS3 Selectors and Browser Support for a grid of both CSS 2.1 and CSS3 selector support in all grade A browsers. We’ll be covering all the CSS2.1 selectors in the next section of this series.

Internet Explorer 8 supports all CSS 2.1 Properties and Values

With IE8’s complete support for CSS 2.1, Microsoft Internet Explorer has finally entered the realm of "standards compliant" browsers. IE8 has made great improvements over IE7 and IE6 in terms of CSS property and values support, almost completely supporting the CSS 2.1 specifications. IE8, however, like IE7 and IE6, has no support for any CSS3 properties or values. We will take a deeper look at CSS2.1 properties and values later in this series. In addition to supporting the W3C boxmodel (padding, width, margin) which is discussed next, some hilites include IE8’s complete support of outline, content, z-index, border-spacing, caption-side and empty-cell and support for more values of the display, list-style-type and white-space properties. See my list of CSS properties and values and browser support for a more detailed list of all the properties, values and browser support. We’ll go into greater detail on some of these CSS improvements in the next sections of this series.

Internet Explorer 8 supports the W3C Box Model

Microsoft finally got the W3C box model correct. While you may disagree with the W3C box model, and may think Microsoft, not the W3C, got it right, it is important to follow the standards.

IE8 and all non-IE grade-A broswers use:

total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

but IE6 and IE7, when not in browser standards compliant mode use:

total width = margin-left + width + margin-right

If you really love the IE box model, you can still implement it with:

-ms-box-sizing: border-box;

That’s about all we need to know about the box-model and IE8, so I will not be elaborating on this in future sections.

IE8 Developer Toolbar

IE8 comes with a developer toolbar. The developer toolbar is an improvement on the debugging tools of previous IE versions. It’s an apparent imitation of the Firebug extension for Firefox, but not as robust. Similar to Firebug, you can highlight an element and can edit CSS on the fly. The CSS module informs you of inherited CSS and current values (in reverse order from Firebug). The CSS panel has check boxes next to each css property so you can turn on and off that property.

IE7 Compatibility View

The IE8 chrome provides a button to enable IE7 compatibility view. Compatibility View forces Internet Explorer 8 to display content as if the user were using IE7, with all of IE7’s quirks, hacks and errors.

The weird thing about using this button is that Microsoft actually keeps tabs on it: information is sent to microsoft whenever you press that button, unless you set your preferences otherwise, and lets MS know that "a lot of people are switching rendering modes" for that domain. Microsoft actually keeps a list of websites that these staticstics "prove to them" are best displayed in Compatibility View. Microsoft construes our clicking of that IE7 compatibility view button as feedback that the site doesn’t render right in IE8.

Forcing IE7 of IE8 rendering mode

As mentioned above, IE8 provides the user the ability to change how they view websites: providing the ability to switch back and forth between IE8 and IE7. You can override this, and force the site to be rendered either as IE8 or IE7 (your choice) within the IE8 browser, disabling the IE7 Compatibilty view botton.

To force IE8 rendering mode:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

To force IE7 rendering mode:

<meta http-equiv="X-UA-Compatible" content="IE=7" />.

IE8 bugs

IE8 Disappearing Page Bug: If you put two adjacent nodes, both positioned absolutely, and set only one of x- or y- positioning, you may get a blank page.

IE8 CSS Hack

This IE8 CSS hack uses the star hack to target IE7 and lower, but you can use any other of the many IE hacks to target older IE browseres.

p.myclass {
color: green;
*color: red;
body:last-child p.myclass {
color: blue;

Conditional comments still work in IE8. Just note that if you used the conditional comment of

<!--[if IE]>
  IE only information here

The above will also be read by all Internet Explorer versions, past current and future. If you’ve included this in past websites, check to make sure your sites still work. If you find issues, simply change the [if IE] to [if lte IE7] for if less-than or equal to IE7.

Other Features:

  • Full ARIA (accessible rich internet applications) support
  • hasLayout is no longer a factor
  • <object> nesting, or fallbacks, has been implemented correctly. See the HTML Object element for more information.
  • Native JSON (JavaScript Object Notation) support
  • The ‘style’ property is available via the DOM
  • Supports getElementByName(‘formElementName’);
  • CSS styling of the <legend> element is now supported
  • Supports data URI schema value. Wikipedia does a good job of explaining data URI schema.

::before and ::after: Generating Content

In this section we learn about the different types of content that we can generated with CSS using the content property and its various value types. You’ve likely only touched upon the CSS content property, adding a simple string before or after an element. The content property can take many more values that just a simple string: you can add text, images, quotes, special characters, even images to your page using the content property to generate content in your :before and :after pseudo-elements. In this section we take a deeper look into the various values of the CSS content property.

Generated content is now supported in IE8 and all other modern browsers, so it makes sense to learn. There is an archaic table of browser support for the various values of the content property below (see listing 8).

Values of the CSS content property

The CSS content property can take as its value

  • none
  • normal
  • <string>
  • url
  • open-quote
  • close-quote
  • no-open-quote
  • no-close-quote
  • attr(attribute)
  • counter(name[, style]).

In this section of the series, we will discuss all of these values. We will only touch upon attr(attribute) and counter(name) in this section, as we will dive deeply into those two value options in the next section of this series..

Definition and purpose of each value of the content property

The CSS content property can take as its value none | normal | <string> | url | open-quote | close-quote | no-open-quote | no-close-quote | attr(attribute) | counter(name[, style]). Values have the following meanings:

  • content: none;

    none: When content: none; is included, the pseudo-element is not generated. This does NOT work in the current version of Safari (or Opera), nor is it expected to be supported in the next release of Safari. The solution to fix this which works in all modern browsers is to define the value as an empty string: content: "";. The two quotes with no content between the quotes is called an empty string. For example, some browsers automatically add opening and closing quotes to the <q> element. To override this default presentation, include q {content: "";} instead of q {content: none;}, so that all browsers override the default <q> presentation.

  • content: normal;

    normal: The ‘normal’ value, according to the W3C specifications, is supposed to “compute to ‘none’ for the :before and :after pseudo-elements.” To me, this specification is unclear. Is it supposed to compute to ‘none’ unless the default browser rendering includes content? The only element where interpretation of this value is relevant is the <q> or ‘quote’ element. In this case, the ‘normal’ value is handled differently in different browsers. Safari and Opera show the default content of quotes encompassing the text in between the opening and closing <q> tags. IE8 and Firefox do not show the quotes: computing to ‘none’. In the grid of support below I put support for Safari and none, and Opera as ‘iffy’, since my take is that Opera misinterpreted the deflation: Opera does compute to ‘none’ for most elements, but leaves quotes around the <q>, which is “normal”, but not the correct value for ‘normal’ according to the W3C.

  • content: "Estelle: ";
    content: "\00a3 "; /* includes '£' */

    string: The values of content can be a string encompassed in quotes. Including a string value will add your string before or after the element (depending on which pseudo-element is used). Strings can either be written with double or single quotes: the opening quote needs to be the same type of quote as the closing quote.

    If your string includes a quotation mark, make sure you escape it with a back slash. Otherwise, you can generally include any keyboard character. If you are putting a string of text, you may want to include a space in your text. You can also generate this spacing using CSS. Remember, as we learned in section 32, you can use CSS to stylize your generated text even though the generated text is NOT added to the pages document tree.

    Advanced topic: If you are going to include any non-ASCII characters or entities, declare the charset in your CSS and XHTML, and/or use the ISO / IEC 8859-1 (a.k.a. Latin-1) code for the character. Check out my blog post on including named entities in CSS and Javascript for examples and instructions.

  • content: url(myBullet.gif);

    url: You can add images as generated content (and even sound as generated content for auditory pages), by linking the content to an online file. To include an external file as generated content, include the URI inside the “url()”. The value of the property in this case it a path and file name that designates an external resource, such as an image, inside the “url()” as demonstrated above. If the browser can’t display the resource, FireFox and Internet Explorer 8 omit the file completely, as if it were not specified. Safari, on the other hand, indicates that the resource cannot be displayed with a missing image icon.

  • content: open-quote;

    open-quote and close-quote: These values are replaced by the appropriate string from the ‘quotes’ property. When including nested quotes, if the outer quotes are double quotes, generally, in literature, the inner quotes should be single quotes. The values of open-quote and close-quote are supposed to handle that scenario, but it doesn’t work cross browser. Firefox and Internet Explorer get these values right. Opera handles this, adding quotes, but does not nest quotes correctly. Safari ignores these values completely. Until Safari handles the open-quote and close-quote, values, I recommend using doing a double declaration. The first declaration should be a string with an escaped quote of your choosing. The second declaration should use the key terms of open-quote or close-quote, so the browsers that understand the declaration can nest correctly.

    p.quote:before {
       content: "\"";
       content: open-quote;

    Listing 1: The first line in understood by all browsers supporting content, since all browsers support the string value. If a browser does not understand the “open-quote” value, the browser ignores the value and inherits the string value from line 1.

  • content: no-open-quote;

    no-open-quote and no-close-quote: Introduces no content, but increments ( or decrements) the level of nesting for quotes. As mentioned in the open-quote/close-quote section above, when quotes are nested in some languages, the type of quotation mark used changes depending on the level of nesting. This is when these values are relevant. Again, safari ignores the declaration. Opera, Internet Explorer 8 and Firefox get it right (though Opera doesn’t nest properly. The trick described in Listing 1 works here too, except serve an empty string, as in listing 2.

    p.quote:before {
       content: "";
       content: no-open-quote;

    Listing 2: The first line in understood by all browsers supporting content, since all browsers support the string value. If a browser does not understand the “no-open-quote” value, the browser ignores the value and inherits the empty string value from line 1.

  • content: attr(title);

    attr(x): This ‘function’ returns as the content value a string with the value of the X attribute of the element on which the content attribute is applied. The attribute value will be elaborated on in the next section.

  • content: counter(subtitles, decimal);
    content: counter(headers) "." counter(subtitles) ": ";

    counter(name) or counter(name, style): The counter takes two parameters: the name, which you can reference to increment or reset, and the style, which, if not declared, defaults to “decimal”. While you can name the counter almost anything except ‘none’, ‘inherit’ or ‘initial’, avoid key terms. Counter will be elaborated on in the next section.

*By “modern browsers” I mean all browsers in listing 3 other than IE6 and IE7.

Browser support for the CSS content property and :before and :after pseudo elements

The CSS content property and possible values
IE6 IE7 IE7 in IE8 IE8 FF3 FF 3.5 Beta Saf 3.2 Saf 4 Beta Opera 9.64
content Since :before and :after is not supported in these browsers, testing is not possible, and moot. It is assumed that IE6 and IE7 does not support the content property, therefore supports none of these values works, except for issues below works, except for issues below works, except for issues below
none n
normal displays quotes on <q> Makes sense, but not the spec.
url() nothing nothing nothing missing image icon missing image icon missing image alt


Does not nest quotes correctly, but does include quotes.



Listing 3: browser support for the various values of the content property.


CSS Background-Color Property

In this tutorial we will be looking at the background-color property, and how to apply it to elements in your web site. The ability to add colors to elements in your page by adding them to a style sheet enables you to create colorful designs while maintaining a consistent look and feel throughout the pages of a web site. We’ll review all the value types of the background-color property introduced in the past 3 sections. We’ll discuss including the background-color property within a style sheet, and problems that may arise depending on the browser.


The background-color property sets the background color of an element. When you don’t declare a background color, the default value is transparent. This attribute, like all other background attributes, is NOT inherited. All browsers support background colors.

selector { background-color: value;}

Listing 1: CSS syntax for background-color

You can add background color to any element within the body, the body, and the html element itself. Simply declare your color value as in the snippet of code above, where the selector is any CSS selector, such as class, id, tag name, or combination thereof. Use the property name "background-color", and one of the acceptable values described next.

background-color values

The background property can take many types of values:

  • Transparent
  • Color Name
  • RGB Value
  • Hexadecimal Value


The default value for background color is "transparent". Since this is the default value and background-color in NOT inherited, you don’t have to declare it on any elements EXCEPT if you’ve declared that all elements of a type have some other background color, and in this particular case you don’t want that element to have that declared background color. For example:

p {background-color: #ff0000;}
p.nocolor {background-color: transparent;}

Listing 2: transparent is the default value, and should only be used with specificity to overwrite a more general declaration.

In this example, all paragraphs will have a background color of red, except paragraphs that have a class of "nocolor", which will not have a background color applied.

IE6 chokes on background-color: transparent when the transparency is applied to an element that is dynamically shown, such as on a drop down menu that is display: none, but is display: block when parent is hovered.

Color Name

There are the 16 colors defined in the W3C specifications. These include: olive, black, gray, silver, white, purple, fuchsia, aqua, navy, blue, teal, green, lime, yellow, red, and maroon. In section 24, Understanding Color Names, we discussed the 140+ color names that are supported by modern browsers, but, other than the 16 listed here, aren’t in the specifications. Feel free to use any of those color names EXCEPT "lightgray", which IE6 sometimes chokes on.

p {background-color: red;}

Listing 3: CSS syntax for background-color using color name

RGB (RGBA) Values

Colors are displayed by combining RED, GREEN, and BLUE light. In CSS, the levels can be defined by percentages or integers between 0 – 255. White can be written as rgb(255, 255, 255) or rgb(100%, 100%, 100%). Black can be written as rgb(0, 0, 0) or rgb(0%, 0%, 0%).

In browsers that support CSS3 (in other words, browsers other than IE), you can set the opacity or transparency level of the background color using background-color: rgba(255, 255, 255, 1);, where 255 is an integer between 0 and 255 or a percent value, and the 1 is any value between 0 and 1, with 0 being completely transparent and 1 being completely opaque.

Note: IE6 and IE7 get "partially compliant" for RGB, since they erroneously display color if integers and percents are mixed. This may be a good thing, but it’s not in the specifications.

Do not using mixed values in RGB, and do not use RGBA without browser targeting: both will fail in non-supporting browsers.

p {background-color: rgb(100%, 0%, 0%);}
p {background-color: rgb(255, 0, 0);}
p {background-color: rgba(255, 0, 0, 1);}

Listing 4: CSS syntax for background-color using RGB and RGBA. The three declarations above have the same value.

Hexadecimal Values

HEX values were discussed in Part 23: Understanding Hex Values. Hex values are the most common, best supported, and recommended way of including colors, including background colors, in CSS. To review, Hex color values are three double digit hexadecimal (hex) notations for the combination of Red, Green, and Blue color values (RGB) preceded by the hash (#) sign. Hex colors can also be written as three single digits.

Property Values for background-color

background-color: transparent;
background-color: rgb(255, 255, 255); 
background-color: rgb(r%, g%, b%); 
background-color: rgba(255, 255, 255, 1); 
background-color: rgba(r%, g%, b%, 1);  
background-color: #fff; 
background-color: #123456;
background-color: white;

Listing 5: Various ways of writing background-color property values.

Browser support for background-color

Explorer 6
Explorer 7
Explorer 8
Firefox 2 FireFox 3 Safari 3 & 4 Opera 9.64
transparent Issues when dynamic
rgb(r, g, b) renders if value types are mixed renders if value types are mixed
rgba(r, g, b, a) ignores the entire call ignores the entire call ignores the entire call ignores the entire call ignores the entire call
Color Names OK, except for "lightgray"

Listing 6: Browser support for the various types of background-color property values.

For advanced users: DOM

For those trying to target the element using the Document Object Model, you can use:


Listing 7: setting or extracting the background-color value using the DOM

HTML5: <section> v. <article>

I have been asked several times “when do you use <article> and when do you use <section> in HTML5?” I use an analogy that I figured I would share, as it seems to help developers make sense of the two elements.

Think of a newspaper. The paper comes in sections. You have the sports section, real estate section, maybe home & garden section, etc. Each of those sections, in turn, has articles in it. And, some of those articles are divided into sections themselves.

In other words, you can have parent <section>s with nested <article>s that in turn have one or many <section>s. Not all pages documents need these, but it is perfectly acceptable and correct to nest this way.

I hope that helps explain it.


The object element

The <object> element defines an embedded object. The <object> element is used to embed multimedia objects into web pages that are generally not natively supported by the browser. Object can be used for video clips, sound, images and other media formats. “Other media formats” include formats that are generally natively supported by browsers, such as images, text and html. The <object> element (and the various attributes) and child parameters provide browsers and multimedia application embedded in browsers with the information required to display multimedia objects.

<object data="myImage.png" type="image/png"></object>
<object data="myIframe.html" type="text/html"></object>
<object data="myMusicFile.mpeg" type="application/mpeg"></object>

Listing 1: the <object> element is a generic way of including media. Use more type specific elements, such as <img> or <iframe> when available. The <img> element is discussed in part 9 of this series.

The <object> element is generally used for embedding multimedia that requires the browser to load an external application to render the media (such as a flash movie or an audio file). The <object> element, along with its attributes and child <param> elements, allows you to specify everything required by the object — applets, plug-ins, media handlers and other components you may want to include in your web page — for presentation of that media by the browser and browser plugin, including source code, data type, initial values, etc. When including a Java applet, a .swf file, an ActiveX object, or other multimedia object, specify the data and parameters for objects and the code that can be used to display and manipulate the object data via <object> element attributes and child <param> elements.

Specifications and Browser Support

While the object element was supposed to be an important addition to the HTML 4.0 standard, it is still not completely supported by all browsers; though all browsers do support it to some extent. Whether an object is supported by the browser depends on the object type. The object element can be used to show many different media types such as ActiveX, PDF, Flash, or HTML, images and text files). Unfortunately, some browsers use different code to load the same object type. The nesting of the object elements is a great solution to enable you to degrade media based on browser support.

The <object> element can be located in either the <head> or as a child of the <body> element. The <object> can be found inside both block and inline elements, including inside the <button> and <a> elements, but NOT as a child of the <pre> element. The <object> element, in turn, can contain both inline and block level elements, including <param>, <form>, text and child object elements. While we’ll discuss <param> below, note that if a <param> element is found between the <object> and </object> it is part of the object of which it is a direct child and not an alternate code to execute. If text is found between the opening and closing <object> tags, it is alternate text for browsers that do not support the <object> element or the media defined by the <object> element. If the browser is able to display any of the parent media, then the text will not be displayed.

While the object element is an INLINE element, it can contain both inline and block level elements. Because it is an inline element, some recommend only including inline elements as children. If you are providing alternative content that will be displayed, my view is that you should use whatever HTML elements are most appropriate for displaying the default content, since it is valid to do so.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   width="368" height="190" title="This is my flash movie">
   <param name="movie" value="myFlash.swf" />
   <param name="quality" value="high" />
   <object data="myImageName.jpg" type="image/jpeg">
     Some text 

Listing 2: Example of code for an <object> element embedding a .swf file. I’ve added a nested image object for browsers not supporting flash (think iPhone!), and some default text if images are not displayed or found.

The <object> element

<object> elements can be nested inside a parent <object> element to provide the browser with alternative content to present if the browser is unable to display the media included by the outermost parent <object>. The browser walks thru the nested <object> media until it finds a media type it can render. If a browser is unable to render the media type of the parent object, the browser will try to render the next child <object> element until it finds an <object> with a datatype it is able to render. The search for the first renderable child will continue thru all the included object, and, if no renderable <objects> are found, the browser will display any HTML content, including images, that is the child of the inner-most <object> element.

For example, if you are displaying a Flash movie, but the user’s browser does not have the flash player installed, then you can present the user an image. However, if the user is using a tele-type reader, then you can serve the user text instead.

If the <object> element does not display properly, the content nested between the <object> and </object> tags will be executed. This allows allows you to have several nested object elements (one for each browser, depending on browser media support), and default text for some browsers if the content is not found or if the media is not supported.

Note: When the browser supports the media type, but the file is not found, browsers differ on whether or not to show the nested content.

Examples of simple <object> elements in action

<object data="real_file.htm" type="text/html" width="300" height="200">
  <p>The link to <a href="missingfile.htm">a real page</a> will 
  not show in browsers,since browsers can render html</p>

EXAMPLE 1: Since the HTML data file DOES exist, the HTML file linked to with the data attribute will display. Browsers include the html file object in an iframe like display — in this case a 200 x 300px iframe since height and width were declared.

<object data="fake_file.htm" type="text/html" width="300" height="200">
  <p>The link to <a href="missingfile.htm">a missing page</a> will 
  show in some browsers, and not in others </p>

EXAMPLE 2: Since the HTML data file does NOT exist, the above will display differently in different browsers. For example, IE6 provides an empty iFrame like 200px by 300px space, Safari displays the paragraph, and Firefox displays nothing.

<object data="real_pdf.pdf" type="application/pdf" width="300" height="200">
  <p>The link to <a href="real_pdf.pdf>a real pdf file</a> will 
  show in some browsers. Others will display the Adobe Acrobat application 
  within and iframe</p>

EXAMPLE 3: Since the pdf file DOES exist, the HTML file linked to with the data attribute will display IF the browser supports displaying PDF files within a browser window. However, if the user’s browser does not support in-browser displays of Adobe Acrobat, the paragraph with the link to the pdf file will be displayed.

<object data="myMusicFile.mpeg" type="application/mpeg">
     <object data="missingImage.jpg" type="image/jpeg">
        My Text Replacement 

Listing 4: If you have Quicktime, or some other audio format plugin supported by your browser, the music file will be displayed. If there is no media player, the browser will display the JPG instead of MPEG. However, in our example, the image doesn’t exist. Firefox and Safari correctly display the replacement text. However, IE6 tries to display the missing image.

Note that in example four, the image is included as an <object> instead of <img> because I wanted to display the text ONLY if the image did not load: I didn’t want to display both. Browsers will consider the <img> element as part of the data to be displayed if the user agent can not render the data in the outer object element. Since the <object> element does not support the alt attribute, a better way of coding the contents of listing 2 would be:

<object data="myMusicFile.mpeg" type="application/mpeg">
     <img src="myImageName.jpg" alt="My Text Replacement" /> 


This is more appropriate since you can include an alt attribute with the image. If a user agent does not render images, the text provided in the alt attribute will be displayed, which was what was intended in Listing 2.

Attributes of the <object> element

In addition to the core attributes and internationalization attributes, the <object> element accepts the following attributes:

  • declare

    The declare attribute, when included, states that the object should only be declared, not created or instantiated until needed. The declare attribute only takes one value: declare="declare".

  • classid

    The classid attribute defines a class ID value as set in the Windows Registry or a URL. Used to specify the location of the object’s implementation, the URL syntax depends upon the object’s type. The value can be either a traditional address or an apparently incomprehensible string of letters and digits that are actually the letters C-L-S-I-D, followed by a colon, space and the object ID, such as “CLSID: 99B42120-6EC7-11CF-A6C7-00AA00A47DD2”, for an ActiveX control. Classid is used in conjunction with or as an alternative to the data attribute. Unless you can figure out the Registry of classid’s, get the correct classid value from the supplier of the ActiveX control. For example, for .swf files, the classid value is generated by Flash when the developer publishes the .swf and associated .html file from the .fla file. Or, when using Dreamweaver to inset media, Dreamweaver automatically includes the correct classid value..

  • codebase

    This codebase attribute contains the URL to use as a relative base for the URL specified by the classid attribute. In Listing 2 above, the URL of the codebase points to the codebase for the flash player or plug in. Note that the URL for the SWF file is included in the child parameter and NOT in the <object> element.

  • data

    Another URL, the data attribute contains the location of the data required by an object. This should be either a relative or absolute path the your file.

  • type

    This type attribute specifies the content-type, or MIME type, for the object’s data. This is different from the codetype (below), which is the MIME type of the object and not of the data it uses.

  • codetype

    This attribute specifies an object’s content-type, or MIME type. This defines the MIME type of the object, not the the data the object may use, as defined in the data attribute.

  • archive

    This archive attribute contains an absolute or relative URL, or space separated list of URLs, for the location of archive files. An archive file is generally used to contain multiple object files to improve the ability to access the object improving perceived download time.

  • standby

    If you want to define the text displayed while the object is loading include the standby attribute with the text message to be displayed as the attribute value.

  • height

    This height attribute specifies the height of the object in pixels or as a percentage of the enclosing window, depending on whether the percentage symbol is included. This value is overridden if the CSS defines a height for the object.

  • width

    This width attribute specifies the width of the object in pixels or as a percentage of the enclosing window, depending on whether the percentage sign is included in the attribute value. The CSS width property overrides the element attribute value when included.

  • usemap

    Objects can have hyperlinks associated with them through standard links using the <a> element, thru embedded linking mechanisms such as links in a flash movie, and also via image maps. The usemap attribute generally takes a fragment identifier referencing a map element somewhere else within the file of the image map to be used with the object as the value, but can also take an URL to a map in a separate file in browsers that support such behavior. If you include the usemap attribute, you should also include a <map> and the object will most likely be an image. An image map specifies active geometric regions of an included object and assigns a link to each region. Image maps are covered in part 10 of this series.

  • name

    The name attribute is allowed, but is not required.

  • tabindex

    Along with <a>,<area>,<button><input>, <select> and <textarea>, the <object> element also supports the tabindex attribute.

The border, align, datafld, dataformats, datasrc, hspace and vspace attributes for the <object> element have all been deprecated in XHTML.

The <param> element

The <param> element is used to define special parameters used to control Shockwave and Flash SWF files, ActiveX controls, Netscape Navigator plug-ins, and Java applets. The <param> element can only be nested within a parent <object> or <applet> element. (Note that the <applet> element is not valid in XHTML strict). Parameters set attributes specific to different types of objects. For example, a Flash object can use a quality parameter <param name=”quality” value=”best”> for the object tag. If you are using Dreamweaver, you will find a Parameter dialog box in the Property inspector.

The <param> element is an empty element, so must be closed with a trailing slash. The name attribute is REQUIRED. The value attribute, while optional, should be included. The <param> element also accepts the id, valuetype, and type attributes.

Note: There is no widely accepted standard for identifying data files for ActiveX controls. See the documentation for the object you’re using for information on the parameters it requires.