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!

What are we facing?

I have some products integrated in Visual Studio 2008 Shell (integrated mode) like Phalanger. I would love to have Aggiorno Add-in installed in VS 2008 Shell integrated mode, so I could use it along with the integrated products.

The Solution

Let's assume you have Visual Studio 2008 Shell Integrated mode already installed. Let's assume you have .msi file of Aggiorno which is the installer for the Aggiorno Add-in.

You’ll first have to run the following registry file, that you can download:

InstallOnVsIntegrated.reg (340.00 bytes)

Which contains the following code

 [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\9.0\Setup]
"Dbghelp_path"="C:\\Program Files\\Microsoft Visual Studio 9.0"

After you run it (in Vista you do a right-click on the file and click "Merge") you now can install Aggiorno Add-in on Visual Studio Shell, just run the installer.

In that way you will be able to see Aggiorno along with Phalanger coexisting happily.

Some external resources

• Visual Studio Shell overview.
• Phalanger.

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 want to add validation to an existing ASP.NET application. The business entities used by the application are defined on a separate assembly, used by other desktop applications. The validation mechanism provided by ASP.NET is not enough because:

• I want to easily add my own customized, complex validation rules.
• I’d like to avoid defining the same rules on both the desktop applications and the web applications.

The solution

You can use the Validation Application Block (VAP) included in the version 4.0 of Enterprise Library. When using the VAP you decorate your business entities with attributes indicating the validation performed against their properties. For instance, you might have a class Person which defines, among other members, the property Age as an integer number between 21 and 100.

In order to specify the constraint just described with VAP, the property Age in your Person class should be decorated with a RangeValidator, just as follows:

[RangeValidator(21, RangeBoundaryType.Inclusive, 100, RangeBoundaryType.Inclusive, Ruleset = "GenericPerson", MessageTemplate = "Invalid value")]

public int Age

{ … }

Back to your ASP.NET application, we assume you already have a Web Form to collect Person data. The markup corresponding to the control used to collect the age value might look as follows:

<asp:TextBox ID="AgeTextBox" runat="server"></asp:TextBox>

The first thing you need to do in order to take advantage of VAP and your already defined validation rules is adding references to Microsoft.Practices.EnterpriseLibrary.Validation and Microsoft.Practices.EnterpriseLibrary.Validation.Integration.AspNet –which allows connecting VAP with ASP.NET applications through the usage of the PropertyProxyValidator class. You may also need to add a reference to the assembly where the business entities are defined, along with their validation rules. More details on how to prepare your ASP.NET application in order to use the Validation Application Block can be found on the block’s documentation.

Once your application has the needed references you’ll need to register the namespace in which the VAP classes are defined. This can be accomplished by inserting the following code after the Page directive in your ASPX markup:

<%@ Register Assembly="Microsoft.Practices.EnterpriseLibrary.Validation.Integration.AspNet"

Namespace="Microsoft.Practices.EnterpriseLibrary.Validation.Integration.AspNet"

TagPrefix="vab" %>

Now you can add validators to your controls, associating them to the existing controls in your web form. The resulting markup should look like follows:

<asp:TextBox ID="AgeTextBox" runat="server" CausesValidation="True"></asp:TextBox>

<vab:propertyproxyvalidator id="AgeValidator" runat="server" ControlToValidate="AgeTextBox" PropertyName="Age" RulesetName="GenericPerson" SourceTypeName="BusinessLayer.Person">Please enter a number between 21 and 100</vab:propertyproxyvalidator>

That’s it! Your form has got validation through the usage of the VAB. You can also use the validation defined by the referenced business entities in other web forms or in a desktop application. Now if an invalid value is submitted an error message will be displayed:

Some external references

• The Validation Application Block provides several other validators besides the RangeValidator used in this post. For more information about other validators please refer to this topic on the online documentation.
• You can add customized validators for more complex validation rules. Please refer to this topic for more details on how to extend existing validators and how to develop your new ones. 

What are we facing?

I have a web page that needs a printer friendly version and I don’t want to change its markup.

The Solution

Fortunately the html link tag allows to associate a style sheet depending on what device the document will be displayed on. Among the list of possible values that the media attribute can handle we will be focusing on the print value which is going to help us link an printing specific style sheet to the web page. The following example illustrates how to use the media attribute.

Now that you have added the the link tag, you’ll notice that whatever style included in printerfriendly.css style sheet file will not affect any tag in your page when you’re are viewing it in your web browser, but if you print it, or execute print preview (let’s not waste paper), you’ll see that the printer specific styles will do their job.

Some External References

• Print Different
• Html Link Tag

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?

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 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

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.