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?

I am working with a web page that has a Web slice defined with the normal syntax.  I want to change the Web slice in order to show interactive web content.

The Solution

Web slices are a new useful feature shipped with IE8.  They allow users to subscribe to content directly within a web page.  Users can review content changes directly from the IE8 Favorites bar.

Web slices are defined with simple, semantic HTML code that indicates a web page fragment which a client browser can be subscribed to.  The following fragment specifies a basic Web slice:

<div class="hslice" id="offer">  
        <h2 class="entry-title">Moon Airlines</h2>  
        <p onmouseover="animateMe(this);">Today’s offer      
            <span class="entry-title"><%=TodaysOfferPrice()%></span>.
        </p>
</div>

When IE8 is subscribed to this web slice you will see its title in the Favorites bar and in the preview window you will see the cached offer information, from which the active content such as script or ActiveX controls is removed.  In this case, the animation produced by the animateMe() function won’t show up in the preview window.

In order to make this animation work the previous code needs to be changed to:

<div class="hslice" id="offer">   
   <h2 class="entry-title">Moon Airlines</h2>   
      <a rel="entry-content
         href="myWebslicePreviewPage.aspx" style="display:none;">
      </a>      
      <p onmouseover="animateMe(this);">Today’s offer        
                                 <span class="entry-title"><%=TodaysOfferPrice()%></span>.
      </p>
</div>

It will also be necessary to extract a copy of the p block and place it in a new web page, which in this case is called myWebslicePreviewPage.aspx.   Also the animateMe() and TodaysOfferPrice() functions and all its dependencies must be available in the new page.

Some external references

Subscribing to Content with Web Slices

What are we facing?

I am using ASP.NET Themes and someone defined a .skin file with default visual attributes for common controls in my website.  I need to change some attributes but need to preserve the default values for the rest of them.

The Solution

ASP.NET Themes are collections of appearance-related resources that will be applied to web controls on a website.   Themes include images, control skins, CSS style sheets, and additional files (http://msdn.microsoft.com/en-us/library/de93t31k(VS.80).aspx).

Default attributes for ASP.NET web controls are specified in a .skin file including an entry with the same syntax as a normal web control, for example:

<asp:Label runat="server" BackColor="Red" ForeColor="Blue"></asp:Label> 

Then, the .skin file can be applied to an ASP.NET page by adding the Theme attribute to the corresponding Page directive, for example:

<%@ Page Language="C#" … Theme="MySkinFile" … %>

Now, the situation is that you need to override some of the default asp:Label attributes for a specific label control.  Let’s start with an example; the objective is to make the following label display with a yellow foreground color, given that the current skin file specifies that labels will be displayed with red background color and blue foreground:

<asp:Label ID="Label1" runat="server" Text="Label">This is the sample label text</asp:Label>

This objective should be achieved by changing only the specific attribute in order to keep the code maintainable, and keep redundancy low.  However, this change is not as easy as it might be.

One first attempt is to change the attribute in the control instance we are interested in:

<asp:Label ID="Label1" runat="server" Text="Label" ForeColor="Yellow">This is the sample label text</asp:Label>

Unfortunately this doesn’t work; the entries in the skin file have precedence over the attributes in specific controls.

The attribute EnableTheming="false" can be used to allow the specific label control to apply different attribute values, however the rest of skin attributes, which we want to reuse, is not applied.

The SkinID attribute can be used in the .skin file entry to make it specific to a control with the same id, this option does not allow us to reuse the attributes specified in the more “generic” asp:Label skin entry.

The attributes specified in the .skin file entry will be processed by the ASP.NET server, rendering them as CSS attributes and including them in the style attribute of the applicable page elements, for example, our original asp:Label would be rendered as:

<span id="Label1" style="color:Blue;background-color:Red;">This is the sample label text </span>

This gives us the final clue to achieve our objective.  A style attribute can be added to the asp:Label control in order to override the default attributes provided by the .skin file.  The source code would be:

<asp:Label ID="Label1" runat="server" Text="Label" Style="color:yellow;">This is the sample label text</asp:Label>

This would be finally rendered as:

<span id="Label1" style="color:Blue;background-color:Red;color:yellow;">This is the sample label text</span>

Some external references

• Themes faqs
• Adding Some Style To ASP.NET 2.0 Pages

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