An intractable error hiding in code has driven more than one developer to the brink.
Here are some time-tested tips to help you take control.
- Copy the page under another filename and work on the copy. This way you can get back to where you started if you need to.
- Validate your XHTML, checking for unclosed or improperly nested tags
- Validate the CSS
- Three out of four times my problem is solved throught the validating process. Seriously, it's that important.
- Remove all the code between the <body></body> tags
- Remove all the CSS; external, and embedded (the inline CSS code was removed with the body code).
- Restore the main layout elements with their CSS code pertaining to layuout (position, alignment, floats, margins, padding.). Test that page as you add each element.
- Add different colored borders to your main divs to make sure they're what you you intended {border: 1px dashed red;}
- Add padding and margin rules back in one by one
- Insert some dummy content (see www.lipsum.com)
- Add the rest of your content and CSS code back gradually
While you're doing this, forget your mouse. Alt-Tab to switch between editor and browser, Ctrl-S to Save and F5 to refresh your browser will make this process infinitely faster. You need to constantly flip back to the browser and refresh to identify where results change. Don't waste time and break concentration by taking your hands off the keyboard.
Two Firefox plugins will help you immensely when debugging code;
- CSSViewer – provides an on-demand pop-up view of the CSS properties of whatever you're hovering over
- Web Developer – Explore all the options of this plug-in. It has a lot to offer.