The short answer is ALWAYS!  But let’s rewind a bit and provide some context.

You probably know by now that IE8 renders pages in standard mode by default.  The IE8 team made this decision to ensure the best experience for their users moving forward.  At the same time, the team has been very concerned about all the “hacks” that people had to go through to render pages using older versions of IE.  This is why Microsoft decided to provide a compatibility mode in IE8 to help during the transition and provide the best possible experience to users of non standard web sites.

A very complete summary on the IE8 team blog about compatibility can be found following this link. 

Here is an excerpt from the above post that really answers the question: “to tag or not to tag?”

“Site owners are *always* in control of their content. By default, Internet Explorer uses DOCTYPE switching to determine Quirks v. Standards mode (again, Standards mode maps to IE8 Standards by default). Site owners can choose to use the X-UA-Compatible tag to be absolutely declarative about how they’d like their site to display and to map Standards mode pages to IE7 Standards. Use of the X-UA-Compatible tag overrides Compatibility View on the client.” 

Compatibility mode can be triggered programmatically and I believe this is what every developer should do.  The reason is simple, you want to give your customer the best possible experience on your site.  You don't need to give your customer unnecessary choices.

There are several scenarios:

- If you have already tested your web site in IE7 and you are not yet prepared to make the transition you can just add the compatibility meta tag to all  your pages and they will automatically render in IE7 mode.

- If you are gradually transitioning to more standard code, you can selectively add the compatibility meta tag to the pages that you have not fixed and maybe never will (outdated content, support pages, etc...).

- If your code works well with IE8 then you should add the IE8 met tag!  This will ensure that your code will continue to render correctly even after the next browser transition.

In summary, the compatibility UA-X meta tag is the perfect way to ensure that your customers will enjoy your pages the way they were intended.

At ArtinSoft we have created the IE8 Compatibility Wizard that allows you to automate the meta tagging process.  You can check it out at: http://www.aggiorno.com/aggiornoexpress.aspx

Go ahead and TAG all your pages!

There still are some web pages that use HTML tables to surround an element with a border.  Is there a better way to do this using CSS and crystal-clear HTML code?

The Solution

It is surprising that in this age of the Web 2.0 it is still possible to find web pages that use tables to add a border to an HTML element.  For example, the following code adds a border 30 pixel thick around a p block:

<table bgcolor="green">
   <tr><td colspan="3"><img src="imgs/spacer.GIF" height="30"/></td></tr>
   <tr><td><img src="imgs/spacer.GIF" width="30"/></td>
       <td><p width="150">Paragraph content</p></td>
       <td><img src="imgs/spacer.GIF" width="30"/></td></tr>
   <tr><td colspan="3"><img src="imgs/spacer.GIF" height="30"/></td></tr>
</table>

At first sight this code is clumsy and certainly is a cause of distraction to the eye and the mind.  It takes a few valuable seconds of one’s brain processing time to determine that all those empty cells are there just to create a border around a single element.

It would be great to improve the readability and maintainability of this code fragment and we should also separate presentation details from the actual content.

The steps necessary to improve this code can be summarized with html-like pattern syntax in the following way:

Pattern to detect

<table bgcolor="{Color}" cellpadding="0" cellspacing="0">
   <tr><td colspan="3"><img src="imgs/spacer.GIF" height="{BorderTopHeight}"/></td></tr>
   <tr><td><img src="imgs/spacer.GIF" width="{LeftBorderWidth}"/></td>
      <td width="{ContentWidth}"><p>{Content}</p></td>
      <td><img src="imgs/spacer.GIF" width="{RightBorderWidth}"/></td>   </tr>
   <tr><td colspan="3"><img src="imgs/spacer.GIF" height="{BorderBottomHeight}"/></td></tr>
</table> 

Replacement

<p class=”border30”>{Content}</p>

Additional elements

<style type="text/css">
p.border30      {
   background-color:{Color};
   border:solid {BorderTopHeight}px {RightBorderWidth}px {BorderBottomHeight}px {LeftBorderWidth}px {Color};
   width:{ContentWidth}px;      }
</style>

The style included in the Additional elements section needs to be inserted in the same page’s head block.

For our example, the final code would be:

This code really is crystal-clear to the eye and the mind and could be produced by a relatively simple pattern.

Some external references

CSS border properties

What Are We Facing?

Commonly, web designers are faced with the task of presenting tabular data, a common practice to display lots of data is the use of different colors for alternate rows, this is used as an aid to improve the readability of the information presented.

The most common way to use different colors in alternating rows is to use different CSS classes for the odd and even rows so we can apply a different style to each one. There are several ways to generate the classes in the rows, they can be generated when the table is created, usually by a server side script (ASP, PHP, JSP), or the classes can be set on client side, using javascript.

The Solution

Because we are trying to create a generic sample, we are going to focus on the client side generation of the CSS classes, and one of the best ways to achieve this is using jQuery.

jQuery is a very popular javascript library that provides us with many really useful functions and utilities that allow really neat effects in the client side code.

Including jQuery

To use the jQuery functions in our HTML document, we have to download the latest jQuery library from the jQuery download page and include the library in the document with a script tag like the following in the head of the page.

<script src="jQuery-1.2.6.min.js" type ="text/javascript"></script>

This tag adds a link to the jQuery library (version 1.2.6), and allows you to use jQuery functions in all the scripts of your page.

Creating the markup and styles

To create the "striped" table, we need to create a table with an id to identify it and apply the style only to that table, in this example we'll name it "stripedTable"

<table id="stripedTable">

After the table is defined, we need to create the styles that will apply to the table rows, thus we create a style for the even rows and another for the odd rows. In this code sample we'll also create an style for the table header

    <style type="text/css"> 
       .oddRow {background-color:#eeeeee;} 
       .evenRow {background-color:#cccccc;} 
       th {background-color:#666666;} 
    </style>

Creating the jQuery code

Finally, we need to create the jQuery code that will add the CSS classes to the tr tags, this is achieved with this code:

    <script type="text/javascript"> 
       $(document).ready(function() { 
       $("#stripedTable tr:odd").addClass("oddRow"); 
       $("#stripedTable tr:even").addClass("evenRow"); 
    }); 
    </script>

The first line of this code inside the script, registers a new function to be executed when the page has finished loading, the next line selects the odd tr tags inside an element with the id stripedTable and adds them the class "oddRow", the last line does the same with the even lines, adding them the class "evenRow".

Given that the assigned class names are the classes that are defined in the CSS style block, the table will be rendered with that style, producing the following result:

As we can see, the table gets the styles in a really neat way, and we have improved the readability of the presented information easily.

Some external references

• ALA Zebra Striping Analysis.
• jQuery Main Page.
• Zebra Striping Made Easy with jQuery.

What are we facing?

I am an ASP.NET programmer and need to complete some web pages that I received from a web graphic designer.  I have to provide an implementation for a read-only table with specific visual characteristics and it must get its data from a database.

The Solution

One possible solution is to use an ASP.NET 2.0 GridView control.  You can reuse part of the code that the designer has already written.

It will be necessary to perform the following tasks:

1. Add a GridView control to the web page.
2. Add a SQLDataSource control to the web page and assign it to the GridView.
3. Move the table’s style info into the GridView.
4. Remove the original table.
5. Complete the code to populate the GridView.

Steps 1 through 4 can be summarized with html-like pattern syntax in the following way:

Original code:

<table id="productList" {Table tag attributes} style="{Table style values}"> 
   <tr style="{Row 1 style values}"> 
      {Sample data 1} 
   </tr> 
   <tr style="{Row 2 style values}"> 
      {Sample data 2} 
   </tr> 
   ...
</table>

Final code:

<asp:GridView ID="productList" runat="server" DataSourceID="SqlDataSource1" 
   {Conversion of Table tag attributes} Style="{Table style values}"> 
   <RowStyle {Conversion of Row 1 style values} /> 
   <AlternatingRowStyle {Conversion of Row 2 style values} />
</asp:GridView>        

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
   DataSourceMode="DataReader" 
   ConnectionString="<%$ ConnectionStrings:MyDatabase%>" 
   SelectCommand="SELECT Column1, Column2,... FROM MyTable"/>

In this sample, curly brackets indicate a collection of html attributes or elements, these collections are reused in the final code in their original form or converted to the corresponding AS.NET tag attributes.

Some external references

• GridView quickstart tutorial
• Comparing ListView with GridView,DataList and Repeater

What are we facing?

I want to use border but not with square corners, instead I prefer to place rounded corners to my boxes.

The Solution

Actually it's impossible to create any kind of rounded shapes just with HTML and CSS code, that's why for this exercise we must need to use images to represent the corners of the boxes.

A new question is: What's the better way to introduce those images with our boxes? A very maintainable way to do this is by using the power of CSS.

We must create a normal text box with four corner images and with an image to repeatedly create the parallel lines of the box, as the following:

• Insert the four images as background with CSS.

  

  HTML code.

  <div class="c3"><div class ="c4"><div class="c1"><div class="c2">
   l'arte di apprendimento
</div></div></div></div>

  CSS code.

  .c1 {background: url(c1.gif) 0 100% no-repeat}
.c2 {background: url(c2.gif) 100% 100% no-repeat}
.c3 {background: url(c3.gif) 0 0 no-repeat}
.c4 {background: url(c4 .gif) 100% 0 no-repeat; padding:10px}

• Add a border to the box (with more images).

  

  HTML code.

  <div class="l1"><div class="l2"><div class="l3"><div class="l4"><div class="c3"><div class ="c4"><div class="c1"><div class="c2">
   l'arte di apprendimento
</div></div></div></div></div></div></div></div>

  CSS code.

  .l1 {background: url(dot.gif) repeat-x 0px 0px}
.l2 {background: url(dot.gif) repeat-x 0px 100%}
.l3 {background: url(dot.gif) repeat-y 0px 0px}
.l4 {background: url(dot.gif) repeat-y 100% 0px}


Some external references

• CSS and round corners: Borders with curves.

What are we facing?

I want to reference a word or phrase by suppressing some characters or syllables, and in that way provide very useful information to the viewers, the browsers, search engine indexers, spell checkers, etc..

The Solution

The usage of the tag abbr denotes the use of a shorted word or phrase, but the real importance is that it's the semantic way for marking up abbreviations.

You can also use the attribute title to specify the whole word or phrase that the abbreviation refers to. With this some browsers must show over the abbreviation the specified text and this will help you to increase your web page accessibility.

Examples.

Some external references

• HTML ABBR TAG (w3schools.com).
• Mastering Text.

What are we facing?

I have forms with lots of fields and controls to request information from users. I want improve my forms by creating groups of related elements.

The Solution

The FIELDSET HTML element allows the grouping of related form elements. It is a nice alternative of a TABLE or DIV tag since it is created for this specific propose. The optional LEGEND tag specifies a description of the grouping.

Example:

<form action="InsertInfo.aspx">
     <fieldset>
        <legend>Personal information</legend>
        Name: <input type="text" />
        <br />
        Age: <input type="text" />
        <br />
     </fieldset>
     <fieldset>
        <legend>Subscription information</legend>
        <input type="radio" /> Year <br />
        <input type="radio" /> Six months <br />                       
        <br />
     </fieldset>
     <fieldset>
        <input type="submit" value="Submit"/>
     </fieldset>
</form>

Some external references

• HTML <fieldset> tag
• HTML Techniques for WCAG20: Grouping form controls
• Styling fieldset elements with CSS