Troubleshooting your HTML and CSS
Posted by Mathew Patterson on September 20, 2007 3:27 PM
We get a lot of questions from frustrated designers trying to deal with their beautiful designs being mangled by various email clients. Often we don't have a single straight answer, because it is an issue with support for a particular element of HTML or CSS.
We're going to start pushing for standards in HTML emails, but even so we all need some skills in how to track down problems with our HTML and CSS.
Here are a few techniques I use for web pages and for emails - leave us a comment below with your own techniques, processes and ideas.
- Borders on everything: Adding a 1px coloured border to different elements helps you to see where the elements are interracting with each other, whether sizes are applied and where you might have munged tags. Tools like Firebug can let you do this live.
- Chop it in half: If you can't figure out where a problem is coming from, try cutting out big chunks of the CSS until it goes away. It helps you narrow down to the section that is causing the problem, which can save a lot of time.
- Validate your code: Even if you aren't going to be able to make it 100% valid, it will pick up broken tags and incorrect nesting, things that you can easily miss when you've been looking at your own markup for hours.
One new, and free, tool I love is the Xray inspector, that works on Internet Explorer 6+, and Webkit and all the Mozilla/Webkit based browsers including Safari and Camino. It's a really fast way to work out what is going on in your layout.
How do you troubleshoot problems when building a MailBuild template?

5 total comments:
Everything you've said (and a whole bunch more) can be done with the free Web Developer Toolbar for Firefox, or the equally free Internet Explorer Developer Toolbar.
Particularly valuable is the ability click on or drill down to any element, and see in an instant where it has inherited some of its values from.
You are right Mark,
I have them both installed too, excellent choices.
I agree, the Web Developer Toolkit is a tremendously valuable part of my development process. I also really like the CSS Viewer and Firebug extensions.
Foxmail best :)
style master Cost: $US59.99
Badly what is it not opensource...