First Things First

Concentrate on content first. What’s it all about?

Next, worry about functionality. How will it work?

Style or presentation should be last on your list.

If you want to publish on the Web, take a look around. Spend some time surfing the Web and see what’s out there. You can find plenty of examples of bad design and poor planning.

If you see something you like on the World Wide Web, steal it.

I don’t mean you should steal intellectual property, of course. But there’s nothing wrong with taking a look “under the hood” of a Web page and seeing how it’s done. In most browsers, you can view the source code by choosing View > Page Source.

Go ahead — try it right now, on this page.

Project Management

Half of planning your website is project management, which is all about making life easier for yourself.

(The other half of planning is design, which is about making life easier for the people who use your pages.)

It’s essential to develop a workflow. There are a number of steps in the process of creating and maintaining a Web page, and every project is different. Planning will help you realize what those steps are.

A few other pointers before we begin:

• Surf the Web. See what’s out there.
• Don’t be overly ambitious.
• Don’t try to re-invent the wheel.
• Do set aside some time for planning.
• Also set aside some time for learning.
• Realize that maintenance is continuous.
• Have fun with it!

Use Pencil and Paper

Your most important tool for digital projects are good old pencil and paper. Often you’ll do your best thinking with these tools.

I planned this site using a Prism Steno Book and a Sanford Uni-Ball Microtip. Here’s a sample:

Write a One-Sentence Summary

You should be able to summarize your project in a single sentence. If you can’t do that, then you probably need to spend some time focusing your thoughts.

Here’s the one-sentence summary for this sub-site:

These pages will support the “Planning Your Website” seminar and will contain tips for Xavier University faculty on how to plan their web pages, including both project management and design issues.

Here’s the one-sentence summary for the Center’s website:

The CAT website will be a resource to Xavier and Partner School faculty in the areas of CAT initiatives and general faculty development.

Make an Outline

To help organize your thoughts, it’s often helpful to make an outline of all the content that you plan to include. I made an outline for this project, and used it as a table of contents — providing an index to all the material.

Make a Flow-Chart

The user’s experience may closely parallel the linear progression of your outline. Then again, it may not. Hypertext allows for a non-linear experience.

You should draw a flow chart to show how you want users to navigate through the content. The chart can be very simple and still very effective for organizing your thoughts. Consider the differences between these two charts:

posted by santosh kori

CSS: Specificity Wars

Join me, and together we can rule the galaxy as father and geeks!

A few weeks back in Cupertino, I saw Aaron explain how the specificity of CSS selectors is calculated in a way which I hadn’t seen before. Then today I came across a knotty problem while building XHTML and CSS templates for a new project where two selectors behaved differently to how I expected and I realised that I had not completed my training.

The Dark Side

My problem was a simple one, how to feed a transparent PNG image to browsers which support transparency and a GIF image to older browsers which don’t, without resorting to hacks. Here’s the markup,

<div id="nav-supp">
<p><a id=”a-02″ href=”#webstandards-org”>Top</a></p>
<!– etc. –>
</div>

and my CSS starting point.

a#a-02 { background-image : url(n.gif); }
a[id="a-02"] { background-image : url(n.png); }

I had assumed that a modern browser would see and apply both rules (with the second overriding the first) and that an older browser which does not understand attribute selectors would see and apply only the first, ignoring the second. I was wrong. Modern browsers did not apply the PNG image as I expected. The reason? A standard id selector wins over an attribute selector in terms of the cascade. Dagnammit! I know I should have read the specs, but somehow that particular pleasure had escaped me. If I had, I might have learned that;

ID selectors have a higher specificity than attribute selectors. For example, in HTML, the selector #p123 is more specific than [id=p123] in terms of the cascade.

Sith Lords

A little Googling uncovered some rather dry reading on the subject of selector specificity (resources below).

First, let’s look back at what Lord Elasticus (Patrick Griffiths) wrote on the subject of specificity (with one or two minor changes to fit our nefarious purpose).

You give every id selector (”#whatever”) a value of 100, every class selector (”.whatever”) a value of 10 and every HTML selector (”whatever”) a value of 1. Then you add them all up and hey presto, you have the specificity value.

• p has a specificity of 1 (1 HTML selector)
• div p has a specificity of 2 (2 HTML selectors; 1+1)
• .sith has a specificity of 10 (1 class selector)
• div p.sith has a specificity of 12 (2 HTML selectors and a class selector; 1+1+10)
• #sith has a specificity of 100 (1 id selector)
• body #darkside .sith p has a specificity of 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)

If all of these examples were used, div p.sith (with a specificity of 12) would win out over div p (with a specificity of 2) and body #darkside .sith p would win out over all of them, regardless of the order.

Darth (Gez) Lemon quotes the W3C.

A selector’s specificity is calculated as follows:

• count the number of ID attributes in the selector (= a)
• count the number of other attributes and pseudo-classes in the selector (= b)
• count the number of element names in the selector (= c)
• ignore pseudo-elements.

Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

Too much! For me, the W3C really is in a galaxy far, far away!

http://www.netzgesta.de/loupe/

Why does the CSS box model need a hack?

According to the W3C, an assigned ‘width’ (and ‘height’) of a box refers to the ‘content area’ of a box only. The padding, borders, and margins are then added to this value to arrive at the total box width. If the ‘width’ property is omitted, the total box width is the same as the ‘content area’ of the surrounding container element.

All well and good. Unfortunately, all CSS enabled versions of IE before IE6/strict use a different box model. In that model, the padding and borders are counted as part of any assigned ‘width’ or ‘height’. In the absence of borders and padding, the two models agree. However, if a box has an assigned “width’, and if borders and/or padding are added, the standard box model causes the overall box width (between the outer border edges) to increase, while in IE’s model the ‘content area’ gets squeezed by the same amount. This is a major problem for proper page layout.

Consider the following CSS:

{width:100px; padding:10px; border:10px;}

When viewed in a ’standards’ browser the dimension from border edge to border edge will be ‘140px’. (100+10+10+10+10=140) Because IE5.x puts all these values inside the ‘width’, the border edge to border edge dimension will be ‘100px’.

Note: For technical reasons it sometimes would be desirable to employ the old IE box model. It has been bruited about that CSS-3 will feature a way to choose between the two models, but the current standard model will no doubt remain the default.

The Hacks

Box-in-a-box

The name says it all. Just remove the padding/borders from the problem box, nest a second box inside the first, and put the padding/borders and the content within that nested box. End of problem. The only issue is that this is done within the HTML markup, rather than the CSS. Many people consider this to be bad practice, because years down the road, when a hack is finally cleaned from your code, a CSS hack is quickly removed, while markup hacks are scattered hither and yon. Plus it complicates the HTML, structurally speaking.

It looks like this if you are using two divs:

div { width: 100px; } div .i { padding: 1em; } <div> <div class=”i”> Text </div> </div>If used while you have two nestled elements anyway, then the only negative effect of this solution (a single extra div in the HTML) is a non-issue. The major benefit of this method is that it works just about everywhere.

NOTE: This hack has an additional bug. In IE a table placed inside the internal div with a 100% width will stretch the external div to the width of the external div plus the padding of the internal div.

Here is the code that shows the IE bug.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> <html> <head> <title></title> <style type=”text/css” media=”all”> div.FixedWidthBar { border: 1px solid #000000; width: 100px; background-color: #FF0000; color: #FFFFFF; } div.MarginContentArea { border: 1px solid #000000; width: 100px; } div.ContentArea { border: 1px solid #0000FF; padding: 10px; } </style> </head> <body> <div class=”FixedWidthBar”>100px</div> <div class=”MarginContentArea”> <div class=”ContentArea”> <table width=”100%”> <tr> <td>test</td> </tr> </table> </div> </div> </body> </html>

The Tantek Hack

Tantek Çelik’s ingenious workaround for dealing with IE5’s faulty interpretation of the box model. Relies on an Internet Explorer CSS parsing bug.

See http://www.tantek.com/CSS/Examples/boxmodelhack.html

The Simplified Box model Hack (SBMH)

This hack was first detailed in a superb [post] by Andrew Clover of the CssDiscussList. It also uses an escape character parsing bug, like the Tantek Hack, but is used directly on a property rather than between the property declarations.

The basic structure is this:

div { width: 100px; } div { \width: 140px; w\idth: 100px; }The top rule (line 1) is used by browsers like Op5 that get the box model correct, but choke on the escapes in the following rule. Op5 ignores those rules entirely.

The first ‘escaped’ property (line 5) will be used by IE5.x, and feeds that browser its ‘fudged’ value. The second escaped property (line 6) cannot be read by IE5.x, but is read and used by modern ‘escape friendly’ browsers like N6, Moz, Op6, and IE6.

Note: If Nav4 sees even one escape anywhere in the CSS, it will discard the entire sheet. So it is vital that this hack be hidden from that browser, by means of @import, or the CaioHack. For a detailed explanation of the escape parsing bug see that Andrew Clover [post].

Proper use of the escapes: The escape ‘\’ that starts line 5 must always be directly against the first letter of the property name. IE5.x/win does not like escapes, but seems to ignore them when they are in this position.

Important! An escape must not precede any of the first six alphabetical characters: a, b, c, d, e, f, per the [CSS spec on forward-compatible parsing]. If this is done it will be seen as a ‘hex code’ and Bad Things Will Happen. This means that a property that begins with one of these letters cannot be hacked in this manner. For example, “height” can be hacked, but “font-family” can’t be, since it starts with a character that is interpreted as the beginning of a hex code. Fortunately, neither “width” nor “height”, the most important properties for this hack, are affected.

For line 6 (modern browsers) the escape must be within the property name, and the previous ‘hex’ rule applies.

A Modified SBMH (Tan hack)

Using the above example the basic syntax of the modified SBMH is as follows

div { border: 10px; padding: 10px solid; width: 100px; } * html div { width: 140px; w\idth: 100px; }The first rule contains all the necessary CSS for the box including borders, paddings, and width value for browsers that properly implement the CSS box model.

The second rule uses the StarHtmlHack. Since html is the root element the selector ” * html ” shouldn’t match any element in a valid html/xhtml document. But IE (for Windows and the Mac) seem to ignore the universal selector (asterisk) when it precedes “html”. Same goes for the selector “* * body”. Because of this peculiarity we can effectively hide an entire rule from all browsers except IE.

Line 10 is read by all IE versions. Line 11, however, as explained above in the section on the SBMH is hidden from IE5.x/Win because of the character escape. IE5/Mac and IE6/Win which implement the CSS box model correctly, therefore, properly get a width of 100px.

Because the star html selector does not match any actual element, browsers that are phobic to escapes such as NS4.x and Opera 5, will not even bother looking at the declaration block, and therefore are effectively shielded from escapes.

This is a very brief intro to the technique. A more comprehensive discussion is available at the [Modified SBMH page]. You may also want to [test] how your browser reacts to the hack. Included in that page is a table summarizing the results of browser testing. As you can see testing on Mac browsers is urgently needed.

3 Alternate Box Model Hacks

The following techniques rely on the fact that all IE/Win (and, unfortunately, IE/Mac too) have various forms of [comment bugs], i.e., depending on where the comment is placed one version or another of IE will ignore the declaration where the comment is found.

Here are the specific comment bugs that are put to good use in the hacks:

• When a property is immediately followed by an empty comment (no whitespace inside), that declaration is hidden from IE5.0/Win and IE5/Mac.

• When a property is immediately followed by a comment that contains at least one whitespace, that declaration is hidden from IE5.0/Win and IE5/Mac. In addition the next declaration is also hidden from IE5.0/Win.

• When a comment immediately precedes a value that declaration is hidden from IE5.5/Win.

• When a property is followed by at least one whitespace and which is then followed by a comment (comment must be before the colon) that declaration is hidden from IE6/Win.

As in the all the hacks above the three techniques below intend to serve IE5.x/Win the total width of the box, and supply the content width to other browsers.

Technique 1

Syntax:

div { border: 10px solid; padding: 10px; width: 140px; width/* */:/**/100px; width: /**/100px; }Line 5 is read by all browsers. Line 6 is hidden from IE5.x/Win. But because there is whitespace inside the comment adjacent to width IE5.0/Win will also ignore the declaration that immediately follows. Therefore, line 7 is hidden from it as well. Line 7 is also hidden from IE5.5/Win because of the comment adjacent to the value. Lines 6 and 7 are not hidden from IE6/Win.

Technique 2

Syntax:

div { border: 10px solid; padding: 10px; width: 100px !important; width: 140px; width/**/:/**/100px; }Line 5 is read by all browsers. But IE/Win does not implement !important so this width value will not override the other two. Line 7 is hidden from IE5.x/Win. Therefore, IE5.x/Win will apply the width value in line 6. IE6/Win meanwhile will read all the width values but apply only the last one (line 7)

Technique 3

Syntax:

div { border: 10px solid; padding: 10px; width: 100px !important; width /**/:140px; }Line 5 is read by all browsers. But IE/Win does not implement !important so this value is not given any importance by that browser. Line 6 is hidden only from IE6/Win. Therefore, IE5.x/Win and any other browser that does not properly implement !important will get a width of 140px.

Important Note: The order of the various width declarations is crucial. They must appear as shown in each of the three techniques above, else the hacks will fail. However, other declarations (e.g. background-color, font-size, position, etc.) may appear before and after them.

As you may have already noticed these three techniques obviate the need for two rule sets, thus simplifying the style sheet.

This is a very brief intro to the techniques. A more comprehensive discussion is available at the [Alternate Box Model Hacks page]. You may also want to [test] how your browser reacts to the hacks. Included in that page is a table summarizing the results of browser testing.

What is the conclusion?

And what do we get when we summarise all this? I’m not quite sure… Anyone?

The Tantek Hack

This seems to be the one generally working, but it’s awkward to enter. And it also affects IE4 and NS4 which doesn’t need it.

SBMH

This works, but breaks fatally on NS4 effectively disabling the entire stylesheet. It also affects Op5 and Konqueror

SBMH (Tan hack)

This does also work, and does not break NS4. Drawback is you have to specify the width-property three times to make it work, and two of them within a separate rule. (For the novice-to-intermediate webmaster however, the Tan hack is decidedly complication-free, and it may even be extra nice to keep things clear and separate. If your page is not complex the added code bulk may be insubstantial.)

Alternate BMH, 1-3

Is this the ultimate solution? It does break the Konqueror on Linux, and What’s the difference between these, and where do they not work? It seems like Technique 3 is a nice solution, but is it the ultimate solution? On NS4.8 all the boxes gets broken into small boxes around each word.

MS Proprietary Conditional Tags

may be at least as good and as simple as anything on this page. Worth considering for experts as well as novices. (Only does not work on “stand alone” IE5 browsers, which are rarely used except for view-checking by other web designers.) http://htmlfixit.com/contribs/MS_conditional_tags.html

Update 16 Dec 2005: Manfred Staudinger has posted a brilliant article on [Taming Your IE Standalones] over at Position Is Everything that repairs the comments problem.

So the question remains: Which hack to use against the buggy box model of IE5/Win? Which hack has the least amount of side effects?

Another Solution by Tantek

Another way to get around IE5’s buggy box model is the Mid Pass Filter (http://www.tantek.com/CSS/Examples/midpass.html). This seems like the best solution, because it doesn’t break in any browsers. On the plus side it also separates hacks from normal code.

div { border: 10px solid; padding: 10px solid; } @media tty { i{content:”\”;/*” “*/}} @import ‘midpassbefore.css’; /*”;} }/* */ div { width: 100px; } @media tty { i{content:”\”;/*” “*/}} @import ‘midpassafter.css’; /*”;} }/* */Then midpassafter.css contains

div { width: 140px; }

Cycloid’s Tiny Box Model Hack

This uses a quirk in the way that Windows IE 5,5.5 and 6 (in quirks mode) read the css file (happily IE5.2 on the mac is unaffected and uses the correct box model). They will accept key/value pairs where the value is enclosed in quotes:

div { padding: 10px; width: 180px; width: “200px”; }This breaks the W3C’s rules for CSS, unfortunately, so if producing W3C validated code is more important to you than simplicity then use one of the above comment bug hacks. As the last width rule is seen by non IE browsers as being malformed it is skipped and the first width declaration is used instead.

Efficient CSS with shorthand properties

I get a lot of questions about CSS from people who aren’t crazy enough to have spent the thousands of hours working with CSS that I have. Sometimes I’m asked to take a look at something they’re working on to see if I can figure out why it doesn’t work as expected. When I look at their CSS I often find that it’s both bloated and unorganised.

One of the reasons for using CSS to layout websites is to reduce the amount of HTML sent to site visitors. To avoid just moving the bloat from HTML to CSS, you should try to keep the size of your CSS files down as well, and I thought I’d explain my favourite CSS efficiency trick: shorthand properties. Most people know about and use some shorthand, but many don’t make full use of these space saving properties.

Some background

Shorthand properties can be used to set several properties at once, in a single declaration, instead of using a separate declaration for each individual property. As you’ll see, this can save a lot of space in your CSS file.

Quite a few shorthand properties are available – for details I suggest the W3C CSS specifications of the background, border, border-color, border-style, border sides (border-top, border-right, border-bottom, border-left), border-width, font, list-style, margin, outline, and padding properties.

Colours

The most common way of specifying a colour in CSS is to use hexadecimal notation: an octothorpe (#) followed by six digits. You can also use keywords and RBG notation, but I always use hexadecimal. One great shortcut that many don’t know about is that when a colour consists of three pairs of hexadecimal digits, you can omit one digit from each pair:

#000000 becomes #000, #336699 becomes #369.

Box dimensions

The properties that affect box dimensions share the same syntax: the shorthand property followed by one to four space separated values:

• property:value1;
• property:value1 value2;
• property:value1 value2 value3;
• property:value1 value2 value3 value4;

Which sides of the box the values affect depends on how many values you specify. Here’s how it works:

• One value: all sides
• Two values: top and bottom, right and left
• Three values: top, right and left, bottom
• Four values: top, right, bottom, left

Thinking of the face of a clock is an easy way of remembering which side each value affects. Start at 12 o’clock (top), then 3 (right), 6 (bottom), and 9 (left). You can also think of the TRouBLe you’ll be in if you don’t remember the correct order – I first saw this in Eric Meyer’s excellent book Eric Meyer on CSS.

Margin and padding

Using shorthand for these properties can save a lot of space. For example, to specify different margins for all sides of a box, you could use this:

1. margin-top:1em;
2. margin-right:0;
3. margin-bottom:2em;
4. margin-left:0.5em;

But this is much more efficient:

1. margin:1em 0 2em 0.5em;

The same syntax is used for the padding property.

Borders

Borders are slightly more complicated since they can also have a style and a colour. To give an element a one pixel solid black border on all sides, you could use the following CSS:

1. border-width:1px;
2. border-style:solid;
3. border-color:#000;

A more compact way would be to use the border shorthand:

1. border:1px solid #000;

I always specify border values in that order:

1. border:width style color;

Most browsers don’t care about the order, and according to the specification they shouldn’t, but I don’t see a reason for not using the same order as the W3C does in the specification. There’s always the chance of a browser being very strict about the order of shorthand values.

The same syntax can be used with the border-top, border-right, border-bottom, and border-left shorthand properties to define the border of any single side of a box.

You don’t have to specify all three values. Any omitted values are set to their initial values. The initial values are medium for width, none for style, and the value of the element’s color property for color.

How wide a medium border is depends on the user agent.

Note that since the initial value for style is none you do need to specify a style if you want the border to be visible.

The border-width, border-style, and border-color properties used in the first border example above are themselves shorthand properties. Their longhand alternatives are very rarely used, but they do exist:

1. border-width:1px 2px 3px 4px;

is shorthand for

1. border-top-width:1px;
2. border-right-width:2px;
3. border-bottom-width:3px;
4. border-left-width:4px;

The border-style and border-color shorthands use the same syntax as border-width: the box dimensions syntax described above.

Using the various border shorthands can also save some typing when you want to give an element’s border different properties on different sides. These declarations will make an element’s right and bottom borders solid, black, and one pixel wide:

1. border-right:1px solid #000;
2. border-bottom:1px solid #000;

And so will these:

1. border:1px solid #000;
2. border-width:0 1px 1px 0;

First the borders on all sides are styled identically, and then the different widths are specified.

Backgrounds

Another very useful shorthand property is background. Instead of using background-color, background-image, background-repeat, background-attachment, and background-position to specify an element’s background, you can use just background:

1. background-color:#f00;
2. background-image:url(background.gif);
3. background-repeat:no-repeat;
4. background-attachment:fixed;
5. background-position:0 0;

can be condensed to

1. background:#f00 url(background.gif) no-repeat fixed 0 0;

Like with the border shorthands the order of the values isn’t supposed to matter, but I’ve seen reports of early versions of Safari having problems when the values aren’t listed in the order used in the W3C specification, which is this:

1. background:color image repeat attachment position;

Remember that when you give two values for position, they have to appear together. When using length or percentage values, put the horizontal value first.

As with the border and border sides properties, you don’t have to specify all values. If a value is omitted, its initial value is used. The initial values for the individual background properties are as follows:

• color: transparent
• image: none
• repeat: repeat
• attachment: scroll
• position: 0% 0%

This means that it’s pointless to use the background shorthand without giving a value for either color or image – doing so would make the background transparent.

I almost always use the background shorthand to specify background colours for elements, since background:#f00; is the same as background-color:#f00;.

Remember that this will remove any background image specified by a previous rule. Consider these rules:

1. p {
2. background:#f00 url(image.gif) no-repeat;
3. }
4. div p {
5. background:#0f0;
6. }

All paragraphs not in a div element will have a background image and be red where the image doesn’t cover the background. Any paragraph that is in a div will have a green background, and no background image.

Fonts

As with the background property, font can be used to combine several individual properties:

1. font-style:italic;
2. font-variant:small-caps;
3. font-weight:bold;
4. font-size:1em;
5. line-height:140%;
6. font-family:"Lucida Grande",sans-serif;

Can be combined into

1. font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

Again, when it comes to the order of the values, I see no reason not to use the order given by the W3C. Better safe than sorry.

When using the font shorthand you can omit any values except font-size and font-family – you always need to give values for those, and in that order. The initial values for the individual font properties are these:

• font-style: normal
• font-variant: normal
• font-weight: normal
• font-size: medium
• line-height: normal
• font-family: depends on the user agent

Lists

The shorthand property for ordered and unordered lists is list-style. I personally only use it to set the list-style-type property to none, which removes any bullets or numbering from the list:

1. list-style:none;

instead of

1. list-style-type:none;

You can also use it to set the list-style-position and list-style-image properties, so to specify that unordered lists should render their list item markers inside each list item, use an image for the list item markers, and use squares if that image is not available, the following two rules would do the same thing:

1. list-style:square inside url(image.gif);

is shorthand for

1. list-style-type:square;
2. list-style-position:inside;
3. list-style-image:url(image.gif);

Outlines

The outline property is very rarely used, mainly because of its current poor browser support – as far as I know only Safari, OmniWeb and Opera currently support it. Anyway, using the individual properties you can define an outline like this:

1. outline-color:#f00;
2. outline-style:solid;
3. outline-width:2px;

or like this:

1. outline:#f00 solid 2px;

Outlines have some interesting characteristics that make them useful: unlike borders, they do not take up any space and are always drawn on top of a box. This means that hiding or showing outlines doesn’t cause reflow, and they don’t influence the position or size of the element they are applied to or that of any other boxes. Outlines may also be non-rectangular.

Reduced file size and easier maintenance

Those are the shorthand properties available in CSS 2. If you were to take the CSS file of a fairly large site and make one version that uses no shorthand properties and another version that uses shorthand efficiently, you would see a huge difference in file size. That’s one reason for using shorthand. Another is that doing so makes your CSS files easier to maintain – at least that’s my experience.

Got any other tips related to CSS shorthand? Let us know.

Understanding CSS z-index:Adding z-index From MDC [edit] Adding z-index The first example, Stacking without z-index, explains how stacking is arranged by default. If you want to specify a different stacking order, you have to use the z-index property. This property is assigned with an integer value (positive or negative), which represents the position of the element along the z-axis. If you are not familiar with the z-axis, imagine the page has several layers one above the other. Each layer is numbered. A layer with a greater number is rendered above layers with smaller numbers. The above is incorrect! z-index only applies if an element is positioned. The image below displays a bug in Firefox that has since been fixed. Since #normdiv has no positioning it does not matter what its z-index is and it is stacked as if it had no z-index specified (in this case, under everything else). (Edit by another user - FF seems to not support a negative z-index value) bottom: furthest from the observer … Layer -3 Layer -2 Layer -1 Layer 0 default rendering layer Layer 1 Layer 2 Layer 3 … top: closest to the observer Notes: When no z-index property is specified, elements are rendered on the default rendering layer 0 (zero). If several elements share the same z-index value (i.e. they are placed on the same layer), stacking rules explained in the section Stacking without z-index apply. In the next example, the layers’ stacking order is rearranged using z-index. DIV#5, normally below all the others, is now above all of them because it has the greatest z-index. Example source code div { opacity: 0.7; font: 12px Arial; } span.bold { font-weight: bold; } #normdiv { z-index: 8; height: 70px; border: 1px dashed #999966; background-color: #ffffcc; margin: 0px 50px 0px 50px; text-align: center; } #reldiv1 { z-index: 3; height: 100px; position: relative; top: 30px; border: 1px dashed #669966; background-color: #ccffcc; margin: 0px 50px 0px 50px; text-align: center; } #reldiv2 { z-index: 2; height: 100px; position: relative; top: 15px; left: 20px; border: 1px dashed #669966; background-color: #ccffcc; margin: 0px 50px 0px 50px; text-align: center; } #absdiv1 { z-index: 5; position: absolute; width: 150px; height: 350px; top: 10px; left: 10px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; } #absdiv2 { z-index: 1; position: absolute; width: 150px; height: 350px; top: 10px; right: 10px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; }

8192 =   8193 =   8194 =   8195 =   8196 =   8197 =   8198 =   8199 =  
8200 =   8201 =   8202 =   8203 = ​ 8204 = ‌ 8205 = ‍ 8206 = ‎ 8207 = ‏
8208 = ‐ 8209 = ‑ 8210 = ‒ 8211 = – 8212 = — 8213 = ― 8214 = ‖ 8215 = ‗
8216 = ‘ 8217 = ’ 8218 = ‚ 8219 = ‛ 8220 = “ 8221 = ” 8222 = „ 8223 = ‟
8224 = † 8225 = ‡ 8226 = • 8227 = ‣ 8228 = ․ 8229 = ‥ 8230 = … 8231 = ‧
8232 = 
 8233 = 
 8234 = ‪ 8235 = ‫ 8236 = ‬ 8237 = ‭ 8238 = ‮ 8239 =  
8240 = ‰ 8241 = ‱ 8242 = ′ 8243 = ″ 8244 = ‴ 8245 = ‵ 8246 = ‶ 8247 = ‷
8248 = ‸ 8249 = ‹ 8250 = › 8251 = ※ 8252 = ‼ 8253 = ‽ 8254 = ‾ 8255 = ‿
8256 = ⁀ 8257 = ⁁ 8258 = ⁂ 8259 = ⁃ 8260 = ⁄ 8261 = ⁅ 8262 = ⁆ 8263 = ⁇
8264 = ⁈ 8265 = ⁉ 8266 = ⁊ 8267 = ⁋ 8268 = ⁌ 8269 = ⁍ 8270 = ⁎ 8271 = ⁏
8272 = ⁐ 8273 = ⁑ 8274 = ⁒ 8275 = ⁓ 8276 = ⁔ 8277 = ⁕ 8278 = ⁖ 8279 = ⁗
8280 = ⁘ 8281 = ⁙ 8282 = ⁚ 8283 = ⁛ 8284 = ⁜ 8285 = ⁝ 8286 = ⁞ 8287 =  
8288 = ⁠ 8289 = ⁡ 8290 = ⁢ 8291 = ⁣ 8292 = ⁤ 8293 = ⁥ 8294 = ⁦ 8295 = ⁧
8296 = ⁨ 8297 = ⁩ 8298 =  8299 =  8300 =  8301 =  8302 =  8303 = 
8304 = ⁰ 8305 = ⁱ 8306 = ⁲ 8307 = ⁳ 8308 = ⁴ 8309 = ⁵ 8310 = ⁶ 8311 = ⁷
8312 = ⁸ 8313 = ⁹ 8314 = ⁺ 8315 = ⁻ 8316 = ⁼ 8317 = ⁽ 8318 = ⁾ 8319 = ⁿ
8320 = ₀ 8321 = ₁ 8322 = ₂ 8323 = ₃ 8324 = ₄ 8325 = ₅ 8326 = ₆ 8327 = ₇
8328 = ₈ 8329 = ₉ 8330 = ₊ 8331 = ₋ 8332 = ₌ 8333 = ₍ 8334 = ₎ 8335 = ₏
8336 = ₐ 8337 = ₑ 8338 = ₒ 8339 = ₓ 8340 = ₔ 8341 = ₕ 8342 = ₖ 8343 = ₗ
8344 = ₘ 8345 = ₙ 8346 = ₚ 8347 = ₛ 8348 = ₜ 8349 = ₝ 8350 = ₞ 8351 = ₟
8352 = ₠ 8353 = ₡ 8354 = ₢ 8355 = ₣ 8356 = ₤ 8357 = ₥ 8358 = ₦ 8359 = ₧
8360 = ₨ 8361 = ₩ 8362 = ₪ 8363 = ₫ 8364 = € 8365 = ₭ 8366 = ₮ 8367 = ₯
8368 = ₰ 8369 = ₱ 8370 = ₲ 8371 = ₳ 8372 = ₴ 8373 = ₵ 8374 = ₶ 8375 = ₷
8376 = ₸ 8377 = ₹ 8378 = ₺ 8379 = ₻ 8380 = ₼ 8381 = ₽ 8382 = ₾ 8383 = ₿
8384 = ⃀ 8385 = ⃁ 8386 = ⃂ 8387 = ⃃ 8388 = ⃄ 8389 = ⃅ 8390 = ⃆ 8391 = ⃇
8392 = ⃈ 8393 = ⃉ 8394 = ⃊ 8395 = ⃋ 8396 = ⃌ 8397 = ⃍ 8398 = ⃎ 8399 = ⃏
8400 = ⃐ 8401 = ⃑ 8402 = ⃒ 8403 = ⃓ 8404 = ⃔ 8405 = ⃕ 8406 = ⃖ 8407 = ⃗
8408 = ⃘ 8409 = ⃙ 8410 = ⃚ 8411 = ⃛ 8412 = ⃜ 8413 = ⃝ 8414 = ⃞ 8415 = ⃟
8416 = ⃠ 8417 = ⃡ 8418 = ⃢ 8419 = ⃣ 8420 = ⃤ 8421 = ⃥ 8422 = ⃦ 8423 = ⃧
8424 = ⃨ 8425 = ⃩ 8426 = ⃪ 8427 = ⃫ 8428 = ⃬ 8429 = ⃭ 8430 = ⃮ 8431 = ⃯
8432 = ⃰ 8433 = ⃱ 8434 = ⃲ 8435 = ⃳ 8436 = ⃴ 8437 = ⃵ 8438 = ⃶ 8439 = ⃷
8440 = ⃸ 8441 = ⃹ 8442 = ⃺ 8443 = ⃻ 8444 = ⃼ 8445 = ⃽ 8446 = ⃾ 8447 = ⃿
8448 = ℀ 8449 = ℁ 8450 = ℂ 8451 = ℃ 8452 = ℄ 8453 = ℅ 8454 = ℆ 8455 = ℇ
8456 = ℈ 8457 = ℉ 8458 = ℊ 8459 = ℋ 8460 = ℌ 8461 = ℍ 8462 = ℎ 8463 = ℏ
8464 = ℐ 8465 = ℑ 8466 = ℒ 8467 = ℓ 8468 = ℔ 8469 = ℕ 8470 = № 8471 = ℗
8472 = ℘ 8473 = ℙ 8474 = ℚ 8475 = ℛ 8476 = ℜ 8477 = ℝ 8478 = ℞ 8479 = ℟
8480 = ℠ 8481 = ℡ 8482 = ™ 8483 = ℣ 8484 = ℤ 8485 = ℥ 8486 = Ω 8487 = ℧
8488 = ℨ 8489 = ℩ 8490 = K 8491 = Å 8492 = ℬ 8493 = ℭ 8494 = ℮ 8495 = ℯ
8496 = ℰ 8497 = ℱ 8498 = Ⅎ 8499 = ℳ 8500 = ℴ 8501 = ℵ 8502 = ℶ 8503 = ℷ
8504 = ℸ 8505 = ℹ 8506 = ℺ 8507 = ℻ 8508 = ℼ 8509 = ℽ 8510 = ℾ 8511 = ℿ
8512 = ⅀ 8513 = ⅁ 8514 = ⅂ 8515 = ⅃ 8516 = ⅄ 8517 = ⅅ 8518 = ⅆ 8519 = ⅇ
8520 = ⅈ 8521 = ⅉ 8522 = ⅊ 8523 = ⅋ 8524 = ⅌ 8525 = ⅍ 8526 = ⅎ 8527 = ⅏
8528 = ⅐ 8529 = ⅑ 8530 = ⅒ 8531 = ⅓ 8532 = ⅔ 8533 = ⅕ 8534 = ⅖ 8535 = ⅗
8536 = ⅘ 8537 = ⅙ 8538 = ⅚ 8539 = ⅛ 8540 = ⅜ 8541 = ⅝ 8542 = ⅞ 8543 = ⅟
8544 = Ⅰ 8545 = Ⅱ 8546 = Ⅲ 8547 = Ⅳ 8548 = Ⅴ 8549 = Ⅵ 8550 = Ⅶ 8551 = Ⅷ
8552 = Ⅸ 8553 = Ⅹ 8554 = Ⅺ 8555 = Ⅻ 8556 = Ⅼ 8557 = Ⅽ 8558 = Ⅾ 8559 = Ⅿ
8560 = ⅰ 8561 = ⅱ 8562 = ⅲ 8563 = ⅳ 8564 = ⅴ 8565 = ⅵ 8566 = ⅶ 8567 = ⅷ
8568 = ⅸ 8569 = ⅹ 8570 = ⅺ 8571 = ⅻ 8572 = ⅼ 8573 = ⅽ 8574 = ⅾ 8575 = ⅿ
8576 = ↀ 8577 = ↁ 8578 = ↂ 8579 = Ↄ 8580 = ↄ 8581 = ↅ 8582 = ↆ 8583 = ↇ
8584 = ↈ 8585 = ↉ 8586 = ↊ 8587 = ↋ 8588 = ↌ 8589 = ↍ 8590 = ↎ 8591 = ↏
8592 = ← 8593 = ↑ 8594 = → 8595 = ↓ 8596 = ↔ 8597 = ↕ 8598 = ↖ 8599 = ↗
8600 = ↘ 8601 = ↙ 8602 = ↚ 8603 = ↛ 8604 = ↜ 8605 = ↝ 8606 = ↞ 8607 = ↟
8608 = ↠ 8609 = ↡ 8610 = ↢ 8611 = ↣ 8612 = ↤ 8613 = ↥ 8614 = ↦ 8615 = ↧
8616 = ↨ 8617 = ↩ 8618 = ↪ 8619 = ↫ 8620 = ↬ 8621 = ↭ 8622 = ↮ 8623 = ↯
8624 = ↰ 8625 = ↱ 8626 = ↲ 8627 = ↳ 8628 = ↴ 8629 = ↵ 8630 = ↶ 8631 = ↷
8632 = ↸ 8633 = ↹ 8634 = ↺ 8635 = ↻ 8636 = ↼ 8637 = ↽ 8638 = ↾ 8639 = ↿
8640 = ⇀ 8641 = ⇁ 8642 = ⇂ 8643 = ⇃ 8644 = ⇄ 8645 = ⇅ 8646 = ⇆ 8647 = ⇇
8648 = ⇈ 8649 = ⇉ 8650 = ⇊ 8651 = ⇋ 8652 = ⇌ 8653 = ⇍ 8654 = ⇎ 8655 = ⇏
8656 = ⇐ 8657 = ⇑ 8658 = ⇒ 8659 = ⇓ 8660 = ⇔ 8661 = ⇕ 8662 = ⇖ 8663 = ⇗
8664 = ⇘ 8665 = ⇙ 8666 = ⇚ 8667 = ⇛ 8668 = ⇜ 8669 = ⇝ 8670 = ⇞ 8671 = ⇟
8672 = ⇠ 8673 = ⇡ 8674 = ⇢ 8675 = ⇣ 8676 = ⇤ 8677 = ⇥ 8678 = ⇦ 8679 = ⇧
8680 = ⇨ 8681 = ⇩ 8682 = ⇪ 8683 = ⇫ 8684 = ⇬ 8685 = ⇭ 8686 = ⇮ 8687 = ⇯
8688 = ⇰ 8689 = ⇱ 8690 = ⇲ 8691 = ⇳ 8692 = ⇴ 8693 = ⇵ 8694 = ⇶ 8695 = ⇷
8696 = ⇸ 8697 = ⇹ 8698 = ⇺ 8699 = ⇻ 8700 = ⇼ 8701 = ⇽ 8702 = ⇾ 8703 = ⇿
8704 = ∀ 8705 = ∁ 8706 = ∂ 8707 = ∃ 8708 = ∄ 8709 = ∅ 8710 = ∆ 8711 = ∇
8712 = ∈ 8713 = ∉ 8714 = ∊ 8715 = ∋ 8716 = ∌ 8717 = ∍ 8718 = ∎ 8719 = ∏
8720 = ∐ 8721 = ∑ 8722 = − 8723 = ∓ 8724 = ∔ 8725 = ∕ 8726 = ∖ 8727 = ∗
8728 = ∘ 8729 = ∙ 8730 = √ 8731 = ∛ 8732 = ∜ 8733 = ∝ 8734 = ∞ 8735 = ∟
8736 = ∠ 8737 = ∡ 8738 = ∢ 8739 = ∣ 8740 = ∤ 8741 = ∥ 8742 = ∦ 8743 = ∧
8744 = ∨ 8745 = ∩ 8746 = ∪ 8747 = ∫ 8748 = ∬ 8749 = ∭ 8750 = ∮ 8751 = ∯
8752 = ∰ 8753 = ∱ 8754 = ∲ 8755 = ∳ 8756 = ∴ 8757 = ∵ 8758 = ∶ 8759 = ∷
8760 = ∸ 8761 = ∹ 8762 = ∺ 8763 = ∻ 8764 = ∼ 8765 = ∽ 8766 = ∾ 8767 = ∿
8768 = ≀ 8769 = ≁ 8770 = ≂ 8771 = ≃ 8772 = ≄ 8773 = ≅ 8774 = ≆ 8775 = ≇
8776 = ≈ 8777 = ≉ 8778 = ≊ 8779 = ≋ 8780 = ≌ 8781 = ≍ 8782 = ≎ 8783 = ≏
8784 = ≐ 8785 = ≑ 8786 = ≒ 8787 = ≓ 8788 = ≔ 8789 = ≕ 8790 = ≖ 8791 = ≗
8792 = ≘ 8793 = ≙ 8794 = ≚ 8795 = ≛ 8796 = ≜ 8797 = ≝ 8798 = ≞ 8799 = ≟
8800 = ≠ 8801 = ≡ 8802 = ≢ 8803 = ≣ 8804 = ≤ 8805 = ≥ 8806 = ≦ 8807 = ≧
8808 = ≨ 8809 = ≩ 8810 = ≪ 8811 = ≫ 8812 = ≬ 8813 = ≭ 8814 = ≮ 8815 = ≯
8816 = ≰ 8817 = ≱ 8818 = ≲ 8819 = ≳ 8820 = ≴ 8821 = ≵ 8822 = ≶ 8823 = ≷
8824 = ≸ 8825 = ≹ 8826 = ≺ 8827 = ≻ 8828 = ≼ 8829 = ≽ 8830 = ≾ 8831 = ≿
8832 = ⊀ 8833 = ⊁ 8834 = ⊂ 8835 = ⊃ 8836 = ⊄ 8837 = ⊅ 8838 = ⊆ 8839 = ⊇
8840 = ⊈ 8841 = ⊉ 8842 = ⊊ 8843 = ⊋ 8844 = ⊌ 8845 = ⊍ 8846 = ⊎ 8847 = ⊏
8848 = ⊐ 8849 = ⊑ 8850 = ⊒ 8851 = ⊓ 8852 = ⊔ 8853 = ⊕ 8854 = ⊖ 8855 = ⊗
8856 = ⊘ 8857 = ⊙ 8858 = ⊚ 8859 = ⊛ 8860 = ⊜ 8861 = ⊝ 8862 = ⊞ 8863 = ⊟
8864 = ⊠ 8865 = ⊡ 8866 = ⊢ 8867 = ⊣ 8868 = ⊤ 8869 = ⊥ 8870 = ⊦ 8871 = ⊧
8872 = ⊨ 8873 = ⊩ 8874 = ⊪ 8875 = ⊫ 8876 = ⊬ 8877 = ⊭ 8878 = ⊮ 8879 = ⊯
8880 = ⊰ 8881 = ⊱ 8882 = ⊲ 8883 = ⊳ 8884 = ⊴ 8885 = ⊵ 8886 = ⊶ 8887 = ⊷
8888 = ⊸ 8889 = ⊹ 8890 = ⊺ 8891 = ⊻ 8892 = ⊼ 8893 = ⊽ 8894 = ⊾ 8895 = ⊿
8896 = ⋀ 8897 = ⋁ 8898 = ⋂ 8899 = ⋃ 8900 = ⋄ 8901 = ⋅ 8902 = ⋆ 8903 = ⋇
8904 = ⋈ 8905 = ⋉ 8906 = ⋊ 8907 = ⋋ 8908 = ⋌ 8909 = ⋍ 8910 = ⋎ 8911 = ⋏
8912 = ⋐ 8913 = ⋑ 8914 = ⋒ 8915 = ⋓ 8916 = ⋔ 8917 = ⋕ 8918 = ⋖ 8919 = ⋗
8920 = ⋘ 8921 = ⋙ 8922 = ⋚ 8923 = ⋛ 8924 = ⋜ 8925 = ⋝ 8926 = ⋞ 8927 = ⋟
8928 = ⋠ 8929 = ⋡ 8930 = ⋢ 8931 = ⋣ 8932 = ⋤ 8933 = ⋥ 8934 = ⋦ 8935 = ⋧
8936 = ⋨ 8937 = ⋩ 8938 = ⋪ 8939 = ⋫ 8940 = ⋬ 8941 = ⋭ 8942 = ⋮ 8943 = ⋯
8944 = ⋰ 8945 = ⋱ 8946 = ⋲ 8947 = ⋳ 8948 = ⋴ 8949 = ⋵ 8950 = ⋶ 8951 = ⋷
8952 = ⋸ 8953 = ⋹ 8954 = ⋺ 8955 = ⋻ 8956 = ⋼ 8957 = ⋽ 8958 = ⋾ 8959 = ⋿
8960 = ⌀ 8961 = ⌁ 8962 = ⌂ 8963 = ⌃ 8964 = ⌄ 8965 = ⌅ 8966 = ⌆ 8967 = ⌇
8968 = ⌈ 8969 = ⌉ 8970 = ⌊ 8971 = ⌋ 8972 = ⌌ 8973 = ⌍ 8974 = ⌎ 8975 = ⌏
8976 = ⌐ 8977 = ⌑ 8978 = ⌒ 8979 = ⌓ 8980 = ⌔ 8981 = ⌕ 8982 = ⌖ 8983 = ⌗
8984 = ⌘ 8985 = ⌙ 8986 = ⌚ 8987 = ⌛ 8988 = ⌜ 8989 = ⌝ 8990 = ⌞ 8991 = ⌟
8992 = ⌠ 8993 = ⌡ 8994 = ⌢ 8995 = ⌣ 8996 = ⌤ 8997 = ⌥ 8998 = ⌦ 8999 = ⌧
9000 = ⌨ 9001 = 〈 9002 = 〉 9003 = ⌫ 9004 = ⌬ 9005 = ⌭ 9006 = ⌮ 9007 = ⌯
9008 = ⌰ 9009 = ⌱ 9010 = ⌲ 9011 = ⌳ 9012 = ⌴ 9013 = ⌵ 9014 = ⌶ 9015 = ⌷
9016 = ⌸ 9017 = ⌹ 9018 = ⌺ 9019 = ⌻ 9020 = ⌼ 9021 = ⌽ 9022 = ⌾ 9023 = ⌿
9024 = ⍀ 9025 = ⍁ 9026 = ⍂ 9027 = ⍃ 9028 = ⍄ 9029 = ⍅ 9030 = ⍆ 9031 = ⍇
9032 = ⍈ 9033 = ⍉ 9034 = ⍊ 9035 = ⍋ 9036 = ⍌ 9037 = ⍍ 9038 = ⍎ 9039 = ⍏
9040 = ⍐ 9041 = ⍑ 9042 = ⍒ 9043 = ⍓ 9044 = ⍔ 9045 = ⍕ 9046 = ⍖ 9047 = ⍗
9048 = ⍘ 9049 = ⍙ 9050 = ⍚ 9051 = ⍛ 9052 = ⍜ 9053 = ⍝ 9054 = ⍞ 9055 = ⍟
9056 = ⍠ 9057 = ⍡ 9058 = ⍢ 9059 = ⍣ 9060 = ⍤ 9061 = ⍥ 9062 = ⍦ 9063 = ⍧
9064 = ⍨ 9065 = ⍩ 9066 = ⍪ 9067 = ⍫ 9068 = ⍬ 9069 = ⍭ 9070 = ⍮ 9071 = ⍯
9072 = ⍰ 9073 = ⍱ 9074 = ⍲ 9075 = ⍳ 9076 = ⍴ 9077 = ⍵ 9078 = ⍶ 9079 = ⍷
9080 = ⍸ 9081 = ⍹ 9082 = ⍺ 9083 = ⍻ 9084 = ⍼ 9085 = ⍽ 9086 = ⍾ 9087 = ⍿
9088 = ⎀ 9089 = ⎁ 9090 = ⎂ 9091 = ⎃ 9092 = ⎄ 9093 = ⎅ 9094 = ⎆ 9095 = ⎇
9096 = ⎈ 9097 = ⎉ 9098 = ⎊ 9099 = ⎋ 9100 = ⎌ 9101 = ⎍ 9102 = ⎎ 9103 = ⎏
9104 = ⎐ 9105 = ⎑ 9106 = ⎒ 9107 = ⎓ 9108 = ⎔ 9109 = ⎕ 9110 = ⎖ 9111 = ⎗
9112 = ⎘ 9113 = ⎙ 9114 = ⎚ 9115 = ⎛ 9116 = ⎜ 9117 = ⎝ 9118 = ⎞ 9119 = ⎟
9120 = ⎠ 9121 = ⎡ 9122 = ⎢ 9123 = ⎣ 9124 = ⎤ 9125 = ⎥ 9126 = ⎦ 9127 = ⎧
9128 = ⎨ 9129 = ⎩ 9130 = ⎪ 9131 = ⎫ 9132 = ⎬ 9133 = ⎭ 9134 = ⎮ 9135 = ⎯
9136 = ⎰ 9137 = ⎱ 9138 = ⎲ 9139 = ⎳ 9140 = ⎴ 9141 = ⎵ 9142 = ⎶ 9143 = ⎷
9144 = ⎸ 9145 = ⎹ 9146 = ⎺ 9147 = ⎻ 9148 = ⎼ 9149 = ⎽ 9150 = ⎾ 9151 = ⎿
9152 = ⏀ 9153 = ⏁ 9154 = ⏂ 9155 = ⏃ 9156 = ⏄ 9157 = ⏅ 9158 = ⏆ 9159 = ⏇
9160 = ⏈ 9161 = ⏉ 9162 = ⏊ 9163 = ⏋ 9164 = ⏌ 9165 = ⏍ 9166 = ⏎ 9167 = ⏏
9168 = ⏐ 9169 = ⏑ 9170 = ⏒ 9171 = ⏓ 9172 = ⏔ 9173 = ⏕ 9174 = ⏖ 9175 = ⏗
9176 = ⏘ 9177 = ⏙ 9178 = ⏚ 9179 = ⏛ 9180 = ⏜ 9181 = ⏝ 9182 = ⏞ 9183 = ⏟
9184 = ⏠ 9185 = ⏡ 9186 = ⏢ 9187 = ⏣ 9188 = ⏤ 9189 = ⏥ 9190 = ⏦ 9191 = ⏧
9192 = ⏨ 9193 = ⏩ 9194 = ⏪ 9195 = ⏫ 9196 = ⏬ 9197 = ⏭ 9198 = ⏮ 9199 = ⏯
9200 = ⏰ 9201 = ⏱ 9202 = ⏲ 9203 = ⏳ 9204 = ⏴ 9205 = ⏵ 9206 = ⏶ 9207 = ⏷
9208 = ⏸ 9209 = ⏹ 9210 = ⏺ 9211 = ⏻ 9212 = ⏼ 9213 = ⏽ 9214 = ⏾ 9215 = ⏿
9216 = ␀ 9217 = ␁ 9218 = ␂ 9219 = ␃ 9220 = ␄ 9221 = ␅ 9222 = ␆ 9223 = ␇
9224 = ␈ 9225 = ␉ 9226 = ␊ 9227 = ␋ 9228 = ␌ 9229 = ␍ 9230 = ␎ 9231 = ␏
9232 = ␐ 9233 = ␑ 9234 = ␒ 9235 = ␓ 9236 = ␔ 9237 = ␕ 9238 = ␖ 9239 = ␗
9240 = ␘ 9241 = ␙ 9242 = ␚ 9243 = ␛ 9244 = ␜ 9245 = ␝ 9246 = ␞ 9247 = ␟
9248 = ␠ 9249 = ␡ 9250 = ␢ 9251 = ␣ 9252 = ␤ 9253 = ␥ 9254 = ␦ 9255 = ␧
9256 = ␨ 9257 = ␩ 9258 = ␪ 9259 = ␫ 9260 = ␬ 9261 = ␭ 9262 = ␮ 9263 = ␯
9264 = ␰ 9265 = ␱ 9266 = ␲ 9267 = ␳ 9268 = ␴ 9269 = ␵ 9270 = ␶ 9271 = ␷
9272 = ␸ 9273 = ␹ 9274 = ␺ 9275 = ␻ 9276 = ␼ 9277 = ␽ 9278 = ␾ 9279 = ␿
9280 = ⑀ 9281 = ⑁ 9282 = ⑂ 9283 = ⑃ 9284 = ⑄ 9285 = ⑅ 9286 = ⑆ 9287 = ⑇
9288 = ⑈ 9289 = ⑉ 9290 = ⑊ 9291 = ⑋ 9292 = ⑌ 9293 = ⑍ 9294 = ⑎ 9295 = ⑏
9296 = ⑐ 9297 = ⑑ 9298 = ⑒ 9299 = ⑓ 9300 = ⑔ 9301 = ⑕ 9302 = ⑖ 9303 = ⑗
9304 = ⑘ 9305 = ⑙ 9306 = ⑚ 9307 = ⑛ 9308 = ⑜ 9309 = ⑝ 9310 = ⑞ 9311 = ⑟
9312 = ① 9313 = ② 9314 = ③ 9315 = ④ 9316 = ⑤ 9317 = ⑥ 9318 = ⑦ 9319 = ⑧
9320 = ⑨ 9321 = ⑩ 9322 = ⑪ 9323 = ⑫ 9324 = ⑬ 9325 = ⑭ 9326 = ⑮ 9327 = ⑯
9328 = ⑰ 9329 = ⑱ 9330 = ⑲ 9331 = ⑳ 9332 = ⑴ 9333 = ⑵ 9334 = ⑶ 9335 = ⑷
9336 = ⑸ 9337 = ⑹ 9338 = ⑺ 9339 = ⑻ 9340 = ⑼ 9341 = ⑽ 9342 = ⑾ 9343 = ⑿
9344 = ⒀ 9345 = ⒁ 9346 = ⒂ 9347 = ⒃ 9348 = ⒄ 9349 = ⒅ 9350 = ⒆ 9351 = ⒇
9352 = ⒈ 9353 = ⒉ 9354 = ⒊ 9355 = ⒋ 9356 = ⒌ 9357 = ⒍ 9358 = ⒎ 9359 = ⒏
9360 = ⒐ 9361 = ⒑ 9362 = ⒒ 9363 = ⒓ 9364 = ⒔ 9365 = ⒕ 9366 = ⒖ 9367 = ⒗
9368 = ⒘ 9369 = ⒙ 9370 = ⒚ 9371 = ⒛ 9372 = ⒜ 9373 = ⒝ 9374 = ⒞ 9375 = ⒟
9376 = ⒠ 9377 = ⒡ 9378 = ⒢ 9379 = ⒣ 9380 = ⒤ 9381 = ⒥ 9382 = ⒦ 9383 = ⒧
9384 = ⒨ 9385 = ⒩ 9386 = ⒪ 9387 = ⒫ 9388 = ⒬ 9389 = ⒭ 9390 = ⒮ 9391 = ⒯
9392 = ⒰ 9393 = ⒱ 9394 = ⒲ 9395 = ⒳ 9396 = ⒴ 9397 = ⒵ 9398 = Ⓐ 9399 = Ⓑ
9400 = Ⓒ 9401 = Ⓓ 9402 = Ⓔ 9403 = Ⓕ 9404 = Ⓖ 9405 = Ⓗ 9406 = Ⓘ 9407 = Ⓙ
9408 = Ⓚ 9409 = Ⓛ 9410 = Ⓜ 9411 = Ⓝ 9412 = Ⓞ 9413 = Ⓟ 9414 = Ⓠ 9415 = Ⓡ
9416 = Ⓢ 9417 = Ⓣ 9418 = Ⓤ 9419 = Ⓥ 9420 = Ⓦ 9421 = Ⓧ 9422 = Ⓨ 9423 = Ⓩ
9424 = ⓐ 9425 = ⓑ 9426 = ⓒ 9427 = ⓓ 9428 = ⓔ 9429 = ⓕ 9430 = ⓖ 9431 = ⓗ
9432 = ⓘ 9433 = ⓙ 9434 = ⓚ 9435 = ⓛ 9436 = ⓜ 9437 = ⓝ 9438 = ⓞ 9439 = ⓟ
9440 = ⓠ 9441 = ⓡ 9442 = ⓢ 9443 = ⓣ 9444 = ⓤ 9445 = ⓥ 9446 = ⓦ 9447 = ⓧ
9448 = ⓨ 9449 = ⓩ 9450 = ⓪ 9451 = ⓫ 9452 = ⓬ 9453 = ⓭ 9454 = ⓮ 9455 = ⓯
9456 = ⓰ 9457 = ⓱ 9458 = ⓲ 9459 = ⓳ 9460 = ⓴ 9461 = ⓵ 9462 = ⓶ 9463 = ⓷
9464 = ⓸ 9465 = ⓹ 9466 = ⓺ 9467 = ⓻ 9468 = ⓼ 9469 = ⓽ 9470 = ⓾ 9471 = ⓿
9472 = ─ 9473 = ━ 9474 = │ 9475 = ┃ 9476 = ┄ 9477 = ┅ 9478 = ┆ 9479 = ┇
9480 = ┈ 9481 = ┉ 9482 = ┊ 9483 = ┋ 9484 = ┌ 9485 = ┍ 9486 = ┎ 9487 = ┏
9488 = ┐ 9489 = ┑ 9490 = ┒ 9491 = ┓ 9492 = └ 9493 = ┕ 9494 = ┖ 9495 = ┗
9496 = ┘ 9497 = ┙ 9498 = ┚ 9499 = ┛ 9500 = ├ 9501 = ┝ 9502 = ┞ 9503 = ┟
9504 = ┠ 9505 = ┡ 9506 = ┢ 9507 = ┣ 9508 = ┤ 9509 = ┥ 9510 = ┦ 9511 = ┧
9512 = ┨ 9513 = ┩ 9514 = ┪ 9515 = ┫ 9516 = ┬ 9517 = ┭ 9518 = ┮ 9519 = ┯
9520 = ┰ 9521 = ┱ 9522 = ┲ 9523 = ┳ 9524 = ┴ 9525 = ┵ 9526 = ┶ 9527 = ┷
9528 = ┸ 9529 = ┹ 9530 = ┺ 9531 = ┻ 9532 = ┼ 9533 = ┽ 9534 = ┾ 9535 = ┿
9536 = ╀ 9537 = ╁ 9538 = ╂ 9539 = ╃ 9540 = ╄ 9541 = ╅ 9542 = ╆ 9543 = ╇
9544 = ╈ 9545 = ╉ 9546 = ╊ 9547 = ╋ 9548 = ╌ 9549 = ╍ 9550 = ╎ 9551 = ╏
9552 = ═ 9553 = ║ 9554 = ╒ 9555 = ╓ 9556 = ╔ 9557 = ╕ 9558 = ╖ 9559 = ╗
9560 = ╘ 9561 = ╙ 9562 = ╚ 9563 = ╛ 9564 = ╜ 9565 = ╝ 9566 = ╞ 9567 = ╟
9568 = ╠ 9569 = ╡ 9570 = ╢ 9571 = ╣ 9572 = ╤ 9573 = ╥ 9574 = ╦ 9575 = ╧
9576 = ╨ 9577 = ╩ 9578 = ╪ 9579 = ╫ 9580 = ╬ 9581 = ╭ 9582 = ╮ 9583 = ╯
9584 = ╰ 9585 = ╱ 9586 = ╲ 9587 = ╳ 9588 = ╴ 9589 = ╵ 9590 = ╶ 9591 = ╷
9592 = ╸ 9593 = ╹ 9594 = ╺ 9595 = ╻ 9596 = ╼ 9597 = ╽ 9598 = ╾ 9599 = ╿
9600 = ▀ 9601 = ▁ 9602 = ▂ 9603 = ▃ 9604 = ▄ 9605 = ▅ 9606 = ▆ 9607 = ▇
9608 = █ 9609 = ▉ 9610 = ▊ 9611 = ▋ 9612 = ▌ 9613 = ▍ 9614 = ▎ 9615 = ▏
9616 = ▐ 9617 = ░ 9618 = ▒ 9619 = ▓ 9620 = ▔ 9621 = ▕ 9622 = ▖ 9623 = ▗
9624 = ▘ 9625 = ▙ 9626 = ▚ 9627 = ▛ 9628 = ▜ 9629 = ▝ 9630 = ▞ 9631 = ▟
9632 = ■ 9633 = □ 9634 = ▢ 9635 = ▣ 9636 = ▤ 9637 = ▥ 9638 = ▦ 9639 = ▧
9640 = ▨ 9641 = ▩ 9642 = ▪ 9643 = ▫ 9644 = ▬ 9645 = ▭ 9646 = ▮ 9647 = ▯
9648 = ▰ 9649 = ▱ 9650 = ▲ 9651 = △ 9652 = ▴ 9653 = ▵ 9654 = ▶ 9655 = ▷
9656 = ▸ 9657 = ▹ 9658 = ► 9659 = ▻ 9660 = ▼ 9661 = ▽ 9662 = ▾ 9663 = ▿
9664 = ◀ 9665 = ◁ 9666 = ◂ 9667 = ◃ 9668 = ◄ 9669 = ◅ 9670 = ◆ 9671 = ◇
9672 = ◈ 9673 = ◉ 9674 = ◊ 9675 = ○ 9676 = ◌ 9677 = ◍ 9678 = ◎ 9679 = ●
9680 = ◐ 9681 = ◑ 9682 = ◒ 9683 = ◓ 9684 = ◔ 9685 = ◕ 9686 = ◖ 9687 = ◗
9688 = ◘ 9689 = ◙ 9690 = ◚ 9691 = ◛ 9692 = ◜ 9693 = ◝ 9694 = ◞ 9695 = ◟
9696 = ◠ 9697 = ◡ 9698 = ◢ 9699 = ◣ 9700 = ◤ 9701 = ◥ 9702 = ◦ 9703 = ◧
9704 = ◨ 9705 = ◩ 9706 = ◪ 9707 = ◫ 9708 = ◬ 9709 = ◭ 9710 = ◮ 9711 = ◯
9712 = ◰ 9713 = ◱ 9714 = ◲ 9715 = ◳ 9716 = ◴ 9717 = ◵ 9718 = ◶ 9719 = ◷
9720 = ◸ 9721 = ◹ 9722 = ◺ 9723 = ◻ 9724 = ◼ 9725 = ◽ 9726 = ◾ 9727 = ◿
9728 = ☀ 9729 = ☁ 9730 = ☂ 9731 = ☃ 9732 = ☄ 9733 = ★ 9734 = ☆ 9735 = ☇
9736 = ☈ 9737 = ☉ 9738 = ☊ 9739 = ☋ 9740 = ☌ 9741 = ☍ 9742 = ☎ 9743 = ☏
9744 = ☐ 9745 = ☑ 9746 = ☒ 9747 = ☓ 9748 = ☔ 9749 = ☕ 9750 = ☖ 9751 = ☗
9752 = ☘ 9753 = ☙ 9754 = ☚ 9755 = ☛ 9756 = ☜ 9757 = ☝ 9758 = ☞ 9759 = ☟
9760 = ☠ 9761 = ☡ 9762 = ☢ 9763 = ☣ 9764 = ☤ 9765 = ☥ 9766 = ☦ 9767 = ☧
9768 = ☨ 9769 = ☩ 9770 = ☪ 9771 = ☫ 9772 = ☬ 9773 = ☭ 9774 = ☮ 9775 = ☯
9776 = ☰ 9777 = ☱ 9778 = ☲ 9779 = ☳ 9780 = ☴ 9781 = ☵ 9782 = ☶ 9783 = ☷
9784 = ☸ 9785 = ☹ 9786 = ☺ 9787 = ☻ 9788 = ☼ 9789 = ☽ 9790 = ☾ 9791 = ☿
9792 = ♀ 9793 = ♁ 9794 = ♂ 9795 = ♃ 9796 = ♄ 9797 = ♅ 9798 = ♆ 9799 = ♇
9800 = ♈ 9801 = ♉ 9802 = ♊ 9803 = ♋ 9804 = ♌ 9805 = ♍ 9806 = ♎ 9807 = ♏
9808 = ♐ 9809 = ♑ 9810 = ♒ 9811 = ♓ 9812 = ♔ 9813 = ♕ 9814 = ♖ 9815 = ♗
9816 = ♘ 9817 = ♙ 9818 = ♚ 9819 = ♛ 9820 = ♜ 9821 = ♝ 9822 = ♞ 9823 = ♟
9824 = ♠ 9825 = ♡ 9826 = ♢ 9827 = ♣ 9828 = ♤ 9829 = ♥ 9830 = ♦ 9831 = ♧
9832 = ♨ 9833 = ♩ 9834 = ♪ 9835 = ♫ 9836 = ♬ 9837 = ♭ 9838 = ♮ 9839 = ♯
9840 = ♰ 9841 = ♱ 9842 = ♲ 9843 = ♳ 9844 = ♴ 9845 = ♵ 9846 = ♶ 9847 = ♷
9848 = ♸ 9849 = ♹ 9850 = ♺ 9851 = ♻ 9852 = ♼ 9853 = ♽ 9854 = ♾ 9855 = ♿
9856 = ⚀ 9857 = ⚁ 9858 = ⚂ 9859 = ⚃ 9860 = ⚄ 9861 = ⚅ 9862 = ⚆ 9863 = ⚇
9864 = ⚈ 9865 = ⚉ 9866 = ⚊ 9867 = ⚋ 9868 = ⚌ 9869 = ⚍ 9870 = ⚎ 9871 = ⚏
9872 = ⚐ 9873 = ⚑ 9874 = ⚒ 9875 = ⚓ 9876 = ⚔ 9877 = ⚕ 9878 = ⚖ 9879 = ⚗
9880 = ⚘ 9881 = ⚙ 9882 = ⚚ 9883 = ⚛ 9884 = ⚜ 9885 = ⚝ 9886 = ⚞ 9887 = ⚟
9888 = ⚠ 9889 = ⚡ 9890 = ⚢ 9891 = ⚣ 9892 = ⚤ 9893 = ⚥ 9894 = ⚦ 9895 = ⚧
9896 = ⚨ 9897 = ⚩ 9898 = ⚪ 9899 = ⚫ 9900 = ⚬ 9901 = ⚭ 9902 = ⚮ 9903 = ⚯
9904 = ⚰ 9905 = ⚱ 9906 = ⚲ 9907 = ⚳ 9908 = ⚴ 9909 = ⚵ 9910 = ⚶ 9911 = ⚷
9912 = ⚸ 9913 = ⚹ 9914 = ⚺ 9915 = ⚻ 9916 = ⚼ 9917 = ⚽ 9918 = ⚾ 9919 = ⚿
9920 = ⛀ 9921 = ⛁ 9922 = ⛂ 9923 = ⛃ 9924 = ⛄ 9925 = ⛅ 9926 = ⛆ 9927 = ⛇
9928 = ⛈ 9929 = ⛉ 9930 = ⛊ 9931 = ⛋ 9932 = ⛌ 9933 = ⛍ 9934 = ⛎ 9935 = ⛏
9936 = ⛐ 9937 = ⛑ 9938 = ⛒ 9939 = ⛓ 9940 = ⛔ 9941 = ⛕ 9942 = ⛖ 9943 = ⛗
9944 = ⛘ 9945 = ⛙ 9946 = ⛚ 9947 = ⛛ 9948 = ⛜ 9949 = ⛝ 9950 = ⛞ 9951 = ⛟
9952 = ⛠ 9953 = ⛡ 9954 = ⛢ 9955 = ⛣ 9956 = ⛤ 9957 = ⛥ 9958 = ⛦ 9959 = ⛧
9960 = ⛨ 9961 = ⛩ 9962 = ⛪ 9963 = ⛫ 9964 = ⛬ 9965 = ⛭ 9966 = ⛮ 9967 = ⛯
9968 = ⛰ 9969 = ⛱ 9970 = ⛲ 9971 = ⛳ 9972 = ⛴ 9973 = ⛵ 9974 = ⛶ 9975 = ⛷
9976 = ⛸ 9977 = ⛹ 9978 = ⛺ 9979 = ⛻ 9980 = ⛼ 9981 = ⛽ 9982 = ⛾ 9983 = ⛿
9984 = ✀ 9985 = ✁ 9986 = ✂ 9987 = ✃ 9988 = ✄ 9989 = ✅ 9990 = ✆ 9991 = ✇
9992 = ✈ 9993 = ✉ 9994 = ✊ 9995 = ✋ 9996 = ✌ 9997 = ✍ 9998 = ✎ 9999 = ✏
10000 = ✐ 10001 = ✑ 10002 = ✒ 10003 = ✓ 10004 = ✔ 10005 = ✕ 10006 = ✖ 10007 = ✗
10008 = ✘ 10009 = ✙ 10010 = ✚ 10011 = ✛ 10012 = ✜ 10013 = ✝ 10014 = ✞ 10015 = ✟
10016 = ✠ 10017 = ✡ 10018 = ✢ 10019 = ✣ 10020 = ✤ 10021 = ✥ 10022 = ✦ 10023 = ✧
10024 = ✨ 10025 = ✩ 10026 = ✪ 10027 = ✫ 10028 = ✬ 10029 = ✭ 10030 = ✮ 10031 = ✯
10032 = ✰ 10033 = ✱ 10034 = ✲ 10035 = ✳ 10036 = ✴ 10037 = ✵ 10038 = ✶ 10039 = ✷
10040 = ✸ 10041 = ✹ 10042 = ✺ 10043 = ✻ 10044 = ✼ 10045 = ✽ 10046 = ✾ 10047 = ✿
10048 = ❀ 10049 = ❁ 10050 = ❂ 10051 = ❃ 10052 = ❄ 10053 = ❅ 10054 = ❆ 10055 = ❇
10056 = ❈ 10057 = ❉ 10058 = ❊ 10059 = ❋ 10060 = ❌ 10061 = ❍ 10062 = ❎ 10063 = ❏
10064 = ❐ 10065 = ❑ 10066 = ❒ 10067 = ❓ 10068 = ❔ 10069 = ❕ 10070 = ❖ 10071 = ❗
10072 = ❘ 10073 = ❙ 10074 = ❚ 10075 = ❛ 10076 = ❜ 10077 = ❝ 10078 = ❞ 10079 = ❟
10080 = ❠ 10081 = ❡ 10082 = ❢ 10083 = ❣ 10084 = ❤ 10085 = ❥ 10086 = ❦ 10087 = ❧
10088 = ❨ 10089 = ❩ 10090 = ❪ 10091 = ❫ 10092 = ❬ 10093 = ❭ 10094 = ❮ 10095 = ❯
10096 = ❰ 10097 = ❱ 10098 = ❲ 10099 = ❳ 10100 = ❴ 10101 = ❵ 10102 = ❶ 10103 = ❷
10104 = ❸ 10105 = ❹ 10106 = ❺ 10107 = ❻ 10108 = ❼ 10109 = ❽ 10110 = ❾ 10111 = ❿
10112 = ➀ 10113 = ➁ 10114 = ➂ 10115 = ➃ 10116 = ➄ 10117 = ➅ 10118 = ➆ 10119 = ➇
10120 = ➈ 10121 = ➉ 10122 = ➊ 10123 = ➋ 10124 = ➌ 10125 = ➍ 10126 = ➎ 10127 = ➏
10128 = ➐ 10129 = ➑ 10130 = ➒ 10131 = ➓ 10132 = ➔ 10133 = ➕ 10134 = ➖ 10135 = ➗
10136 = ➘ 10137 = ➙ 10138 = ➚ 10139 = ➛ 10140 = ➜ 10141 = ➝ 10142 = ➞ 10143 = ➟
10144 = ➠ 10145 = ➡ 10146 = ➢ 10147 = ➣ 10148 = ➤ 10149 = ➥ 10150 = ➦ 10151 = ➧
10152 = ➨ 10153 = ➩ 10154 = ➪ 10155 = ➫ 10156 = ➬ 10157 = ➭ 10158 = ➮ 10159 = ➯
10160 = ➰ 10161 = ➱ 10162 = ➲ 10163 = ➳ 10164 = ➴ 10165 = ➵ 10166 = ➶ 10167 = ➷
10168 = ➸ 10169 = ➹ 10170 = ➺ 10171 = ➻ 10172 = ➼ 10173 = ➽ 10174 = ➾ 10175 = ➿
10176 = ⟀ 10177 = ⟁ 10178 = ⟂ 10179 = ⟃ 10180 = ⟄ 10181 = ⟅ 10182 = ⟆ 10183 = ⟇
10184 = ⟈ 10185 = ⟉ 10186 = ⟊ 10187 = ⟋ 10188 = ⟌ 10189 = ⟍ 10190 = ⟎ 10191 = ⟏
10192 = ⟐ 10193 = ⟑ 10194 = ⟒ 10195 = ⟓ 10196 = ⟔ 10197 = ⟕ 10198 = ⟖ 10199 = ⟗
10200 = ⟘ 10201 = ⟙ 10202 = ⟚ 10203 = ⟛ 10204 = ⟜ 10205 = ⟝ 10206 = ⟞ 10207 = ⟟
10208 = ⟠ 10209 = ⟡ 10210 = ⟢ 10211 = ⟣ 10212 = ⟤ 10213 = ⟥ 10214 = ⟦ 10215 = ⟧
10216 = ⟨ 10217 = ⟩ 10218 = ⟪ 10219 = ⟫ 10220 = ⟬ 10221 = ⟭ 10222 = ⟮ 10223 = ⟯
10224 = ⟰ 10225 = ⟱ 10226 = ⟲ 10227 = ⟳ 10228 = ⟴ 10229 = ⟵ 10230 = ⟶ 10231 = ⟷
10232 = ⟸ 10233 = ⟹ 10234 = ⟺ 10235 = ⟻ 10236 = ⟼ 10237 = ⟽ 10238 = ⟾ 10239 = ⟿

Designing For Every Browser: How To Make Your Site Fully Cross Browser Compatible

Posted by Justin

What consumers see as freedom of choice when choosing a browser, CSS coders see as a nightmare. Here’s a quick list of popular browsers, just off the top of my head:

• Internet Explorer 5
• Internet Explorer 5.5
• Internet Explorer 6
• Internet Explorer 7
• Firefox 1.5
• Firefox 2
• Opera 7
• Opera 8
• Opera 9
• Safari

There are 10 browsers listed right there, and that doesn’t even count the rest of Unix! How do you create a design that looks the same in so many browsers? Well, you save this post of course!

I’ve included something for everyone, from different renderings of the box model, to already made 100% cross browser compatible CSS layouts and even ways to check your site in different browsers.

1. Cross Browser CSS For Your Site
   Emil Stenstrom writes some guidelines for making your CSS cross browser compatible. This site has very good advice and comes from ideas being practiced, not theories.
2. Starting With CSS: Revisited
   Every browser out there has default styling applied to HTML tags. The problem is that every browser’s default styling is a little different. Using the stylesheet applied, you can remove the default padding and margins and start with all browsers rendering the same.
3. undohtml.css
   This is another variation of the technique above. This one is a little more widely adopted and removes ALL padding and margins.
4. Two CSS Hacks For Identical Pages Two CSS hacks that can be implemented for cross browser rendering. The article also has excellent advice on what to do when you start coding.
5. CSS Hacks & Issues
   This article covers little tips and tricks you can use to get rid of some of the quirks in Internet Explorer’s rendering of your CSS.
6. Box Model Hack
   Internet Explorer 5 and 5.5 incorrectly render the box model. Use this “hack” in your CSS to get them to render it the correct way.
7. Eric Meyer On CSS
   CSS Guru Eric Meyer talks about tricking browsers and hiding styles. Sometimes a you have to be a little sneaky to get cross browser support for your CSS.
8. /* Position Is Everything */
   This is absolutely required reading for anyone wanting to code CSS layouts. After reading this site you will understand exactly how to write for all browsers.
9. glish.com : CSS layout techniques
   glish.com has published examples of 3 column layouts, 2 column layouts and fluid versions of many more. The best part is they all validate and work the same in EVERY browser.
10. 100 Percent Cross Browser, Pure CSS Layouts
    Another website with pure CSS layouts. This one is especially noteworthy because there are tons of layouts here and all of them you have probably seen on a website somewhere.
11. Rendering Mode and Doctype Switching
    Did you know that in “standards mode” Internet Explorer 6 renders the box model correctly? Putting all browsers into “standards mode” is an easy way to ensure that your CSS is rendered the same in all browsers. This page shows you what DOCTYPE to use to trigger “standards mode”.
12. Activating the Right Layout Mode Using the Doctype Declaration
    This site has a table showing all modern browsers and the effect (standard or quirks mode) each doctype has on them.
13. In Search of the Holy Grail
    This article from A List Apart shows you how to create a fluid, 3 column layout that works in every browser currently on the market. If you want you can always just copy the final code and modify it, but it’s better to understand why the CSS is written the way it is.
14. Litmus Labs: CSSVista
    CSSVista is an application from Litmus Labs that enables you to edit CSS live in both Firefox and Internet Explorer. No more refreshing two browsers every time you make a change.
15. Browser Shots
    This online tool takes screenshots of your website in all sorts of browsers and displays the results. It’s great for testing in different browsers without having to install any.
16. IE NetRenderer
    Another online tool that instantly renders your site in a variety of Internet Explorer versions.