So in the current beta releases of Tasks Pro™ and Tasks (1.7b4 and 2.7b4 respectively) there is an IE only bug that makes the list of tags on the tags screen look like this:

instead of like this:

Being the CSS expert that I am, I looked at all the HTML and CSS rules and scratched my head a little. Then I commented out all of the CSS rules for this list and started adding them back one at a time until things broke.

Sure enough, one simple rule was breaking things:

When I remove that – everything is fine (I added red outlines to the form to illustrate):

With the rule back in, you can still click the links and even select some of the text. Also the item borders appear randomly.

I tried a number of tricks that sometimes make things go more smoothly with IE CSS – no joy.

Then I created a test case of just the list code with CSS and JS to pass around amongst some fellow devs and the problem wasn’t there!

This got me to start experimenting with parent elements and sure enough – removing the div that the list was sitting in fixed everything right up.

I added the border styling to the list itself, and everything works fine. That’s 2 hours of my life I’ll never get back – thanks IE.

Perhaps this will help someone suffering through a similar issue.

This post is part of the project: Tasks Pro™. View the project timeline for more context on this post.