It said, "Insert disk #3" but only two will fit!

the brown-dragon blog

RSS' got style!

2009-01-13

Brown-Dragon(1)|Tech(32)|LtU(7)|C/C++(19)|SCM(2)|Scheme-Lisp(4)|Java(3)|Utils(19)|1TrueEd(3)|Fun(12)|My-Views(9)|

RSS and IE6. A match made in hell!

When I first implemented a RSS feed for my blog I was pretty chuffed! It turned out to be really easy (just a matter of adding a template) and allowed users to subscribe! Whee!

Unfortunately, it all fell apart when someone pointed out that the RSS feed link looked really crappy in IE6. Basically, it showed the plain-vanilla XML which, understandably, made users go "Wha?"

I hadn't noticed because Opera 9.62 and Firefox 3.0.1 both format RSS beautifully. In fact Opera, which is a superb browser, allows you to subscribe to feeds directly within the browser. But with IE6, I had to do it myself.

Now basically there are two standard ways to format any XML: CSS and XSL.

CSS is normally easier to use but less powerful. XSL is harder but completely flexible - you can basically do anything with it!

After trying out a couple of variations, I figured that using a simple image informing the user what was going on would be the neatest solution.

In addition, I stuck a nice comment in the header of the XML. So if you're browsing with Lynx, you still get to know what's going on. :-)

This is the CSS:

rss.css

/* We need a way to provide a RSS link without scaring the pants off
   non-supporting browsers */
*,
:root,
rss {
    visiblility: hidden;
    color: white;
    background: #fff url("rss-intro.png") no-repeat scroll top;
    height: 256px;
}
channel {
    display: none;
}

Here is the "before-and-after" applying my RSS recipe:

Before And After

Other Posts

(ordered by Tags then Date)