“Fun” IE Bug

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:

Broken in IE

instead of like this:

Works fine in Firefox

Being the :scare: CSS expert :/scare: 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:

ul.list li form {
display: none;

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

IE with form visible

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

Broken in IE again

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.

Broken in IE again again

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.