If you operate a website that features lots of code examples, you know how important it is to spend some quality time styling the <pre> element. When left unstyled, wild <pre> tags will mangle your preformatted content and destroy your site’s layout. Different browsers treat the <pre> tag quite differently, varying greatly in their default handling of font-sizing, scrollbar-rendering, and word-wrapping. Indeed, getting your preformatted code to look consistent, usable, and stylish across browsers is no easy task, but it certainly can be done. In this article, I’ll show you everything you need to create perfect <pre> tags.

First thangs first

Before getting into it, let’s take a moment to ensure we’re all on the same page. The (X)HTML <pre> element is used to display preformatted text, code, or just about anything else. pre tags are ideal for multiple lines of code or text that need to retain character spacing, display unformatted characters, keep inherent line breaks, and so on.

Continue Reading

In an effort to organize my pile of offline notes, I will be posting a number of quick, “to-the-point” tutorials on a number of useful topics. In this post, I share an excellent method for auto-clearing and restoring multiple form field inputs using a bit of unobtrusive JavaScript. This method was discovered at xy.wz.cz. There are two steps to this technique, which should take no longer than five minutes to implement.

Continue Reading

In today’s highly competitive blogosphere, every edge counts. There are many aspects of a site or blog that can be easily acquired. Fancy themes may be purchased, nifty plugins are freely downloaded, and even snazzy content is immediately available. Indeed, setting up a decent-looking blog is so easy that virtually anyone can do it. Even so, just spend a little time at most sites and check out a few of the details. How is the writing — grammar, syntax, and punctuation? What about links and images — are they equipped with intelligent titles and alt attributes? As you read through a few posts, do you get a sense that the author has taken the time to fine-tune the content? Unfortunately, many bloggers fail to take the time to focus on the details. Bloggers that do take the time to embellish their content with details provide quality and value to their readers. Fortunately, managing the details is a snap once you find your groove. To begin this series of articles on “Pimping the Details,” let’s focus on one of the more prominent areas of concern: the content of your posts. How many of the following details have found their way into your blogging routine?

Continue Reading

Embed Windows Media Player via the object tag

Here is the general format for including .wmv files in web pages:

<object type="video/x-ms-wmv" data="http://www.domain.com/path/to/winmovie.wmv" width="340" height="280">
  <param name="src" value="http://www.domain.com/path/to/winmovie.wmv" />
  <param name="controller" value="true" />
  <param name="autostart" value="true" />
</object>

Continue Reading

Consider this post an evolving receptacle for Firefox-specific CSS tricks.

Change the color of highlighted text

*::-moz-selection {
   background: #FF3C00; /* the background color of the highlight */
   color: #FFF; /* the color of the text within the highlight */
}

Change the opacity of an element

div#division { /* choose either attribute */
   -moz-opacity: 0.99; /* possible values: 0-1 */
   -moz-opacity: 99%; /* possible values: 0%-99% */
}

Control item selection of an element

div#division { /* choose one of the following values */
   -moz-user-select: none; /* no content within the element may be selected */
   -moz-user-select: all; /* contents may be selected only as a whole */
   -moz-user-select: text; /* [default value] only text may be selected */
   -moz-user-select: toggle; /* all contents of the element are selected */
   -moz-user-select: inhereit; /* inherits user-select value from parent element */
   -moz-user-select: element; /* elements may be selected one at a time */
   -moz-user-select: elements; /* multiple elements may be selected at the same time */
}

Round the corners of elements

div#division { /* choose one of the following values */
   -moz-border-radius: inherit; /* inherits border-radius value from parent element */
   -moz-border-radius: 7px; /* length/unit values indicate corner/border radius */
   -moz-border-radius: 70%; /* percentage values indicate relative corner radius */
}

Note that the -moz-border-radius property may be expressed as to target specific corner(s):

-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright

Further, the following rule consolidates these four properties into one:

-moz-border-radius: 7px 3px 7px 3px;

Add an outline to an element

div#division, h1 { /* choose one of the following values */
   -moz-outline-width: inherit; /* inherits moz-outline value from parent element */
   -moz-outline-width: medium; /* possible values: thin, medium, thick */
   -moz-outline-width: 7px; /* specifies outline width via an explicit length/unit */
}

Reverse item order in elements

div#division { /* choose one of the following values */
   -moz-box-direction: normal; /* items displayed top to bottom and left to right */
   -moz-box-direction: reverse; /* items displayed bottom to top and right to left */
}

Add a multi-colored, multi-layered border to an element

This nifty CSS property adds a border to an element that is any number of pixels in width. Each pixel-width of the border may display with a unique, user-specified color.

div#divisions { /* spcifies a border along with a uniform color for non-Moz browsers */
   border: 3px solid #333; /* if only two moz-border colors are defined, the third will be this color */
}
div#divisions { /* choose on of the following values */
   -moz-border-colors: inherit; /* inherits border-colors value from parent element */
   -moz-border-colors: none; /* [default value] no color-striping is applied */
   -moz-border-colors: red white blue; /* indicates color values from outside to inside */
   -moz-border-colors: #333 #777 #999; /* indicates color values from outside to inside */
   -moz-border-colors: ThreeDDarkShadow ThreeDShadow transparent; /* named values also apply */
}

Further, -moz-border-color property may be segregated as follows:

div#divisions { /* use any/all of the following attributes */
   -moz-border-top-colors: #333 #777 #999 #FFF;
   -moz-border-right-colors: #333 #777 #999 #FFF;
   -moz-border-bottom-colors: #000 #999 #CCC #DDD;
   -moz-border-left-colors: #000 #999 #CCC #DDD;
}

Most Web authors are familiar with the <link> element included within the <head> element of many (X)HTML documents. The <link> element enables authors to associate external resources to the (X)HTML document. <link> element references include various types of metadata, navigation, and styling information. This brief post provides examples of these and other important uses of the (X)HTML <link> element.

<!-- indicate the starting location -->
<link rel="start" href="http://domain.com/directory/" />

<!-- indicate the previous item -->
<link rel="prev" href="http://domain.com/directory/prev/" />

<!-- indicate the next item -->
<link rel="next" href="http://domain.com/directory/next/" />

<!-- indicates the index location -->
<link rel="contents" href="http://domain.com/directory/index.html" />

<!-- indicates location of a help file -->
<link rel="help" href="http://domain.com/directory/help.html" />

<!-- indicates location of a site feed -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://domain.com/directory/feed.rdf" />

<!-- indicates location of FOAF metadata -->
<link rel="meta" type="application/rdf+xml" title="FOAF" href="http://domain.com/directory/foaf.xrdf" />

<!-- provides contact information -->
<link rev="made" href="mailto:name@domain.com" title="contact name" />

<!-- indicates location of translated document -->
<link rel="alternate" href="http://domain.com/directory/translated.html" hreflang="fr" title="french translation" />

<!-- provides a link to the stylesheet -->
<link rel="stylesheet" href="http://domain.com/directory/style.css" type="text/css" media="screen" />

This XHTML header tags resource is a work in progress, perpetually expanding and evolving as new information is obtained, explored, and integrated. Hopefully, you will find it useful in some way. Even better, perhaps you will share any complimentary or critical information concerning the contents of this article.

Table of Contents

• Important Information
• XML Declaration
• The !DOCTYPE
• The html tag
• The head tag
• The title tag
• base & item
• http-equiv
• link tags
• meta tags
• Geo meta tags
• Dublin Core tags
• References

Continue Reading

Using a small bit of JavaScript, it is possible to auto-clear and restore form elements when users bring focus to them. Simply copy, paste, and modify the following code example to achieve an effect similar to this:

<form action="http://domain.com/" method="post">
   <p>
      <input value="Click here and this will disappear.." onfocus="if(this.value == 'Click here and this will disappear..') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Click here and this will disappear..';}" type="text" size="77" />
   </p>
</form>

Update [January 2nd, 2007] » Here is another auto-clear JavaScript trick that cleans up the (X)HTML code but does not auto-restore the element. Simply place the first code block into the document head (or external JavaScript file), and then flesh out form elements in the second of block of code and place within the document body:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
   function m(el) {
      if ( el.defaultValue == el.value ) el.value = "";
}
//--><!]]>
</script>

<form method="post" action="<?php echo $PHP_SELF; ?>">
 <p>
  <input type="text" name="target" value="This will disappear upon user focus.." onFocus="m(this)">
  <input type="submit" name="submit" value="Submit">
 </p>
</form>