Double Underline and Other HTML Tricks

Sometimes the simplest of tasks on a Web page can lead to long, futile searches through blog posts and ad-laden Web sites. I had this very experience looking for a way to use a double underline on some numbers – and a simple solution that worked was never found! Fortunately I was able to concoct a decent workaround which I am sure others have stumbled upon. The following are instructions for applying a double underline to numbers on your HTML page and other HTML solutions that I use often. They can be applied using a basic text program like Windows Notepad or any HTML editor.

Double Underline: Simple and in the Code Please

Many approaches to applying the double underline involve editing the stylesheet then applying the style to text or numbers. The following tags can be placed in the HTML directly around the text or numbers you desire to double underline:

<u;><span; style="border-bottom: 1px double #000;">$14,481

The first tag applies the generic HTML underline. The second assigns a style that results in another underline at a slightly different height than the first.

Need a Dash: Not a Hyphen and Not a Line

When in need of a dash, online writers must often resort to a hyphen, or, for the discriminating writer, two hyphens. Many HTML editing programs offer “em-dash” as a special character. This dash is longer than a hyphen, but ends up looking much too long. A simple change to the HTML code for the em-dash will result in the perfect, sentence-splitting dash.

Inserting the em-dash with an HTML editor produces the following code:

"-"

If you replace the final 2 in the code with a 1, you get an attractive and reasonably sized dash. Thus the final solution is exactly:

-

Create a Picture Link Without a Blue or Colored Outline

Adding a link to an image is a simple procedure in most Web design programs, but the process often results in a blue or colored line around the image. The result can be unattractive or unwanted, with no obvious means of getting rid of the border. Adding the following after the image name in the HTML code will eliminate the default link border: border=”0″. Here is how the full image name would look in the code:

<img; src="images/your_image_name.jpg" border="0">

Web Page Minimizes Until Contents Are Squished Like a Stringed Bean

There are certain browsers that do not handle a minimum page width well. Though you can use CSS to specify a minimum size, when you test your site you notice the content can still be minimized until everything is squished into a narrow column. Placing the following code in the HTML header section of your Web page will help ensure that browsers respect your minimum page width. The HTML header section comes first in the code and consists of all the information between the following tags:

<head;> and

I usually place the code right before the closing tag for easy reference. You can use the two numbers in the code (970 in this example) to specify your minimum width, and they should always be the same value. Often it is best to experiment with different values until you get it just right. Also, and very important, the entire body of the Web page must be placed between the following tags:

<div; id="wrapper1"> and

Here is the code:

These few HTML tricks have saved me a lot of searching and I use them with great frequency. When you are in a bind or have limited options, they just might save the day.