23 Feb 2012

Blog: CSS compression and errors

isotope

So, I noticed something weird recently while working on a site.

I used the awesome Isotope, and the demo page I made worked fine. When I took the exact same html and put it on the final site, something weird happened. The boxes were not expanding correctly.

I rechecked my javascript a bunch of times, put the new site’s js into the old demo, and it worked. So, I tried putting the old code into the new site, and it didn’t work. I tried pretty much every single thing I could think of, and yet, nothing worked.

In my javascript call, I use toggleClass. When I pulled up the source for the page, I noticed that WordPress was adding Jquery UI Core, so I thought that maybe the extra animation was causing the issue. I went online and googled the issue, and found that there was an issue with width animation, as documented here, and while it was the exact same issue, I wasn’t animating the isotope elements that way, and I guessed that that issue was old, since Isotope now has an animation engine.

I took Jquery UI Core’s code, and added it to the demo page, and it still worked.

So, I thought, ok, what could possibly make it not work correctly?

Finally, I just took off the wp_head(); and wp_footer(); from the page to check if there was any other script causing the interference, and it still wasn’t working, so now, I knew for a fact that my JS was sound, and that my markup was sound.

After almost bashing my head in a couple of times, I thought that logically, either the site was possessed, or there was something in the CSS that wasn’t working correctly or had changed. After all, that was the only thing I hadn’t checked, mainly because I just took the demo css, and put it in the new site’s css before compressing it.

Huh.

So, the only thing that was different was something so insanely small that I didn’t even think about it. I had put the demo’s css through the Code Beautifier that I usually use.

For some reason, the CSS Beautifier didn’t particularly like this line:

and it decided to change it to this:

That’s all it took to make everything crash and burn. One measly line.

I spent more than a couple of hours trying to find what was wrong, changing JS calls, changing the code, changing everything but the simplest thing ever, which I thought would never be the cause of the problem.

So, from now on, when I see a problem I can’t seem to be able to fix, I’ll be sure to double check the CSS a couple of times before changing the markup and the JS and getting one heck of a headache in the process.

I hope this reminder can be useful to people who are trying to fix an issue that seems to be insane. Compare your working demo’s css against the css you’re using in the live site (Notepad++ has this feature included).

Yes, we humans can still have idiotic moments.

And, now, since that’s fixed, I can go back to more important things, like resting a bit before I go back to the rest of it.

Share it!

Leave a Reply

Connect with Facebook