Recently, a reader named Max encountered some scrolling issues while implementing our absolutely centered layout technique. Of course, by “absolutely centered” we are referring to content that remains positioned dead-center regardless of how the browser is resized. After noticing the scrollbar deficiency, Max kindly dropped a comment to explain the issue:

…the div solution works well, only one problem maybe somebody can help: if you make the browser window smaller then the div is -> the scrollbar doenst fit right und you cant scroll over the whole area…

Apparently, because the horizontal/vertical centering method outlined in our original article employs absolute positioning with negative margins, resizing the browser to be smaller than the centered division results in cropped content that is inaccessible via scrollbar. Although this is the first I have heard about this issue, I went ahead and examined the alternate centering technique via the link generously shared by Max.

Continue Reading

In this post I have assembled a concise collection of conforming, bare-bones document templates for the following doctypes:

Document Templates

XHTML 1.0

• XHTML 1.0 Strict
• XHTML 1.0 Transitional
• XHTML 1.0 Frameset
• XHTML Basic 1.0

XHTML 1.1

• XHTML 1.1
• XHTML Basic 1.1

HTML 4.01

• HTML 4.01 Strict
• HTML 4.01 Transitional
• HTML 4.01 Frameset

Continue Reading

HTML 5, also known as Web Applications 1.0, provides new markup elements that will change the way you design your web pages. The new elements replace commonly used divisions in web documents, facilitating an even greater degree of separation between structure (HTML) and presentation (CSS). Indeed, in many documents, the new elements will structure the document while providing enough hooks to render obsolete previously required divisions, classes, and identifiers. Let’s take a look..

New Structural and Semantic Elements in HTML 5

Structural Elements

The new structural elements in HTML 5 consist of the following:

• header
• section
• article
• nav
• footer

Continue Reading

Virtually every article written here at Perishable Press requires at least one or two “special” characters. Some of these characters — such as quotation marks, hyphens, and dashes — are very common, while others — such as the copyright symbol, bullet, and arrow — happen less frequently. As a blogger, I find myself repeatedly using a select handful of very common special characters. Very rarely do I ever find myself blogging a latin “Ä” (i.e., capital letter “A” with a diaeresis). To save time and effort, I need a quick reference that targets only the characters I find useful as a blogger. With that in mind, I assembled the following table of essential Unicode (UTF-8 encoded) characters ¹ for bloggers:

Continue Reading

If you think you understand the logic behind Microsoft’s downlevel conditional comments, you are sadly mistaken. Sure, they seem simple enough on the surface, but as you really try to wrap your head around how and why they work, the subtle complexities of downlevel conditional comments may leave you dazed and confused…

In our previous article on Internet Explorer’s exclusive browser-detection method, downlevel conditional comments (DCC), we present an introductory exposition, defining expressions and providing several generalized code examples. Overall, it is a very useful article but partially fails at explaining the logic and functionality behind conditional comments. In this article, we strive toward a solid understanding of downlevel conditional comments — how they work, why they work, and where they work. Sure, you could just copy and paste code until something clicks, but actually understanding conditional comments will give you the edge — increasing your knowledge and improving your productivity.

Continue Reading

The target attribute for anchor elements (<a>) specifies the location in which the referenced document should load. For example, to open a link in a new window, we would use a target value of _blank. Although this is a commonly employed technique, the target attribute has been deprecated by the W3C and is not valid (X)HTML. Regardless, the target element remains a useful tool for practicing designers and developers. Here, we present the attribute values for the target element:

Continue Reading

Default DNS Error page for Internet Explorer

First of all, congratulations if you are geeky enough to understand the title of this article. Many would be like, "CSS, MS.. IE, error ..what..?" Whatever. If you get the title, you will get the point of this utterly pointless exercise. If that is the case, prepare for a delightful romp through geekland. Otherwise, save your precious time and stop reading here (exit strategy).

Well, okay, for the seriously unenlightened, let us explain the object of our present focus:

The default "DNS Error" page for Internet Explorer unfortunately remains a familiar sight for millions of Microsoft users. Typically, the default MS DNS Error page loads whenever a browser is unable to connect to the internet or other networked resource. Once loaded, the error page announces itself with a message that reads "The page cannot be displayed." The page then presents several options: refresh browser, retype address, check connection, check configuration, etc.     — Monzilla Media (i.e., me)

Still interested? Well, okay. Actually, it’s no big deal. Just a nice, standards-compliant, CSS-based redesign of that old, nappy Internet Explorer 404 Error page. You know the one. Whenever you can’t connect to the internet, it jumps up at you, sticks out it’s tongue and mocks you. Yes, we hate it, too. But alas, with the release of Internet Explorer 7 comes a ‘brand new’ 404 error page. Surely, it’s just a matter of time before that dumpy old 404 error page circa IE5/6 disappears forever. So, before that tragedy unfolds..

Continue Reading

This post contains random notes for embedding QuickTime within web pages.

QuickTime Embed Attributes via CSS

<style>
<!--
embed, .embed {
   pluginspage: http://www.apple.com/quicktime/download/;
   controller: false;
   autoplay: true;
   bgcolor: #000;
   loop: true;
}
//-->
</style>

Continue Reading

This quick tutorial explains how to add images to both Atom and RSS feeds. Although both formats allow for image-inclusion, feed-reader support for image-display is currently quite limited. Hopefully, that will change in the near future..

Images for Atom Feeds

Images included within Atom feeds must have a ratio of either 1:1 or 2:1. There are no other restrictions as to file type or size. Use the <icon> XML element for URL’s targeting 1:1 images. Otherwise, use the <logo> XML element for URL’s targeting 2:1 images. Either element should be placed in the <feed> element:

<feed>
   <icon>http://domain.tld/path/icon.ico</icon>
   <logo>http://domain.tld/path/logo.gif</logo>
</feed>

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

Behold the seventh wonder of the virtual world: max/min-height and max/min-width properties are possible in Internet Explorer! Indeed, by taking advantage of IE’s proprietary CSS attribute, expression, you too can whip IE widths and heights into desirable proportions. The CSS expression attribute enables JavaScript commands to be executed within Internet Explorer. JavaScript via CSS? Thanks, Microsoft!

Why is this so great? Well, because in other, standards-compliant browsers, max/min-height and max/min-width properties are easily accomplished with this simple bit of CSS..

Continue Reading

By using an <iframe> within a <div>, it is possible to include external web content in most any web document. This method serves as an excellent alternative to actual frames, which are not as flexible and definitely not as popular. Indeed, with CSS, the placement, sizing, and styling of div’s provides endless possibilities for embedding external or even internal web content into pages that would otherwise require the use of frames, Flash, or JavaScript. This method works on any modern browser, as well as any old browser that understands both <div> and <iframe> tags. Simply add the following code to your document and style according to your specific needs:

<div style="position:absolute; left:77; top:77; width:377; height:377; clip:rect(0,381,381,0); background:#FFF;">

 <iframe src="http://www.google.com/" width="377" height="377" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border-width:2px; border-color:#333; background:#FFF; border-style:solid;">
 </iframe>

</div>

Here is the code again, this time commented with explanatory information:

Continue Reading

As you may have noticed, Perishable Press recently added automatic language translation to each of our articles. The free, automatic translations are available as a series of image links (via corresponding country flag icons) next to each article’s individual post view. We have found that providing this free service is important as many of our visitors come from countries other than the United States, and therefore may be unable to read our articles as presented in the English language.

Although there are several excellent translation services currently available, our research has determined that Google’s free translation service exceeds our expectations and serves as an excellent online translator that remains fast, effective, and (best of all) free. Another excellent online translator service is provided by BabelFish, which is also highly efficient and free of charge.

Using either of these free online translators and a little .htaccess or PHP magic, it is very easy to serve alternate versions of site content in a wide variety of languages. This article presents two excellent methods of incorporating automatic language support using either .htaccess or PHP. We also provide the (X)HTML source code necessary to manually include automatic translation links within static (X)HTML documents. The translation configurations covered in this article include the following:

Continue Reading

After digging through the WordPress source code, I stumbled upon this very useful JavaScript method for auto-focusing form elements upon page load. Here is the JavaScript code (place within the document head):

<script type="text/javascript">
   function formfocus() {
      document.getElementById('element').focus();
   }
   window.onload = formfocus;
</script>

…and corresponding (X)HTML markup (abbreviated for clarity):

<form>
   <input id="element" />
   <input />
   <input />
</form>

In this example, the first form element (identified by id="element") will be automatically focused when the document loads, thus facilitating the process of entering data in the form. This technique would serve users well on login pages (wink, wink;), or anywhere forms are required on a repetitive basis.

Update: [ May 29th, 2007 ] - Here is a similar method of auto-focusing a form element with just a splash of JavaScript. Place the following code into an input element that contains a predefined field value and watch in amazement as the text string is automatically highlighted upon user focus. Here is the JavaScript snippet:

onfocus="this.select();"

..and here is a “live” example:

..and corresponding code:

<form action="http://domain.com/" method="post">
   <div>
      <input onfocus="this.select();" value="Select this input element and this text will be highlighted.." size="55" type="text">
   </div>
</form>

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

Welcome to Perishable Press! This article explains several methods for opening multiple frames with a single link. For more excellent (X)HTML information, check out the (X)HTML tag archive. If you like what you see, I encourage you to subscribe to Perishable Press for a periodic dose of online enlightenment ;)

Opening Multiple Frames with One Link

Method 1:

The first method of targeting multiple frames involves replacing either the entire frameset (via target="_top") or a subset of frames (via target="subset"). For example, any number of frames may be updated with a single link if that link targets a new frameset containing all of the new frames. Likewise, multiple frames within a nested frameset may be updated by replacing the nested frameset itself. This method works well when many frames need updating. In the following example, the nested frameset, "nested-frameset.html", contains multiple frames that need updating when a single link is clicked. When this happens, the "dynamic" frame is refreshed with multiple new frames, while the "static" frame remains constant. Using this method, virtually any combination of frames or framesets may be updated with a single link.

<frameset cols="*,3*">
   <frame src="static-content.html" name="static">
   <frame src="nested-frameset.html" name="dynamic">
</frameset>

Method 2:

The second method for targeting multiple frames employs JavaScript’s "onClick" function. With this method, the initial frame (or frameset) is updated via the link’s href attribute, while the additional frame(s)/frameset(s) is updated via the link’s onClick attribute. This method requires JavaScript, but is much less convoluted than the method previously discussed. In the following example, when the link is activated, "first-frame" will be updated with first-frame.html, while "second-frame" will be updated with second-frame.html:

<a href="/path/first-frame.html" 
 target="first-frame" title="Update frames" 
 onClick="top.second-frame.location='/path/second-frame.html';">
   Click here to update both frames.
</a>

Method 3:

Our third method of opening/updating multiple frames with a single click utilizes a simple JavaScript function. This method operates through a function call placed in either the href or onclick attribute of the anchor (<a>) element. Upon activation, the JavaScript function proceeds to open simultaneously the specified links. Implementing this technique is straightforward. Given the following frameset:

<html>
 <head>
  <title>The Frameset</title>
 </head>
 <frameset cols="50%,50%">
  <frame src="page-01.html" name="frame-one" />
  <frame src="page-02.html" name="frame-two" />
 </frameset>
</html>

…with the following code present in page-01.html, which is displayed as frame-one:

<html>
 <head>
  <title>Frame One</title>
  <script type="text/javascript">
   <!--//--><![CDATA[//><!--
    function openframes() {
       parent.frame-one.location="page-03.html";
       parent.frame-two.location="page-04.html";
    }
   //--><!]]>
  </script>
 </head>
 <body>
  <p>
   <a href="javascript:openframes();" title="Open two links..">
    Open "page-03.html" into "frame-one" and "page-04.html" into "frame-two"
   </a>
  </p>
 </body>
</html>

With the previous code in place, the broswer window will display two frames of equal width. In the left frame, there will be a link that, when clicked, will open two links at the same time. Specifically, when the link is clicked, a file named “page-03.html” will replace the contents of the left frame (”frame-one.html”) while a file named “page-04.html” will replace the contents of the right frame (”frame-two.html”). To setup additional frames to open/update upon link click, simply add the corresponding lines to the openframes() function by emulating the existing code pattern. For example, to add another three frames to the function:

function openframes() {
   parent.frame-one.location="page-03.html";
   parent.frame-two.location="page-04.html";
   parent.frame-thr.location="page-05.html";
   parent.frame-for.location="page-06.html";
   parent.frame-fiv.location="page-07.html";
}

Finally, to account for users without JavaScript, we could call the function via onclick attribute, include an alternate frameset or page via the href attribute, and throw in a return false declaration for good measure:

<a href="../no-javascript.html" onclick="javascript:openframes();return false;">
   Open "page-03.html" into "frame-one" and "page-04.html" into "frame-two"
</a>

Beyond frames..

Using the onClick attribute within links, it is possible to target more than just frames. For example, Monzilla’s Information theme for WordPress features subpanels that "pop" open to reveal various types of content. To improve usability, we wanted certain panel links to open their panels while simultaneously repositioning the top of the panel with the top of the browser. This was easily accomplished with an onClick attribute in each of the panel links¹.

References

• ¹ To check out the "popping" subpanels used in the Information theme, click here, scroll down near the bottom of the page, and click on either the "nonsense" or "details +" tabs. The single link click should result in two events happening simultaneously: the subpanel will pop open and the subpanel will align its top edge with the top of the browser window.

Absolute Centering with CSS & (X)HTML

Designing an absolutely centered layout involves centering a division both horizontally and vertically. When this is done, the centered division (or other element) is centered according to the browser window. To accomplish this, use this (X)HTML:

<div id="wrapper">
 <div id="center">
 </div>
</div>

And employ this CSS (commented with explanations):

Continue Reading

Changing the color of scrollbars for Internet Explorer may very well be the oldest trick in the book. In fact, this post exists mostly for the sake of prosperity, as we here at Perishable Press strive to eliminate our entire offline library of website design notes by transferring them to the World Wide Web. Although library conversion requires time, patience, and determination, changing the color of IE scrollbars is relatively simple. Simply associate these CSS rules to the (X)HTML documents desiring unique scrollbar colors:

/* produces a stylish black scrollbar with light-grey highlights */
* html body {
   scrollbar-face-color: #000;
   scrollbar-shadow-color: #808080;
   scrollbar-highlight-color: #808080;
   scrollbar-3dlight-color: #000;
   scrollbar-darkshadow-color: #000;
   scrollbar-track-color: #000;
   scrollbar-arrow-color: #808080;
}

/* produces a stylish grey scrollbar with off-white highlights */
* html body {
   scrollbar-face-color: #889B9F;
   scrollbar-shadow-color: #3D5054;
   scrollbar-highlight-color: #C3D6DA;
   scrollbar-3dlight-color: #3D5054;
   scrollbar-darkshadow-color: #85989C;
   scrollbar-track-color: #95A6AA;
   scrollbar-arrow-color: #FFD6DA;
}

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

Search engines loathe crawling through convoluted lines of code. Oceans of complex JavaScript scare away the priceless indexing and archiving efforts of most major search engines, which will generally abort a crawl upon encountering such mess. The good news is that search engines actually do not deploy JavaScript, so it is possible to use JavaScript to hide those miles of messy code by using the fundamental document.write function.

Place this function in an external JavaScript file, “navmenu.js”:

function navMenu() {
   document.open();
   document.write("<div>Convoluted code goes here.</div>");
   document.close();
}

Link to the external JavaScript file by placing this code in the document head:

<script src="js/navmenu.js" type="text/javascript"></script>

Finally, call the function by adding this to the target location within the document body:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

   navMenu();

//--><!]]>
</script>

If you think that nobody uses frames anymore, think again. I personally know of one person who threw down some tuf HTML frame action for a personal site. So, in the interest of prosperity, we are hereby establishing this post as our official dumping ground for all HTML frame-related garbage.

Break your pages out of someone else’s frames

We begin our journey with a totally sick JavaScript method for breaking pages out of the illegitimate frames of some ineffectually pathetic bastard:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

   if (window.self ! = window.top) window.top.location = window.self.location;

//--><!]]>
</script>

Likewise, here is an equally effective method that should work in all JS-enabled browsers:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

if (window.frames) {
   if (parent != self) {
   location.href="index.html"
   }
}

//--><!]]>
</script>

Alternatively, this method also works well in all non-NN browsers:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

if (parent.frames.length > 0) {
   parent.location.href = location.href;
}

//--><!]]>
</script>

Here is a similar version of the previous method:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

if (parent.frames.length > 0) top.location.replace(document.location);

//--><!]]>
</script>

Here is yet another slightly similar version:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

if (top.frames.length > 0) {
   top.location = self.location;
}

//--><!]]>
</script>

Yet another fine method for breaking out of frames:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

if ( top.location != document.location.href ) { 
   top.location = document.location.href; 
}

//--><!]]>
</script>

Here is the script we use for Monzilla Media (monzilla.biz):

<script type="text/javascript">
<!--//--><![CDATA[//><!--

if ( self.location.href != top.location.href ) {
   top.location.href = self.location.href;
}

//--><!]]>
</script>

This method stops recursively framed pages:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

if ( window != top ) 
   top.location.href = window.location.href;

//--><!]]>
</script>

This method works great at breaking out and redirecting the browser to the original page:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

var parent_location = new String(parent.location);
   if ( ( top.location != location ) && parent_location.indexOf('http://domain.tld/path/to/page.html') != 0 )
   top.location.href = document.location.href;

//--><!]]>
</script>

Optimize the content of an iframe

Moving right along, here is a helpful method for optimizing the content of an iframe. This code basically displays a link to the content that should be displayed if everything is working correctly. If for some reason the content is not displayed, the link will appear in its place, thereby enabling users to access the missing content via a new window:

<iframe src="page.html" width="333" height="333" scrolling="auto" frameborder="1">
   <a href="page.html" target="_blank">
      [Your browser does not support frames or is configured not to display frames. Click here to visit the related document.]
   </a>
</iframe>

Control frameborder and scroll attributes for iframes via CSS

To control the frameborder=”value” and scroll=”yes/no” attributes for iframes using CSS, add the following styles to the document which is being displayed in the iframe:

<style type="text/css">
html, body {
   overflow: hidden;
   border: none;
}
</style>

This method works on all IE 4+ with the following exceptions:

IE 4

• Ignores overflow on html and body elements (i.e., no scrollbar elimination in IE 4)
• Border property must be applied to the body element

IE 5 and IE 5.5

• Overflow property must be applied to the body element
• Border property may be applied to either the html or the body element

IE 6 / Quirks Mode (Transitional DTD)

• Overflow property must be applied to the body element
• Border property may be applied to either the html or the body element

IE 6 / Standards Mode (Transitional DTD)

• Overflow property must be applied to the html element
• Border property must be applied to the html element

Just a few useful accessibility notes..

Add accesskey attributes to important list items, content areas, and any other key areas of the document.

Use alphanumeric characters as accesskey values, as in this example:

<ul>
   <li><a id="home" accesskey="h" href="http://domain.com/home.html"><span class="accesskey">h</span>home</a></li>
   <li><a id="menu" accesskey="m" href="http://domain.com/menu.html"><span class="accesskey">m</span>menu</a></li>
   <li><a id="search" accesskey="s" href="http://domain.com/search.html"><span class="accesskey">s</span>search</a></li>
</ul>

When an accesskey attribute is present within a link tag, pressing alt+letter on the keyboard is equivalent to double-clicking that link. Generally speaking, the presence of an accesskey attribute within an element brings focus to that element. Thus, radio and check boxes are toggled, links are clicked, and form elements are navigated as the alt+letter combination is pressed.

It is also helpful to provide “skip-to” links that target specific areas of the site. For example, you may wish to enable users of screen readers to skip past or skip to navigational controls:

<div class="hide">
 <ul id="top" class="access">
  <li><a href="#content" title="Skip to Content" accesskey="c">Skip to Content</a></li>
  <li><a href="#navigation" title="Skip to Menu" accesskey="m">Skip to Menu</a></li>
  <li><a href="#search" title="Skip to Search" accesskey="s">Skip to Search</a></li>
 </ul>
</div>

However, due to current lack of widespread browser support, explicit id-targeting may serve better:

<a href="#menu" title="Skip to navigation menu">Skip to navigation menu</a>
<a href="#content" title="Skip to main content">Skip to main content</a>

Another useful accessibility tool involving document meta-navigation is the tabindex, which is a numerical index that represents each element’s position in the tabbing order. By default, certain elements are ignored by the tabindex, while others retain a default order which may be overridden with explicitly stated tabindex values. Consider the following example, in which the tabbing order will be "red", "yellow", "blue", regardless of where the input elements appear on the page:

<form>
 <input id="red" tabindex="1" />
 <input id="yellow" tabindex="2" />
 <input id="blue" tabindex="3" />
</form>

More to come..

To help maintain consistency when developing new CSS-styled websites, we have created a complete CSS template file. The file contains every HTML/XHTML tag known to man. This includes tags such as BASEFONT and CENTER, which have been deprecated; tags such as COMMENT and MARQUEE, which are exclusive to Internet Explorer; tags such as SPACER and SERVER, which are exclusive to Netscape Navigator; and even tags such as !DOCTYPE and BASE, which are included merely for the sake of completeness. As CSS selectors, the tags are (almost all) empty, just waiting to be filled with declarations, properties, and values.

Tags that have been deprecated, or that are exclusive to a specific browser, are indicated as such using the following syntax:

|x = deprecated
|e = explorer only
|n = navigator only

These symbols are written next to their associated tag/selector such as shown in the following examples:

basefont|x {}
marquee|e {}
spacer|n {}

Besides individual selectors, the template file also includes several common selector combinations such as various list selector combinations, image-link sets, and series sets like h1,...h6. Additionally, the skeleton.css file provides several common classes, such as .show, .hide, and .clear, and even includes the very popular and versatile .clearfix hack, which is actually like three or four hacks rolled into one. The file is a paltry 4KB in size and free for download via the link below. Leave the credit at the bottom of the file intact and you are free to use the contents in any way you see fit!

Note: This free CSS template file, skeleton.css, is a continually evolving resource. Please share any valuable insights or potential improvements with everyone with a comment or email.

Download the Complete CSS Template File [ .css file | ~4KB | 3459 downloads ]

Fashion stylish deleted text in XHTML via the über obscure del tag.

Code example:

<del datetime="1999-Dec-31T23:59:59+00:00" 
title="Text deleted: 31-Dec-1999 @ 23:59">
 Terminate me.
</del>

Live example:

Terminate me.

Well, maybe not that obscure..

• <pre> — Preformatted character data
• <em> — Renders as emphasized text
• <strong> — Renders as strong emphasized text
• <tt> — Renders font as teletype or monospace
• <dfn> — Defines a definition term
• <code> — Defines computer code text
• <samp> — Defines sample computer code
• <kbd> — Defines keyboard text
• <var> — Defines a variable
• <cite> — Defines a citation
• <strike> — XHTML Transitional only
• <del> — Indicates deleted text
• <ins> — Indicates inserted text
• <dl> — Defines a definition list
• <dt> — Defines a definition term
• <dd> — Defines a definition definition
• <abbr> — Defines an abbreviation
• <acronym> — Defines an acronym
• <address> — Specifies an address
• <q> — Indicates inline quoted text
• <bdo dir="rtl"> — Override the bidirectional algorithm
• <wbr> — Word break, applied by IE and Fx if needed
• <optgroup> — Labels groups of options in select boxes