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 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 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 have an ASP.NET Website using the built-in ASP.NET server controls, but now I want them to render code that use CSS styling and a more semantic markup. I downloaded the ASP.NET 2.0 CSS Friendly Control Adapters, but the download page doesn't give any explanation of how to make my already created ASP.NET code to produce CSS friendly code.

The Solution

Actually, there are two ways to do it. The first way is provided by Fritz Onion in the post Steps for adding a CSS Control Adapter. Since the big amount of steps needed, I would rather recommend you to read that post enterily. However if you are hunger for a simpler way to do it, Simone Chiaretta enumerates the following very few steps for changing the rendering of your code using the downloaded CSS Control Adapters

• Download the CSS Friendly Adapter from CodePlex: http://www.codeplex.com/cssfriendly.
• Reference the CSSFriendly.dll inside your web project.
• Create the ASP.NET App_Browser folder under your website root, and copy the CSSFriendlyAdapters.browser file in this folder.

Some external references

• Tip/Trick: Use the ASP.NET 2.0 CSS Control Adapters for CSS friendly HTML output by Scott Guthrie
• How To: Control Adapters

What are we facing?

I want to manage the font size using CSS instead of the size attribute in the font tag, but at the same time I want to keep my pages looking the same.

The solution

If you have used font sizes in the 0 to 6 range, you are on the right spot, your pages are going to render identical using CSS, As you can see in the table below:

The font sizes that fall out of this range need some extra work to get them to look the same in CSS, If you need to get them to work you can play with the relative values ‘smaller’ and ‘larger’.

Some external resources

• http://www.w3schools.com/CSS/pr_font_font-size.asp
• http://css-discuss.incutio.com/?page=FontSize

How can I entirely remove that Topic Bar (some folks call it "toolbar") about US Election 2008 from my Twitter page?

Possibly juggling with ways for setting the bases for a monetization model, Twitter launched the following Topic Bar about US Election 2008

Even if I click the "X", an E08 button remains.

The Solution

First of all, we have to recognize the piece of HTML that is displaying the Topic Bar:

<h1 class="elections-promotion"> ... </h1>

Gotcha!

The first attempt is a cross browser solution using your browser's user style definition. Take a look at this previous post about how to do find the user style for Firefox and Internet Explorer, or this for Opera, or this one for Safari

Now just add h1.elections-promotion { display:none !important } to your user style. No more Election Bar!

The second attempt consists in using the very useful Firefox addon called AdBlock Plus:

1. Install AdBlock Plus:in Firefox
2. Go to "Tools" menu option, then AdBlock Plus...
3. Click in Add Filter ...
4. Paste the following code twitter.com#H1(class=elections-promotion)
5. Enjoy a clean Twitter page!

Some external resources

• How do I remove the Twitter Election Toolbar?
• How to Remove the Twitter ‘Election’ info

What are we facing?

I want the simplest solution to have a drop shadow effect on an image using just CSS. What is the shortest piece of code for drop shadow?

The Solution

The shortest piece of code for making a drop shadow is found in the book CSS Mastery of Andy Budd et al.

The shadow is a constructed via an outer "div" element wrapping the image. For example:

<div class="img-wrapper"><img src="tiny-logo.gif" alt="Aggiorno" /></div>

The tiniest CSS code you need to do drop shadow is:

.img-wrapper {
       background: url("shadow.png") no-repeat bottom right;
       clear: right;
       float: left;
.img-wrapper img { margin: -8px 8px 8px -8px; }

Displaying the pretty drop shadow you wanted:

Some external references

• Easy CSS drop shadows
• Simple fluid drop shadows

What are we facing?

I liked the post about Rollover Image for links using pure CSS but I would like to have just one image, not two: one for the "regular state" and another for the "hover state". There could be a delay between loading the first image and the second image, causing flickering. Is it possible doing that with just pure CSS? Am I being too demanding?

The Solution

Fortunately, CSS provides the power to do that. It is called the Pixy-style rollover. Let's use the same example of the previous post.

Here is the same image but merged vertically:

Using the following link code:

<a href="http://www.aggiorno.com/try.aspx" id="pixy"><span>aggiorno</span></a>

And using the following CSS

  a#pixy {
       background:transparent url(“Aggiorno-sprite.jpg”) no-repeat scroll center top;
       display:block;
       height:110px !important; 
       width:110px;
  }
  a#pixy span { display:none; }
  a#pixy:hover { background-position:center bottom; }

You then will get the link showing the top part of the image when regular state. In hover state, the bottom part is displayed. Hover it and believe your eyes:

Some external references

• CSS Sprites: Image Slicing’s Kiss of Death

What are we facing?

I want to achieve a button like effect for some of my links. For instance, it's a matter of positiong the "Download" link more prominent and catchy. I want that link to behave like a button when I hover it. Another option is to have a clickable image with change a little bit when hovering. Of course, I want that effect made entirely in CSS. Is it possible?

The solution

Yes, there is a way, let's based the following example of rollover with images on the Stuart Robertson's post about it.

Choose a image for the regular state of the link (no hovering state):

Just for simplicity, do a silly change to that image to produce a rollover image

Build the link wiht a "span" element with a meaningful description inside. Never forget those image based browsers.

<a href="http://www.aggiorno.com/try.aspx" id="rollover"><span>aggiorno</span></a>

We are almost there. Now the following style for achieving the rollover effect:

  a#rollover { background-image:url("Aggiorno-regular.jpg"); 
               height: 110px; width:110px; display:block; }
  a#rollover span { display:none; }
  a#rollover:hover { background-image:url("Aggiorno-rollover.jpg"); }

This style set background image for the regular state of the link, hides the span content and shows the rollover image when hovering. Our baby now looks like (hover it):

Some external references

• CSS rollover buttons
• Roll Over, Rollovers -- CSS Style by Eric A. Meyer