Elliot Swan

Debugging CSS 1:57 pm

Oftentimes one of the biggest excuses I hear from people as to why they don’t use CSS for all their presentation is that they have a really hard time getting it to work the way they want cross-browser. It’s a valid complaint–Thanks to Microsoft, it can be difficult to get your CSS to simultaneously work in multiple browsers.

I remember when I was doing the SitePoint Mayhem Contest how amazed I was at the easiness of CSS when you only have to worry about one browser. It was like some sort of dream…But then at the same time, if it was always that easy many of us would be out of a job.

Cross-browser CSS can take a lot of trial and error, but here’s a general process to follow when “debugging”:

Make sure you don’t have an error in your code

This is where the validators can come in handy. Sometimes the problem isn’t even in your CSS, but that you simply forgot a closing tag or placed an element incorrectly. Sometimes it can be something as simple as a typo in your CSS.

Look to see what’s really causing the problem

Oftentimes the problem is not what you’d think it is–It might really be a neighboring element, a wrapper, or some forgotten margin or padding that’s causing the ill effect.

Use borders so that you can actually see where elements are beginning and stopping (Be aware that by using borders you are effectively making the element 2px wider and 2px taller, so if your layout seems to change when you turn borders on this is why). I find that most problems with floats are coming from sizing issues (widths, margins, and padding), so make sure you know your box model.

In many cases it also helps to comment out all the styles for an element until things work (it might not look good, but so it at least works) and start adding properties back in, one by one, until your problem comes back. This will let you know exactly which property is causing the problem.

Remember your filters and conditionals

Also known as hacks, these can be very, very helpful. Using child selectors and the star html bug, we can effectively give modern browsers one set of styles, and IE6- another:

html>body div#our_element {
/* for modern browsers */
      border: 1px solid red;
}

* html {
/* for dumb browsers (i.e., IE) */
      border: 1px solid pink;
}

Note that IE 7 supports child selectors, and has fixed the star html bug. As such, it would be displaying a red border with the above code. IE 7 is currently still in beta and as such not as much of a worry right now, but when it is more widely used we will have to be careful that we only use these filters on properties that IE 7 will render the same way as browsers like FireFox, Opera, and Safari. Another option we have is IE conditionals, which is what Microsoft is urging people to use.

If all else fails

If you’ve done all this and still can’t figure it out (perhaps you haven’t even been able to find out what’s causing the problem), google it. Just run a search on a short description of your problem (something like “div not showing in IE”) and read through the results. I’ve found the solutions to many coding problems this way, as chances are somebody else has had the same problem you are. If you still can’t find anything, then just ask. There’s plenty of good forums out there, probably more than we really need. Many times, as you are writing out a description of a problem the answer will suddenly hit you, coming from an angle you’ve never considered before. Or a question will come to mind, something you’ve never thought of. Explore it before posting the question, often times writing out your problem will let you see it from a different angle and you will be able to figure out the answer.

Now note that I saved asking as a last resort of sorts. I believe that if you really want to know any programming language, you need to learn it. Constantly asking other people to solve your problems for you will only cause you to be dependent on those who really do know the language. If you really try to solve your problems, it will force you to come to really know the language, the way it works, the way it doesn’t, and how to debug it more effectively.