Does Google Hate Web Standards?
Consider the Google home page — arguably the most popular, highly visited web page in the entire world. Such a simple page, right? You would think that such a simple design would fully embrace Web Standards. I mean, think about it for a moment.. How would you or I throw down a few lists, a search field, and a logo image? Something like this, maybe: Continue reading »
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 set 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,” […] Continue reading »
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 […] Continue reading »
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 […] Continue reading »
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 […] Continue reading »
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; } Continue reading »
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. Continue reading »
Pure CSS: Better Image Preloading without JavaScript
After reading my previous article on preloading images without JavaScript1, 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="https://perishablepress.com/image-01.png" width="1" height="1" alt="Image 01" […] Continue reading »
Perishable Press Gets Naked
In celebration of CSS Naked Day, Perishable Press has disabled it’s CSS stylesheet for today, April 9th, 2008 (which also happens to be my 36th birthday)! What a great way to celebrate the occasion. What are you waiting for? Go get naked!! ;) Continue reading »
Obsessive CSS Code Formatting: Patterns and Trends
Call me strange, but I format each of my CSS rules according to the following structure/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; […] Continue reading »
More Killer CSS Resets
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 and Tantek’s Reset. Continue reading »
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 […] Continue reading »
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 […] Continue reading »
Perishable News: Site Upgrades, Upcoming Interview, and PageRank Update
Ever since writing that last review article, I have been feeling the need to cut loose, relax, and blog about something a little more “down-to-earth,” like recent things that have been happening around here. If you are new to Perishable Press, rest assured that I try to keep these “site/personal news” update posts down to a minimum. Whenever possible, I save up a bunch of interesting off-topic things that I want to talk about, and then cram them all together […] Continue reading »
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, […] Continue reading »
Coldskins: Custom CSS Skins for Contact Coldform
With the recent release of my latest WordPress plugin, Contact Coldform, I am also creating a series of free, “drop-in” CSS skins for easy, “plug-n-play” customization. These skins employ valid, optimized CSS code designed for the following browsers: Continue reading »
