As my current client has been rolling out IE 10 enterprise wide over the past few weeks we find ourselves facing issues with our legacy CSS code base.
I don’t think anyone should be surprised really that things are breaking when the CSS/UX has been neglected for years. When most of your front end code is written by back end developers with a blaze attitude toward UX you’re bound to experience some pain down the line. There is a lot of inline CSS that needs to be cleaned out and custom ASP.Net server controls that generate a mix of Javascript and CSS. With little consistency this is the kind of task that can snowball into a massive effort to get things looking just right. Most infuriating is that sometimes no matter how hard you try things always looks a little messy.
The easiest way to bring a little sanity into something like this is to normalize your CSS a little. You can use purpose made style sheets for this and normalize.css on GitHub is very good. You don’t have to bring it in all at once, maybe you can start piece meal and see if that helps a little.
As an example our forms suffered from inconsistent padding/margin with various alignment issues. Even a snippet this simple will have a surprising effect on the overall cleanliness of your layouts:
input, select, textarea {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}This will make your boxing model consistent for form elements so they align more cleanly and you might be surprised to see what an impact this can have on a busy UI with lots of controls.
Give this technique a try next time you find yourself struggling with and older code base that suffers from various CSS related issues.