Fall Sale! Save 25% on WordPress books with coupon code: FALL2017 Shop Books »
ux
Tag Archive

Everything You Ever Wanted to Know about Favicons

Fifty Favorite Favicons If you have a website, you need a favicon. For those who may not know, favicons are the small, square icons that frequently are associated with websites. Favicons appear in many places, including browser toolbars, bookmarks, tabs, and address bars. Favicons provide immediate visual identification of their represented sites, enabling super-easy navigation for Web users. While surfing bookmarks with fifty tabs open, finding and clicking on icons is far more efficient than reading through piles of link text. Yet, beyond making it easier for people to identify and locate their favorite websites, favicons also play a critical […] 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 »

CSS Throwdown: Preload Images without JavaScript

Clean, easy, effective. You don’t need no stinking JavaScript to preload your images. Nope. Try some tasty CSS and (X)HTML instead! Here’s how.. (only two steps!) Step 1 — Place this in your CSS file: div#preloaded-images { position: absolute; overflow: hidden; left: -9999px; top: -9999px; height: 1px; width: 1px; } Step 2 — Place this at the bottom of your (X)HTML document: <div id=”preloaded-images”> <img src=”https://perishablepress.com/image-01.png” width=”1″ height=”1″ alt=”” /> <img src=”https://perishablepress.com/image-02.png” width=”1″ height=”1″ alt=”” /> <img src=”https://perishablepress.com/image-03.png” width=”1″ height=”1″ alt=”” /> </div> ..and that’s a wrap! All images are preloaded and ready for calling as you please. Completely valid, […] 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 »

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

Keep it Dark: Hiding and Filtering CSS

Hiding and filtering CSS rules for specifically targeted browsers is often a foregone conclusion when it comes to cross-browser design considerations. Rather than dive into some lengthy dialogue concerning the myriad situations and implications of such design hackery, our current scheduling restraints behoove us to simply cut to the chase and dish the goods. Having said that, we now consider this post a perpetually evolving repository of CSS filters.. Read more »

Absolutely Centered Layout

This tutorial explains several techniques for centering content absolutely using (X)HTML. By “absolutely”, I am referring to an element (such as a <div></div>) that is centered on the page both horizontally and vertically. The techniques presented below explain how to center elements using CSS, frames, or tables. Read more »

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 the (X)HTML documents desiring unique scrollbar colors: Read more »

Nifty CSS Link Hover Effect

This nifty CSS link hover effect magically reveals a hidden span of text after specified links. The trick employs an anonymous span nested within an anchor tag. CSS then acts upon the markup with a set of rules that basically says hide the nested span until the link is hovered. Here is an example. Read more »

CSS Code Repository

Here is my online (i.e., public) repository of interesting, mysterious, and/or perhaps even useful CSS code. Note that this post and file are from 2006. Probably best for informational and reference purposes only. Read more »

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 of completeness. As CSS selectors, the tags are (almost all) empty, just waiting to be filled with declarations, properties, and values. Read more »

Perishable Press Print CSS

Editor’s Note: This article applies exclusively to our Lithium theme, which is no longer the default site theme. Different themes may or may not include print style sheets of their own. Click here to check out the Lithium theme, to which this article applies. Click here to see a list of all available themes. Read more »

Latest Tweets Fall Sale! Save 25% on any book: Tao of WP, DigWP, WordPress Themes In Depth, & .htaccess made easy. Code: FALL2017… twitter.com/i/web/status/90414…