If you are fairly new to CSS (and sometimes even when you are experienced) you are going to be faced with a page which just doesn’t look the way that you expected. Or perhaps it looks fine in one browser but not in another. Certain things are handled differently by the various browsers, but don’t be in too much of a hurry to assume that is what is going on: there really are not too many areas which require “hacks”. As in building a page, a methodical approach is what you need for problem solving whenever the answer isn’t immediately obvious.
- Validate your HTML and your CSS. These validation services may spot your problem(s) for you, but in any case, attempting to solve visible problems will be much harder if hidden problems exist.
- You may not see the results of changes (because of cacheing), so while troubleshooting, revert to placing your CSS in the <head> section of your page. Just be sure to remember to creare an external style sheet again once your problems are resolved.
- Always troubleshoot (and test while building) with an advanced/compliant browser such as FireFox. It is far easier to hack, if necessary, to make CSS work for Explorer than to fix your broken code for a broken browser and then almost certainly have problems as soon as you do test in other browsers.
- Give all your main structural elements (different) colored backgrounds, to help you spot gaps, overlaps, and just plain wrong positioning. If you still have problems, give apply colored backgrounds to all the elements in the problem area(s) and look for stray padding or margins.
- Make sure you aren’t including images or unbroken text which is wider than the block within which it/they appear/s.
- Don’t assume the problem is related to the code in the area where the problem seems to be on-screen. Comment out half your style-sheet at a time (/* at the beginning, */ at the end) to isolate which half is causing the problem. Then within the problem half, comment out sections of the styling until you isolate which is/are the culprits.
- If a troublesome element includes something like margins or padding, apply some really big values, to be sure they are being picked up at all.
- Browsers can do strange things with measurements, so try reducing your widths. Instead of columns totalling 100% of the available width, reduce one or more so they total only 99% or even 98%.
- Identify a block around the troubled area which itself appears to be behaving and comment out (in your HTML) all the child elements within it. Then uncomment them one at a time until the problem reappears.
- Add margin: 0; to all the elements in the troubled area. If that fixes the problem and you want to clean up your code, remove the new settings one at a time, watching for the error to return. That/those you do not want to remove!
Avoid trouble!
I know we think, read and write linearly, but if you want to avoid unnecessary troubleshooting headaches, don’t code your pages that way.
- Begin by coding the broad structure of your page (using colored backgrounds). Test. Then add the detailed but still only structural elements. If you need some text to identify or stretch an element, add just a few lines that emulate the real content: do not fill your page with content at this point, because it just obscures the details you need to see during debugging.
- As noted above, always test first in a standards-aware browser and when everything is okay, then add any hacks needed to accomodate Explorer. But if you can code in a way which minimises the need for hacks, so much the better.
- Be careful when pasting a block of code from one file to another. Saving snippets of code which you use frequently can be a great timesaver, but if they can be acted upon by something else on the page, they can be a source of problems.
- Some hacks use javascript. Check what your page will look like to visitors who do not have javascript enabled.
- Floats can be a thorough pain in the *ss. If your floats are showing up in the wrong place, margins haywire or the content within is doing strange things, the answer might be here.
- Margins, in particular bottom margins, simply vanish. If you cannot apply a border (which resolves this problem) padding might be a better option.
- BUT unless you are willing to do some math and apply hacks, avoid borders and padding with fixed-width elements, because Explorer really screws up the way that combination is handled. There are workarounds. It is almost always better to add padding to parent elements than to child elements.
- Never include code you don’t really need.
- Set element margins to 0 (unless specific values are needed) to allow for browser differences.
- Zero values and line-heights do not need units of measurement, otherwise all none-zero values must be qualified by %, em, px, or pt.
- Browsers are case-sensitive, so if you refer to a class as leftcol in HTML it must not be leftCol in CSS.
- If you are using floats and want to avoid your content sometimes disappearing entirely or formatting unpredictably in Explorer, you should read up on The Peekaboo and Escaping Floats bugs.
- Be aware there are (mainly Explorer-specific) extensions which don’t work at all in other browsers (validation normally points these up).
- TEST every step of the way: it is far easier than trying to isolate problems in a complete page.
Why Validate?
Checking your HTML and CSS is a lot like spell-checking a letter or email. The difference is that as long as your pages look okay, you may be the only person who knows whether your code is valid or not. You are certainly likely to be the only person who cares.
You could argue that writing invalid code is like a mechanic not tightening a nut to the correct torque. Either you do a fully professional job or you do not. There are occasions when it is necessary to deliberately write invalid code – for example to workaround browser incompatibilities – but that is not the same as simply making mistakes. From the purely practical point of view, although many mistakes will stay harmless, some have the potential, when combined with something you may add to your page later, to break the page. It also seems illogical to complain about lack of common standards and then ignore the standards which exist.