Perishable Press

Content Negotiation for XHTML Documents via PHP and htaccess

In this article, I discuss the different MIME types available for XHTML and explain a method for serving your documents with the optimal MIME type, depending on the capacity of the user agent. Using either htaccess or PHP for content negotiation, we can serve complete, standards-compliant markup for our document’s header information. This ...

How to Display Your Twitter Posts on Your WordPress Blog

Alright, time for another “How’d-you-do-that-thing-on-your-site?” post. This question comes from the one and only Mr. Graham of ImJustCreative.com. In a recent email, Graham literally begged me to share my “secret recipe” for displaying my latest Twitter Tweets (wow, did I actually just say that?) right here on Perishable Press: ...Would be really really decent of you if you could let me know how to do it? Pretty please? ...

CSS/(X)HTML Tutorial: Hovering Accessibility Jump Menu

Recently, a reader named Don asked about this theme’s accessibility (accesskey) jump menu located at the top of each page. Several people ...

XHMTL/CSS Remix: Creative Commons License

Not too long ago, I played with the idea of releasing article content under a Creative Commons (Attribution-NonCommercial-ShareAlike 2.0) License. At the time, I wanted to host my own copies of the two associated CC license pages. During the process of uploading the pages to my own server, several minor adjustments (regarding image paths, etc.) needed to be made to the source code. After tweaking a few things in the ...

What is the Difference Between XHTML 1.0 Strict and XHTML 1.1?

As some of you (e.g., Louis) may have noticed during the recent site redesign, I decided to switch the default doctype from XHTML 1.0 Strict to XHTML 1.1. Just in case you were wondering, XHTML 1.1 is different than XHTML 1.0 in three important ways 1: On every element, the ...

Open External Links as Blank Targets via Unobtrusive JavaScript

Beginning with this article, I am serving up a short series of unobtrusive JavaScript functions that I use to enhance the functionality of Perishable Press. In this post, I present a comprehensive JavaScript method of opening external links in new windows (or tabs, depending on the browser). One way of opening links in new windows is to insert the HTML target="_blank" attribute into all necessary anchor ...

Prevent JavaScript Elements from Breaking Page Layout when Following Yahoo Performance Tip #6: Place Scripts at the Bottom

By now, everyone is familiar with the Yahoo Developer Network’s 14 “best-practices” for speeding up your website. Certainly, many (if not all) of these performance optimization tips are ideal for high-traffic sites such as Yahoo or Google, but not all of them are recommended for smaller sites such as Perishable Press. Nonetheless, throughout the ...

New Mobile CSS Styles for Perishable Press

The amount of time I spend surfing the Web from a mobile device has steadily increased since the acquisition of my new favorite mobile device. Unfortunately, many sites have yet to implement (or even consider) support for mobile devices. Without proper formatting, such sites are virtually useless, requiring unnecessary download times, displaying unreadable pages, and serving unusable content. Given the inevitable ubiquity of mobile access to ...

Absolute Horizontal and Vertical Centering via CSS

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

Bare-Bones HTML/XHTML Document Templates

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

Unicode Character Reference for Bloggers

[ Keywords: unicode, utf-8, encoding, character, reference, quote, copyright, bullet ] 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 ...

Wrapping Your Head around Downlevel Conditional Comments

[ Keywords: downlevel, conditional, comments, hidden, revealed, positive, negative, ie ] 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 ...

The Friendliest Link Targets in the Neighborhood

[ Keywords: link, target, blank, replace, self, parent, top ] The target attribute for anchor elements () 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 ...

Standards-Compliance Throwdown: MS-IE5/6 DNS/404 Error-Page Redesign

[ Keywords: Microsoft, MS, IE, DNS, 404, CSS, Error, Monzilla, Explorer, redesign ] 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, ...

Embed QuickTime Notes Plus

This post contains random notes for embedding QuickTime within web pages. QuickTime Embed Attributes via CSS (X)HTML Code for Embedding/Including QuickTime...

Feed your Image via Atom or RSS

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 XML element for URL’s targeting 1:1 images. Otherwise, use the ...

Embed Flash and Video via the object Tag

Embed Windows Media Player via the object tag Here is the general format for including .wmv files in web pages: Embed Windows Media Player via object and classid Here is the general format for including .wmv files in web pages using classid: ...

Maximum and Minimum Height and Width in Internet Explorer

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

Embed External Content via iframe and div

By using an within a , 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 ...

Automatic Language Translation Methods

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

Auto-Focus Form Elements with JavaScript

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): function formfocus() { document.getElementById('element').focus(); } window.onload = formfocus; ...and corresponding (X)HTML markup (abbreviated for clarity): In this example, the first form element ...

Exploring the (X)HTML Link Element

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

One Link to Open Them All

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

Absolutely Centered Layout

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: And employ this CSS (commented with explanations): body { background-color: #333; /* cosmetic */ margin: 0px; /* required */ } div#wrapper { background-color: red; /* cosmetic */ height: 0px; /* set to taste */ /* required */ position: absolute; overflow: visible; display: block; width: 100%; left: ...

IE Scrollbar Colors

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

XHTML Document Header Resource

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

Optimize Convoluted Code via JavaScript

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() ...

HTML Frames Notes Plus

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

Accessibility Notes Plus

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: hhome mmenu ssearch 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 ...

A Complete CSS Template File

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

Stylish Deleted Text

Fashion stylish deleted text in XHTML via the über obscure del tag. Code example: Terminate me. Live example: Terminate me.

Obscure XHTML Tags

Well, maybe not that obscure.. -- Preformatted character data -- Renders as emphasized text -- Renders as strong emphasized text -- Renders font as teletype or monospace -- Defines a definition term -- Defines computer code text -- Defines sample computer code -- Defines keyboard text -- Defines a variable -- Defines a citation -- XHTML Transitional only -- Indicates deleted text -- Indicates inserted text -- Defines a definition list -- Defines a definition term -- ...

WordPress RDF Source Makeover

Beautiful Source-Code Output, Part 1: Whip your WordPress RDF Code into Submission Update: This article applies specifically to WordPress 2.0.2, but may be generalized to any WP 2.0+ version. I love looking at beautiful source-code output. However WordPress tends to spit code out in random chunks, often leaving spaces, line breaks, and tabs littered throughout the source output. This messes things up. Lists don’t look like lists and logically written code often appears scattered along the page carelessly. Often, ...

Marquee Madness

For reference purposes.. Marquee Madness

Pipe Symbols

Broken pipe symbol »         ¦     [ ¦ ] Unbroken pipe symbol »     |     [ | ]

• Up •

Tools & Resources

3G Blacklist finally unleashed!