Blog Facelift: The Joy Of Filters (aka Getting IE Filters to Work)

I admit it (as if it wasn't already obvious) - I dropped out of Graphic Design at Uni. The sad truth is that I'm a much better design critic than creator. /me shrugs, I'm from the Scoble school of blog design - it's all about the content!

Still, a friend of mine (who might well bear my children for a link to Buy Presents For Darryn, mwuhaha) was angry at me for IE Filters the other night.

Being something of a back-end guy (I like the data access bits and the networky stuff, but the CSS stuff is something somebody else is much better off doing), I hadn't a clue what he was on about, and comiserated without really committing to anything.

Overnight, I decided that my blog lacked a certain aesthetic appeal, so I started renovating the stylesheets, and discovered Filters. And boy, are they ever cool. And I'm told they gracefully “just don't work” in other browsers. Can't beat that for an optional feature!

There's one key frustration I wanted to share, which comes from Tristan Not Reading The Docs Properly, and that's that if you just add a filter:blah to a random object in your style sheet, it may not work at all - so I'll paste the relevant bit in below:

The object that the filter is applied to must have layout before the filter effect will display. You can give the object layout by setting the height or width property, setting the position property to absolute, setting the writingMode property to tb-rl, or setting the contentEditable property to true.

Pasted from <https://msdn.microsoft.com/workshop/author/filter/reference/filters/gradient.asp?frame=true>

So, just add a "width:100%;" (or whatever else), and you're done.

Now where did I leave those blink tags? I need to draw more attention to the titles...