This is a long-belated followup to my thread on Troubleshooting 101 for PHP - [
webmasterworld.com...]
Sometimes you scratch your head and you cannot for the life of you figure out why your HTML is "broken" which can take many forms: things show or don't show, they are the wrong size, float behave differently than you expect and so forth.
In all of these cases, the method is always the same and it is the same as troubleshooting with PHP: boil your problem down to the simplest case where the problem still appears. Then fix it and apply the fix to your real-world case.
Simplify your code The first rule is to not attempt to debug an entire page. Instead, save a copy of the page and start cutting out anything extraneous.
First cut out all content that is irrelevant to the problem and then reload. Oops! Did that fix the problem? Well, I guess that code is not irrelevant and you have some problem further upstream that you're not seeing.
Then cut out all irrelevant Javascript and CSS. Then irrelevant markup.
Tips for dynamic pages If the page is being generated dynamically by a CMS or a e-comm suite or something, the best thing to do is open the page in your browser and use the Save As option. I find that different browsers save different amounts and I have often found that Chrome and Firefox do not save absolutely everything locally. Opera does a better job. So though I do my actual debugging and testing in Firefox and Chrome, I use Opera to save dynamic pages.
Use your tools The reason I use Firefox for debugging, is because I find Firebug and the Inspect Element tool in Firefox to be superior to Opera's Dragonfly. If you don't understand how to use Firebug and Inspect Element, learn how to use them and the strengths and weaknesses of each.
If you have to debug a problem that only shows up on another browser or on mobile, all browsers now have decent tools and you can pair a mobile device with a computer and use the dev tools on your computer while browsing on the phone if you have to.
Asking for help You've got your code. You've got your tools. Now you just need a bit of persistence. If the code doesn't work in the simplest possible case, then your code is simply wrong.
If you are working on your navigation, you should work on just that. Then slowly wrap it in more and more code until you see how it works with the page.
If you have the simplest possible case that illustrates the problem with the least amount of extraneous information, that would be the code you would then present here when asking for help. This will result in faster and higher-quality answers.
