Tips for Trouble Shooting

As you edit your source code and check what the browser shows, you will often get unexpected results. With experience you will learn to make good guesses as to what went wrong.

Problems you might have with browser display:

• Part of page disappears.
• Formatting applies to the wrong parts or to too much.
• Styles not applied or only part of the style applied.
• Browser does not show your changes.

Reasons for Problem:

• Forgot to refresh the browser after a change.
• Forgot to save the changed page or style sheet.
• Forgot to add the style, Class, or ID to the style sheet or never used it on the page.
• Forgot to link an external style sheet to the page or URL is incorrect.
• Viewing wrong file.
  • Check the file name and location carefully.
  • Browser is showing an older copy still in cache.
    Clear the cache of images and files and refresh.
• Browser does not support the CSS feature that you used.
• Inline style for the element overwrites formatting from an internal or external style sheet.
• Naming errors:
  • Class or ID name in style sheet is different from name used in element.
  • Class or ID name included a space.
  • ID name started with a number.
  • Omitted # from name of ID style, like #budget
• Punctuation errors:
  • Omitted or duplicated closing symbol, like > } "
  • Omitted punctuation like semicolon or comma.
  • Property value included a space between a number and unit of measure,
    like 5 px instead of 5px.
  • Omitted hash symbol, #, from a color number, like #003366
• Omitted or duplicated a closing tag, like </div>, </span>, or </li>.
  
• Used copy-and-paste from a browser window or a Word document to the style sheet. Hidden formatting code was pasted also and broke the code for the web page. (I ran into this error three times while working on these lessons. It is very hard to diagnose when you cannot see the offending code!) If in doubt, type it all in fresh, preferably in a new document!