New book on WordPress Theme Development: WordPress Themes In Depth
ux
Tag Archive

CSS Hackz Series: Clearing Floats with the Clearfix Hack

I use the CSS clearfix hack on nearly all of my sites. The clearfix hack — also known as the “Easy Clearing Hack” — is used to clear floated divisions (divs) without using structural markup. It is very effective in resolving layout issues and browser inconsistencies without the need to mix structure with presentation. There are countless variations of the clearfix hack around the Web, and for some sad reason, I keep a file updated with all of them. Recent pruning of my clearfix collection yields two excellent float-clearing techniques: First clearfix method: addresses several reported rendering and display bugs […] Read more »

A Way to Preload Images without JavaScript that is SO Much Better

Responding to my first attempt at preloading images without JavaScript, CSS-Guru David Bowman graces his audience with a most enlightening triage of comments. Apparently, the image-preloading technique explained in the article is “major overkill” and “totally ridiculous.” Of course, I will be the first to admit that I am no expert in CSS, but I do enjoy sharing my discoveries and watching as people improve upon them. My first attempt at preloading images without JavaScript may indeed be “pretty crappy,” but it certainly works. Fortunately, several weeks prior to Mr. Bowman’s dazzling performance, insightful reader Duarte helps the community by […] Read more »

Sharpen Your Site by Removing Unwanted Link Border Outlines

Lately I have noticed several sites that display those unsightly dotted outlines on high-profile link elements. Typically, these link outlines plague various header elements such as banner images, navigational links, and other key features. This behavior frequently haunts highly graphical site designs and is often associated with various image replacement methods that position the original anchor text offscreen, generally far beyond the left edge of the browser window. When visible, such presentations display a ghastly, four-sided dotted border that wraps the linked element and then continues to stretch to the left-hand side of the browser window. Here are a few […] Read more »

Obsessive CSS Code Formatting: Indentation and Spacing

In the intriguing discussion following the first obsessive CSS formatting article, Jordan Gray brought up the age-old question regarding spacing: tabs or single spaces? I smugly responded that the issue has long-since been resolved, with tabbed spacing as the obvious winner. Let’s take a look at some serious CSS spacing examples.. 1) Strictly Single Spacing Here we have several code blocks showing consistent spacing via single blank space. Three key areas where single spacing is seen in this example: after the selector, and before each property and its corresponding value: Read more »

CSS Hackz Series: PNG Fix for Internet Explorer

In this CSS Hackz Series article, I outline several solutions for displaying alpha-transparent PNG (a.k.a. PNG-24 format) images in everybody’s favorite broken browser, Internet Explorer. Specifically, IE versions through 6 (excluding IE 5 for Mac) fail to support alpha-channel transparency for PNG images. In these versions of IE, every pixel containing alpha-transparency is displayed with an ugly, flat gray color. Fortunately, there are plenty of hacks and workarounds designed to “fix” IE’s PNG image-display problem. Unfortunately, every currently available solution requires the use of Microsoft’s proprietary AlphaImageLoader transparency filter 1. Thus, if you need to display translucent PNG images in IE, […] Read more »

CSS Hackz Series: Minimum Width, Maximum Width for Internet Explorer 6

Opening the CSS Hackz series is the infamous CSS-expression hack for achieving minimum and maximum widths in Internet Explorer 6. Here is how to set the maximum width for IE 6: #target_element { width: expression((document.body.clientWidth > 778)? “777px” : “auto”); max-width: 777px; } Here is how to set the minimum width for IE 6: #target_element { width: expression((document.body.clientWidth < 335)? “333px” : “auto”); min-width: 333px; } Read more »

Obsessive CSS Code Formatting: Opening and Closing Brackets

Following my recent post on CSS code formatting, I was delightfully surprised to have received such insightful, enthusiastic feedback. Apparently, I am not the only person passionate about the subtle nuances involved with the formatting of CSS code. So, to continue the conversation, let’s explore several techniques for writing the opening and closing brackets of CSS declaration blocks. Read more »

Pure CSS: Better Image Preloading without JavaScript

After reading my previous article on preloading images without JavaScript 1, Nanda pointed out that adding extra markup to preload images is not the best approach, especially where Web Standards are concerned. Mobile devices, for example, may experience problems when dealing with the following preloading technique: /* ADD THIS TO CSS */ div#preloaded-images { position: absolute; overflow: hidden; left: -9999px; top: -9999px; height: 1px; width: 1px; } <!– ADD THIS TO XHTML –> <div id=”preloaded-images”> <img src=”http://perishablepress.com/image-01.png” width=”1″ height=”1″ alt=”Image 01″ /> <img src=”http://perishablepress.com/image-02.png” width=”1″ height=”1″ alt=”Image 02″ /> <img src=”http://perishablepress.com/image-03.png” width=”1″ height=”1″ alt=”Image 03″ /> </div> Thus, as Nanda suggests, […] Read more »

Obsessive CSS Code Formatting: Patterns and Trends

Call me strange, but I format each of my CSS rules according to the following pattern: div#example element { margin: 5px 15px 5px 0; border: 1px solid #444; line-height: 1.5em; text-align: center; background: #222; font-size: 10px; display: block; padding: 5px; color: #888; float: left; } div#another div.example element { border: 1px solid #444; margin: 7px 0 17px 0; letter-spacing: 1px; font-weight: bold; background: #222; font-size: 1.1em; cursor: pointer; display: block; padding: 3px; width: 308px; color: #888; clear: left; float: left; } div#another div.example element { text-indent: -9999px; overflow: hidden; position: fixed; display: block; z-index: 9999; padding: 0px; margin: 0px; bottom: […] Read more »

More Killer CSS Resets

Update! Check out CSSresetr for an easy way to test and download the best reset styles for your next design. Just a note to let everyone know that I have updated my previous CSS reference article, A Killer Collection of Global CSS Reset Styles. The updated version features two more excellent CSS resets, as well as the updated Meyer reset and a link to Eric’s official CSS Reset page. The two new reset styles are the Tripoli Reset (404 link removed 2012/06/16) and Tantek’s Reset. Tantek’s CSS Reset Dubbed “undohtml.css”, Tantek’s CSS Reset is a solid choice for removing many […] Read more »

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 have commented that they like the way the jump menu “lights up” upon gaining focus. Whenever a user hovers their cursor over the region at the top of the page, all links in the jump menu change to a more visible color. Then, as the cursor moves over the various menu items, each jump link is further highlighted with an even brighter color and an underline. This progressive focusing is best seen in browsers that support the CSS […] Read more »

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 XHTML code, I began snooping around in the pages’ CSS files. Eventually, I found myself rewriting the entire CSS and XHTML files for both documents. Although this sort of activity […] Read more »

Lessons Learned Concerning the Clearfix CSS Hack

I use the CSS clearfix hack on nearly all of my sites. The clearfix hack — also known as the “Easy Clearing Hack” — is used to clear floated divisions (divs) without using structural markup. It is very effective in resolving layout issues and browser inconsistencies without the need to mix structure with presentation. Over the course of the past few years, I have taken note of several useful bits of information regarding the Easy Clear Method. In this article, I summarize these lessons learned and present a (slightly) enhanced version of the clearfix hack.. Read more »

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 »

Killer Collection of CSS Resets

Update! Check out CSSresetr for an easy way to test and download the best reset styles for your next design. Using CSS to style semantically meaningful (X)HTML markup is an important key to modern web design practices. In a perfect world, every browser would interpret and apply all CSS rules in exactly the same way. However, in the imperfect world in which we live, quite the opposite frequently happens to be the case: many CSS styles are displayed differently in virtually every browser. Many, if not all, major modern browsers (e.g., Firefox, Opera, Internet Explorer, Netscape, et al) implement their […] Read more »

Latest Tweets Thank you for the retweets! :) @WPUpdates1 @miya0001 @elliottrichmond @wp_digest