Say goodbye to the age-old clearfix hack and hello to the new and improved clearfix method..
The clearfix hack, or “easy-clearing” hack, is a useful method of clearing floats. I have written about the original method and even suggested a few improvements. The original clearfix hack works great, but the browsers that it targets are either obsolete or well on their way. Specifically, Internet Explorer 5 for Mac is now history, so there is no reason to bother with it when using the clearfix method of clearing floats.
In a perfect world, I don’t use CSS hacks, and certainly don’t recommend them. In the unpredictable, chaos of the real world, however, there are many situations where applying styles to particular browsers is indeed the optimal solution. Most of the time, I am targeting or filtering Internet Explorer (because it is so incredibly awesome), but occasionally I need to tweak something in a modern browser like Firefox, Safari, or Opera. In this article, we’ll look at CSS hacks targeting different versions of Firefox.
Some of these CSS hacks don’t validate, others are proprietary, and some are completely valid (depending on CSS specification). I have tested these hacks to the best of my ability, but don’t let that stop you from checking things out on your own (in fact, I absolutely recommend doing so). These Firefox hacks are organized according to version number and presented with ease of copying and pasting in mind. That said, here are some notes that apply to all of the hacks in this article:
For each hack, change only #selector, .selector, and of course the declaration blocks.
Hacks that do not validate as CSS are designated with [!] in the associated comment.
If you discover any inconsistencies, incompatibilities, or inoperabilities, please leave a comment.
This post is a work in progress. Please share any Firefox hacks that are not on the list.
Also keep in mind that, in general, there are two types of CSS hacks: those that target and those that filter. By targeting, we are referring to the application of CSS styles to a particular, targeted browser (or set of browsers) at the exclusion of all others. Conversely, by filtering, we are referring to the application of CSS styles to every browser except a particular browser (or set of browsers). In essence, this hack dichotomy represents two sides of the same coin. How you classify these various hacks all depends on perspective.
I know, I know, not another post about IE6! I actually typed this up a couple of weeks ago while immersed in my site redesign project. I had recently decided that I would no longer support that terrible browser, and this tangential post just kind of “fell out.” I wasn’t sure whether or not to post it, but I recently decided to purge my draft stash by posting everything for your reading pleasure. Thus, you may see a few turds in the next few weeks, but hopefully this isn’t one of them. In any case, here is my final post on IE6, at least for awhile..
/* set the minimum width for IE 6 */
#target_element {
width: expression((document.body.clientWidth < 335)? "333px" : "auto"); /* min-width for IE6 */
min-width: 333px; /* min-width for all standards-compliant browsers */
}
Although ugly, invalid, and resource-intensive, this technique works well at setting min-width properties for IE6. But beware! There is a catch. Chris Herdt recently wrote in with an important discovery:
…inclusion of any padding or margin on the element that has the fix applied will cause IE6 to crash…
My favorite series of articles here at Perishable Press, the “Obsessive CSS Code Formatting” articles explore the esoteric minutia involved with producing clean, well-formatted CSS code. From indention and spacing to opening and closing brackets, the obsessive CSS code series explores techniques and tricks used to transform ordinary stylesheets into streamlined masterpieces of inspiring beauty. Creating poetic CSS integrates the high art of employing consistent coding patterns and formatting methods with the practical functionality of proper syntax, logical structure, and concise delivery. These posts are extremely subjective, opening dialogue concerning the obsessive-compulsive behavior many of us embrace while implementing the powerful and essential coding language that is CSS. So, without further ado, here is a periodically updated list showcasing the all of the currently available articles in the series..
The “CSS Hackz Series” focuses on useful hacks, tricks, and workarounds for specific presentational and styling issues on various browsers. Although a majority of these articles provide solutions for Internet Explorer, other browsers are covered as well, either specifically or in general. The articles in the “Hackz” series are written to be as clear and concise as possible, focusing on application rather than theory. Thus, these posts cut right to the chase, presenting comprehensive methods and techniques aimed at those already familiar with the basic principles of Standards-based Web design. So, without further ado, here is a periodically updated list showcasing the all of the currently available articles in the series..
Continuing the CSS Hackz Series, I present a small army of hacks for targeting and filtering Internet Explorer 7! Here, “targeting” IE 7 means to deliver CSS and/or (X)HTML to IE 7 only, while “filtering” means to deliver CSS and/or (X)HTML to every browser that is not IE 7. In other words, targeting is to include (apply), filtering is to exclude (hide). Let’s dive right in..
Conditional Comments
Conditional comments are a proprietary Microsoft technique for targeting and filtering different versions of Internet Explorer. Other browsers do not understand them, and will treat them as regular (X)HTML comments. Of all the techniques presented in this article, conditional comments are perhaps the most flexible method for targeting and filtering any version of Internet Explorer, including IE 7. Here are some self-explanatory examples:
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 by declaring very small values for both font-size and height, while also declaring a zero line-height value. A little paranoid perhaps, but the unique declarations seem to have no unintended/negative side-effects. This method also targets IE exclusively for the inline-block declaration. Check it out:
This may surprise you, but I post quite a bit of content that never appears in the site’s main feed. It is my impression that a vast majority of subscribers are interested in web/graphic-design and development-related topics, and are really much less interested (if at all) in the miscellaneous odds and ends that wind up in the ever-expanding Perishable Press database.
In the past, the process of excluding content from the main feed typically involved changing the post-date to something at least a year or so in the past. The thinking was that I could always return to these posts at some point in the future and put them back into sequential order. Although effective, this process quickly became far too tedious and time-consuming to prove practical. Keeping my eyes open for possible solutions, I have accumulated several excellent techniques for excluding content from WordPress feeds.
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, the solution will inevitably involve the AlphaImageLoader filter until more sophisticated techniques are developed.
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..
One of the necessary evils associated with creating a highly customized WordPress-powered site involves the inevitable necessity to hack the WordPress core. WordPress is built for mass-consumption and tends to cater to the largest audience possible, making it necessary to bend and poke around the corners to get WordPress to function in a more specific or specialized capacity.
Of course, there is a major downside to tweaking core WordPress files: upgrading. The overambitious WordPress peeps are constantly rolling out upgrade after upgrade, many of which are required security fixes, patches, or whatever. The point is that editing the WordPress core on your current version of WordPress requires that you edit each and every subsequent upgrade, for each and every one of your sites.
Over time, I have realized the importance of documenting core changes for any sites that require them. Having a concise record of the files and code involved with each hack greatly facilitates the entire upgrade process. Without such a reference, subtle changes may be forgotten and key hacks may be overlooked. Here at Perishable Press, my former Core Hacks Log served me well from WordPress 1.5 to 2.0, however, much of it no longer applies to the new WordPress 2.3 configuration. Since the latest site overhaul, I have dramatically reduced the overall number of required core edits.
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..
Fix IE’s crazy box rendering. The first line limits to only IE. The second line
* html div#somediv { /* limits to all IE */
width: 300px; /* width for WinIE5.x */
w\idth: 333px; /* width for other IE */
}
div#somediv {
padding: 33px;
width: 377; /* width for all other browsers */
}
IE Double Float Bug
IE doubles the margin of any divs floated in the same direction. Great. To fix it, simply display the floated element as inline.
Clearing Divisions
Here are four relatively equally effective methods for clearing unruly divisions:
/* targets IE7 & below - valid CSS */
a:link:visited, a:visited:link {}
/* may be used to target any element */
#target:link:visited, #target:visited:link {}
Update: After upgrading Perishable Press in 2007, many of the hacks listed on this page are no longer applicable. Please refer to our new WordPress Core Edits for current information. Otherwise, this article remains online for reference purposes only.
The folks developing WordPress are continually rolling out “upgrades”. While it is generally a good idea to stay current, it can also be a bit of a pain if you have made any changes to the WordPress core files. Our recommendation? Keep a log such as this one that either includes all edits or links to posts describing them. That way, when it is time to upgrade to WP 3.0.1, WP 3.0.2, … WP 9.0.1, WP 9.0.2 … (you get the idea), it will simply be a matter of referring to your handy WP core file change log and then going thru the list, copying & pasting your way back to complete functionality. Just remember to add any subsequent changes to the list, though, or you may find yourself scratching your head after the next upgrade. Another good idea involves carefully comparing any code you are replacing, checking to make sure the wizards at WordPress haven’t changed any aspects of the original code (of which you are replacing).
So, without further ado, here are the WordPress core file edits currently operating here at Perishable Press:
Customize the_excerpt function
File: wp-includes/functions-formatting.php (~ lines #763 & 767): set to desired values:
$excerpt_length = 50;
...
array_pop($words);
array_push($words, '[...] ( click post title to read more )');
$text = implode(' ', $words);
Customize the wpautop function
File: wp-includes/functions-formatting.php (~ line #72, #83):
$pee = preg_replace('/\n?(.+?)(?:\n\s*\n|\z)/s', "<p>$1</p>\n\t\t\t\t\t\t", $pee); // make paragraphs, including one at the end
$string = '<a href="'.get_permalink($post->ID).'" title="Go to previous post">'.$previous;
...
$string = '<a href="'.get_permalink($post->ID).'" title="Go to next post">'.$next;
...
...
function next_posts_link($label='Next Page »', $max_page=0) {
...
echo '" title="Go backward in time">'. preg_replace('/&([^#])(?![a-z]{1,8};)/', '&$1', $label) .'</a>';
...
function previous_posts_link($label='« Previous Page') {
...
echo '" title="Go forward in time">'. preg_replace('/&([^#])(?![a-z]{1,8};)/', '&$1', $label) .'</a>';
...
function posts_nav_link($sep=' — ', $prelabel='« Previous Page', $nxtlabel='Next Page »') {
Vars Tweak for htaccess Edits
File: wp-includes/vars.php (~ #35):
// Server detection
//the next line is used to allow WP to write htaccess rules during permalink creation (comment out the $is_apache line first)
//$is_apache = 1;
$is_apache = ( strstr($_SERVER['SERVER_SOFTWARE'], 'Apache') || strstr($_SERVER['SERVER_SOFTWARE'], 'LiteSpeed') ) ? 1 : 0;
Customize Password-Protected Posts
File: template-functions-post.php (~ line #3):
function get_the_password_form() {
$output = '<form action="' . get_settings('siteurl') . '/wp-pass.php" method="post">
<p>' . __("This post is password protected. To view it please enter your password below:") . '</p>
<p><small><label class="h">' . __("Password: ") . ' </label><input class="postpassword" name="post_password" type="password" size="11" /> <input class="passwordsubmit" type="submit" name="Submit" value="' . __("Submit »") . '" /></small></p>
</form>
<div class="clear vspace"> </div>
';
return $output;
}
File: wp-includes/functions.php (~ lines #1067): insert "@" before parse_url and praise the Lord!
Remove CSS Link to Print Stylesheet
File: press/wp-subscription-manager.php (~ line #100): delete the following line to eliminate unnecessary 404 errors when users subscribe/unsubscribe to comments (or when managing subscriptions):
File: wp-includes/feed-functions.php (line #84): edit according to current default theme requirements:
echo "<a href='$url'>$link_text</a>";
--- changed to --->
echo "<a class=\"feed-icon\" href='$url' title=\"Subscribe to comments for this article\" rel=\"nofollow\">$link_text</a>";
Customize Commentator Links
File: wp-includes/comment-functions.php (~lines #358-368): swap the following:
/* original */
function get_comment_author_link() {
global $comment;
$url = get_comment_author_url();
$author = get_comment_author();
if ( empty( $url ) || 'http://' == $url )
$return = $author;
else
$return = "<a href='$url' rel='external nofollow'>$author</a>";
return apply_filters('get_comment_author_link', $return);
}
![[ Firefox ]](http://perishablepress.com/press/wp-content/images/2009/misc-chunks/firefox-logo.jpg){kind=logo}
In a perfect world, I don’t use CSS hacks, and certainly don’t recommend them. In the unpredictable, chaos of the real world, however, there are many situations where applying styles to particular browsers is indeed the optimal solution. Most of the time, I am targeting or filtering Internet Explorer (because it is so incredibly awesome), but occasionally I need to tweak something in a modern browser like Firefox, Safari, or Opera. In this article, we’ll look at CSS hacks targeting different versions of Firefox.
This may surprise you, but I post quite a bit of content that never appears in the site’s