Does everything appear fine in the code, but not in the page design? Relax. Web design beginners and gurus alike have all been through this. This troubleshooting guide will save frustration and help determine the cause of your Web design crisis.
The first step in development is to build your page or site in a stable, Web standards-based browser. Right now, the best browser going is Firefox (http://www.mozilla.com). It's free and cross-platform, which means you should be able to download the browser if you haven't already got it.
After your Web site looks good there, move onto other browsers like Internet Explorer for Windows and Safari for Mac to see if more work needs to be done to shore up the design.
If you need further help troubleshooting your Web Design, keep reading!
Validation
When you run into a problem, the first thing that must be done is to ensure that your HTML and CSS syntax are correct. Even if you use a product such as Dreamweaver that can hide the markup and code while you design, the syntax the software generates in the background still must be checked.
If your Web development software does not come with its own validators (check your software's documentation for details), be sure to set the preferences so the Web development software excludes proprietary elements, like center, so that the validator is checking the standard DTD. Use the following Web sites:
Checking HTML
For HTML validation, see http://validator.w3.org/.
Once at this site, enter into the form the URL of the page that is causing your trouble, and choose the correct Doctype. If you use the URL, make sure the Web address is actually visible on the Web, meaning that the file is not behind a firewall or a password-protected zone, such as an intranet. If your HTML file falls into one of those categories, use the upload feature provided by the validator page.
Checking CSS
For CSS validation, see http://jigsaw.w3.org/css-validator/.
Like the HTML validator, validation can be conducted through the submission of a URL or uploading a style sheet file. (Be sure not to submit a file that includes both CSS and HTML because that will confuse the validator and create grounds for automatic failure of validation.)
Another option to test CSS syntax is to copy and paste the code in the direct input form located at the bottom of the jigsaw.w3.org page. This option might be best suited for your needs and might be a bit faster, too, if your CSS is not accessible on the Web, or if your file is actually an HTML file with some CSS code.
At this stage, your syntax may be accurate, but that doesn't always mean much. The next move is a direct manipulation of the CSS itself. Use one or a combination of the following techniques to help isolate your CSS problems.
Zeroing Out the Padding and Margins
The default style sheet used by browsers sometimes places default values for margins and paddings on block-level elements. To ensure that those default values are not interfering with your design, set the margin and padding for the block-level elements to zero.
A fast way to zero out the padding and margins is to use the universal selector like so:
* {
margin: 0;
padding: 0;
}
Then, place that CSS rule at the start of the style sheet. By placing the CSS rule at the start of the CSS, other CSS rules that have values for padding, margin, or both in the style sheet can override the effects of zeroing out the padding or margins.
Look for any changes in your page design and make any required adjustments.
Applying Color to Borders and Backgrounds
The purpose of this method is to highlight the CSS rules you are working on and see if it is indeed the design elements of the Web page that are causing the problems. Once you have identified the right problematic element, you can move on to the next steps in fixing the problem.
Apply a color to the block-level element (or elements) in your CSS that is causing you grief. An example of this CSS rule might look something like this:
#content #navigation {
border: 1px solid red;
}
This CSS rule creates a red border around the specified block-level element to better see it in the page design. If you already have too much red in the design to notice a red outline, try blue, or green, or simply change the background color instead, as shown here:
#content #navigation {
background-color green;
}
Placing Variations in Property Values
After finding the CSS that is causing problems, the next step is to adjust the values of the properties. Is the problem that the padding is too much in one browser? Or, maybe the font size is too small in another browser?
When placing different values than the ones you are using, start with cartoonish, large amounts. For example, change 25 px for padding to 2500px to see if the design breaks as you know it should.
Then the next moves should be small. Use tiny increments, for example, in adjusting font sizes from 0.8 em to .81 em.
Playing Hide and Seek
The way in which we write CSS rules can also cause problems. CSS is set up to allow certain properties and their values to become inherited by their children. For example, if you set the font properties for the body element, then child elements within that body will take up those characteristics as well.
While CSS has built-in conflict resolution with the cascade, inheritance, and specificity, CSS rules can still have unintended results in the design. If there's a problem with your design, you might have to check the CSS rules you have written. There's a possibility that the CSS rules are conflicting or are inheriting values you don't want.
If you believe this is the case, simply comment out (rather than delete) unnecessary property and value pairs from problematic CSS rules and refresh the page design to look for changes.
Validating Again
At this stage, the CSS might have been rewritten, revised, or completely mangled during the troubleshooting process. Double-check the validation again; just to be sure nothing was missed.
Looking Outside for Help
At this stage, if you haven't found the cause of the CSS problem, it's time to seek help. Use the following resources to investigate the problem or ask for help.
positioniseverything.net
Maybe the problem isn't the CSS, but instead it is the browser. For a list and explanation of modern browser bugs, check out www.positioniseverything.net.
Web Developer Toolbar
If you use the Firefox browser for development, run (don't walk) to Chris Pederick's browser extension called Web Developer at www.chrispederick.com/work/firefox/webdeveloper.
Offering numerous features that benefit the Web designer and CSS wrangler, this an indispensable tool when troubleshooting CSS. Some of the tips mentioned in this troubleshooting guide can be implemented with the click of the button on the Web Developer's toolbar, rather than editing code by hand.
