New book on WordPress Theme Development: WordPress Themes In Depth

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 current site renovation project, I have attempted to implement as many of these practices as possible. At the time of this writing, I somehow have managed to score an average 77% (whoopee!) via the YSlow extension for Firebug. Of the handful of these tips that I […] Read more »

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 the World Wide Web, providing reasonable support for handheld browsers is becoming increasingly important. Without it, your site is left looking incomplete and unprofessional when viewed from mobile devices. So, with that said, today […] Read more »

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: 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 […] Read more »

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 HTML 4.01 Strict HTML 4.01 Transitional HTML 4.01 Frameset Read more »

Rethinking Structural Design with New Elements in HTML 5

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 Read more »

Unicode Character Reference for Bloggers

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 […] Read more »

Wrapping Your Head around Downlevel Conditional Comments

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 […] Read more »

The Friendliest Link Targets in the Neighborhood

The target attribute for anchor elements (<a></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: Read more »

Standards-Compliance Throwdown: MS-IE5/6 DNS/404 Error-Page 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, 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 […] Read more »

URL Character Codes

URL’s frequently employ potentially conflicting characters such as question marks, ampersands, and pound signs. Fortunately, it is possible to encode such characters via their escaped hexadecimal ASCII representations. For example, we would write "?" as "%3F". Here are a few more URL character codes (case-insensitive): Read more »

Embed QuickTime Notes Plus

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> Read more »

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 < 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> […] Read more »

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: <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> Read more »

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 of CSS.. Read more »

Embed External Content via iframe and div

By using an <iframe></iframe> within a <div></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></div> and <iframe></iframe> tags. Simply add the following code to […] Read more »

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 English language. Although there are several excellent translation services currently available, our research has determined that Google’s free translation service exceeds our expectations […] Read more »