CSS3 Property "img:after" in Firefox?

The code is fairly simple: img:after { content: “Hello World”; }. It displays the text “Hello World” right after an image. It works in Opera, but not in Firefox! Why is that? Isn’t Firefox supposed to be the new black?

For those of you pondering the Why of this, try out img:after { content: “(” attr(alt) “)”; } for show. It’ll type out the contents of the ALT attribute after an image.

WordPress 2.0 Borkage

A few days ago, I updated both my Noscope and Fauna weblogs from WordPress 1.5.2 to WordPress 2.0. The upgrade process was smooth and simple.

But it seems WordPress 2.0 wasn’t quite ready for primetime, atleast for me. The problem, I’ve tracked down, is related to the way WordPress now handles permalinks. It seems the implementation doesn’t work on my setup, which is to have my main blog in the /journal/ directory, and show only a digest on the frontpage. The result? /journal/ is now a badly designed 404 page, and conditional tags aren’t working.

How is WordPress 2.0 working for you?

Welcome Safari Users

In a welcome surprise, my referrer stats recently revealed that Master Designers John Oxton and Jon Hicks have generously decided to link to my latest Installment: Stagecraft.

Unfortunately, my Installments system has been suffering from a Safari bug for a while. Now, with the sudden surge of new traffic, I figured it was time to take action, and things should be fixed. Safari users will get the whole essential experience…

The bug, which was discussed in the comments of another post a while back, means that deep links to named Flash anchors such as

/installments/2005/05/#5

would infinitely refresh the page if seen using Safari. On the other hand, a plain link such as

/installments/2005/05/

would work just fine. I’ve encountered no other browsers with this behaviour.

Named Flash Anchors

When I initially built the installments system, I had 2 simple goals:

  1. Ability to link directly to each image in an installment of 5
  2. Allow music to play uninterrupted while looking at the 5 pictures
  3. As the sharp reader will notice, this is a pickle. On one hand, it’s easy to let music play uninterrupted if the music is being played in a permanent frame. On the other hand, this pretty much kills the ability to have different URLs for main content.
  4. The solution, which I remember being very proud of, was to use the new Flash 6 feature called named anchors. It worked wonderfully, and I described the process in a detailed tutorial.
  5. A good month later, that very tutorial would reveal the first reports of the problem. Since then, I’ve tried to ignore the problem due to other things of higher importance. That is, until today.

The Problem with Anchors

While Safari users will no longer experience infinite loops, they won’t get the whole experience either. In order to “fix” the problem, I’ve quite simply disabled the JavaScript that updates the URL with anchors, on the entire Mac platform. Unfortunately I’m unable to specifically target Safari when in Flash, so Firefox and other browsers will also get the axed usability.

In the end, URLs such as /installments/2005/05/#5 will still work for Mac users, but the anchors will no longer update to represent the active page, when the page is navigated.

Whether the problem is with Safari, or Safari’s handling of the JavaScript involved remains to be seen. I hope to be able to fix it in the future. For now: Welcome Safari users!

(This link would prevoiusly refresh infinitely for Safari users)

Showing CSS to IE only (The Underscore Hack) [Update]

This page details an inline CSS hack for Internet Explorer 6 on Windows. You can also find an extended version of this hack that works for Internet Explorer 6, 7 and 8.

The best idea, however, would be to serve a separate stylesheet for each browser you’re hacking to.

Recently, I stumbled upon (via Mr. van Kesteren) the best CSS “hack” you’ll ever use in CSS sites.

It allows you to show CSS to Internet Explorer only, omitting Mozilla, Safari and Opera.

This is different from conditional comments in the following way:

  • It allows you to write conditional CSS directly in your stylesheet file, and doesn’t require inline styles
  • It works for IE 5.0, 5.5 and 6.0
  • It’s a hack
  • It’s very simple to work with.

The hack is called the “Underscore Hack”, and apparently it’s been around for a while. For the benefit of those of us who didn’t know about it, I’m posting it here:

body {
    background: green; /* show to Mozilla/Safari/Opera */
    _background: red; /* show to IE */
}

Cons

Sample Page

View sample page, including CSS

More Information on CSS filtering

John Serris has done an indepth write-up on various other methods of filtering CSS. It is definitely worth a visit:

Managing CSS Hacks

Making IE Specific CSS or Code (Conditional Comments)

This page details the generally most accepted solution to serving up custom stylesheets for versions of Internet Explorer. As such, using conditional comments is arguably the most recommended way to “hack”.

You can also find inline CSS hacks for Internet Explorer 6, 7 and 8.

While it is a pain to develop for archaic browsers, Internet Explorer on Windows platforms support a fairly straight-forward and simple method, that’s not even a hack.

As a webdesigner, it is quite a challenge to design and build a site that is supposed to attract many viewers on many platforms. I can’t just choose to design for the latest and greatest. Decisions on what one wants support, must be made, and the design should ideally “degrade gracefully” on unsupported browsers.

Please note, these tricks are for Windows Internet Explorer only.

Showing CSS For Newer Than Internet Explorer 7

This is probably the most common use case. You want to show a specific stylesheet for Internet Explorer 7 and newer. See also how to handle IE8.

[raw]
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="ie7plus.css" />
<!--[endif]-->
[/raw]

Showing CSS For Older Than Internet Explorer 6

In case you need a stylesheet specifically for IEs older than Internet Explorer 6.

[raw]
<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="ie5.css" />
<!--[endif]-->
[/raw]

Showing CSS For All Versions Of Internet Explorer (Only)

If you just want to attach a stylesheet, or display a chunk of code to all versions of Internet Explorer, you can use this code:

[raw]
<!--[if IE]><!-->
<link rel="stylesheet" type="text/css" media="screen" href="ie.css" />
<!--<![endif]-->
[/raw]

Hiding CSS From Internet Explorer

This is useful, for instance, if you want to serve a stylesheet free version of your site to IE6 users.

[raw]
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" media="screen" href="notie.css" />
<!--<![endif]-->
[/raw]

There are many more of these “out-commenting” tricks for you to refine your stylesheets. For a complete list, I have to redirect you to this document on conditional comments.