This post is dedicated to those little bugs that only seem to happen to your project, and no one else on the Internet. Luckily, this wasn’t completely the case this time, as I did manage to find some links after modifying my search query numerous times.

First of all, something arbitrary:

Prototype 1.5.0_rc2’s AJAX works in IE, but not Firefox

The Rico Forums supply a patch that fixes this problem that seems to occur when you’re running Rico concurrently with Prototype.

I started rc2 instead of rc0 and suddenly my news headline component refused to fire off any XmlHTTPRequests, and thus failed to retrieve any story summaries from the server. The component still worked in Internet Explorer 6 and 7 though, so I was kind’ve lost. After applying the patch mentioned in the link above, everything returned to normal.

In my case, I wasn’t running Rico with Prototype, but rather moo.fx, along with some other small JS scripts - anyway, one of them broke it.

Internet Explorer: bold text and opacity filter causes corrupted fonts

This took me a while to find - using moo.fx’s fx.Opacity or Prototype’s Effect.Pulsate (make that anything that uses IE’s alpha opacity filter) on bold text causes it to appear corrupted (blurry, over-bolded, distorted) in IE 6.

Again, luckily, I stumbled upon this solution: IE bold text + opacity problem .

Basically, to fix this, you have to ensure you’re setting the background colour for the element that you are fading in/out. In other words, background: #FFF;.

Comments(0)

Internet Explorer versions 6 and below didn’t not parse the !important css modifier correctly - this allowed you to specify styles for browsers like Firefox and such, using the following syntax:

identifier {
  background: #000 !important; /* Firefox */
  background: #FF0000; /* IE */
}

The element’s background will be set to red because the red declaration is after the black declaration, and IE ignores !important identifiers - Firefox on the other hand observes the identifier correctly, and will use the higher priority black background.

This is (I mean was) a pretty cool solution that I have used to good affect on several websites. Unfortunately Internet Explorer 7 shipped with support for the identifier, but didn’t really fix much else in the way of CSS bugs. So we now have a browser that will correctly use the higher priority declarations, but these declarations still break layout. Sigh.

This took me a couple of minutes to figure out why my site was going insane, luckily the fix is pretty quick:

Remove the !important keywords from your CSS file, and then delete the IE related declarations.

identifier {
  background: #000;
}

In your main template/HTML file, under your external css declaration, put the following:

<!--[if IE]>
<style type="text/css">
identifier {
  background: #FF0000;
}
</style>
<![endif]-->

This uses IE’s conditional comments to apply the appropriate styles - other browsers treat it as a comment and ignore it.

Comments(1)