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 »
![[ Screenshot: broken footer positioning in IE 7 ]](https://perishablepress.com/wp/wp-content/images/2007/script-tags/ie-incorrect.gif "a rather 'loose' footer as seen in IE 7")
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 […] Continue reading »
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 […] Continue reading »
![[ Preload Images with CSS ]](https://perishablepress.com/wp/wp-content/images/2007/misc-chunks/preload-images-css.jpg)
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 to do it with only two easy 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="" […] Continue reading »
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). Continue reading »
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! Continue reading »
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.. Continue reading »
![[ minimalist Theme ]](https://perishablepress.com/wp/wp-content/images/themes/minimalist_.jpg)
The minimalist theme is crisp and clean. Featuring a three-column satellite menu-page to reduce clutter and streamline usability, the minimalist theme is designed to present site content with sophistication and elegance. The minimalist theme is XHTML 1.1 strict, employs nearly valid CSS (ha!), and features browser-safe colors and universal fonts all delivered via concise, two-column liquid layout. Mindfully detailed and carefully prepared, the minimalist theme provides plenty of room for customization and expansion. One of my favorite theme designs. Continue reading »
Consider this post an evolving receptacle for Firefox-specific CSS tricks. Continue reading »
Gravatars have become a popular way of adding spice to the “comments” page of many WordPress-powered sites. So popular, in fact, that the gravatar server is often overloaded, bogged down with millions of gravatar requests every second. This immense server load effects user pages everywhere, resulting in slow loading times, unresolved server requests, and missing gravatars. Such broken presentations appear unprofessional, tarnish reputations, and may provoke confusion. This article provides essential solutions for an extreme gravatar makeover.. Continue reading »
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 […] Continue reading »
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. Continue reading »
Check out these crazy CSS underline effects: Continue reading »
Consider this page a virtual dumpster of wonderful CSS hacks.. Continue reading »
