Yesterday I broke one of my rules when it comes to template development - I started to cross browser test before I validated.

I had my design looking perfect in Safari and Firefox and, without thinking, thought I would see what it looked like in Internet Explorer. As most of you have probably experienced waiting for the page to load in Internet Explorer 6 or 7 on a design for the first time can be a somewhat nerve wracking experience.

To my surprise the design actually looked quite good in IE7 and amazingly IE6 didn't look too shabby either. That is until I noticed a curious error with some padding on one of the layout items.

An odd behaviour in Internet Explorer 7 and Internet Explorer 6 - say it isn't so. Well, it turns out that the bug made sense in not only an IE kind of way but it made sense technically from a css perspective.

The bug, or at least where I made my mistake

Basically I had an error in the css that meant that I had specified the padding on a particular selector and had unknowingly repeated the same rule but had not completed it.

The css looked like this:

#mainContent.twoR {border-right: 1px solid #F0EFED;padding-right: 4%;width: 95%;padding-right:}

The result was that all "good" browsers recognised the last rule was incomplete and displayed the correct padding (ie the first rule).

While IE6 and IE7 saw the second rule, even though it was incomplete and displayed zero padding.

Cascading Hierarchies - that's how css works

This behaviour certainly makes sense in terms of the way that css works - the cascading hierarchy means that css rules take precedence the further down the page you go. However because the good browsers are intelligent and almost telepathic - and what I mean here is that, yes, they can read your mind - it is possible for the erstwhile designer to be lulled into a false sense of security and believe that their code is perfect.

Internet Explorer, if it does anything in a positive manner, certainly tests that assumption.

The bug puzzled me for a moment because when I first checked the rule I didn't see the broken duplicate, but then, I quickly remembered that I hadn't yet validated the code. A quick press of the css edit validator button showed me the error.

Validate or be gone

I think this really highlights the importance of validating your design before you start to cross browser test. Time spent trouble shooting little issues like this can soon add up, and before you know it you have spent hours cross browser testing "bugs" that would have been solved by quickly validating your code.

I use the validator a lot when troubleshooting layout issues that users post on our forum, especially if the strange behaviour only appears in a browser of the explorer kind, but I think the validator should represent one of your must have tools in your coding template kit.

Tools to validate your site

The web developer tool bar for firefox has a link to the validator built in to it. Just navigate to tools > validate css or validate html and it will validate the current page for you.

Otherwise the w3c validator itself can be reached by visiting the w3c site itself and entering your address, uploading a file or directly inputting the code to be tested.

I tend to also use the validate button in cssedit quite a bit as it's pretty quick and the inspector allows you to navigate through to the offending code instantly and fix the error in the file then and there.

What tools do you use?

I've written elsewhere that I tend to get stuck in my workflow and use the same tools to develop sites with, so I would love to know ...

How do you validate your code? Which tools and which apps do you use to do this? What are your rules for designing and coding a template?