Tips for Troubleshooting HTML/CSS

“The HTML is broken. The CSS put the navigation over there. The images won’t show up.”

As an instructor of basic web design, I have heard a lot of these comments. While helping students I have a series of steps to follow to make HTML/CSS exact.

Validate and Eliminate Code Errors

Validate the HTML. W3 Schools has a handy tool available to check HTML. It is not perfect but will get you on track to perfect HTML. The validator will find missing and extra tags and check for proper nesting of tags. The errors will snowball, so you may need to fix one, revalidate, and fix another. http://validator.w3.org/

Validate the CSS. W3 Schools also provides a CSS validator. Typos and missing semi-colons can cause a page to display wrong. The CSS validator looks at each line and gives the exact place where an error is detected. http://jigsaw.w3.org/css-validator/

Indent Your Code

For beginners HTML can appear confusing with brackets and slashes. The most important thing to remember is all open tags need to be closed. It is good practice when you open a tag to indent the line of code. When you close the tag, out-dent. This will aid in seeing missing tags. It also allows others to more easily view the code and assist with troubleshooting.

An Image is Not Displaying

Verify the image URL is correct (and spelling). Most modern browsers include right click options within the browser window. A quick way to verify the image path is to right click and select “Open Image in a New Tab”. The image path will display in the browser address bar. Compare this with where the image exists on the server. Also make sure the image is uploaded to the server.

A Link Doesn’t Work

Verify the link location and that the file exist. Using the right click options within the browser, select “Inspect Element”. Compare the HTML with the URL you want to reach. Spelling and capitol letters can make a difference.

The Layout Is Not Correct and The Page Validates

Now is the time to get critical. CSS and nesting elements can cause a trickle down effect you may not catch right away. Begin with a specific section of code and confirm the display. Add another section and test again. Try to extract the area that is not displaying as expected. When asking questions and getting help from others for specific (vs. general) details will show your efforts and improve communication; with a greater chance of correcting the issue.

A Few More Notes:

  • Use meaningful markup – H1 does not belong in a paragraph tag.
  • Float the parent to avoid collapsing elements.
  • Clear floats.
  • All HTML elements have browser specific default settings. You may need to set margins and padding to 0 and then customize with the CSS.
  • Check your page in multiple browsers

Being able to troubleshoot code is almost more valuable than the ability to write line by line. As with anything, the more you practice, the better your skills become, errors are less and ideas are greater.