Common HTML Problems

Problems when writing HTML

header spacer 2

Common problems found in HTML

Problem 4 - White space or the use of spaces

Another issue that frustrates people is "white space".  Using multiple spaces between words and paragraphs will always be reduced to one space by all browsers.  So, if you hit the space bar multiple times to form a larger separation between words or paragraphs, you will be wasting your time.  Instead, include the character code " " for each space that you need for the separation between words or paragraphs.  You will find that the " " character is not as wide as the space created by the space bar and that you will need to add more of the characters to get the separation that you desire when using multiple spaces.  One other thing on this issue is that we normally hit the space bar twice after each sentence before beginning a new sentence.  Browsers ignore the second space and the page view will only see one space between sentences.  To correct this problem, use the " " character with one space bar space and you will see the normal two spaces when viewing the sentences on the page as in these paragraphs.  The browser companies don't intend to change this issue in the near future since it can also be resolved with the "margin" and "padding" elements in your code.


Problem 5 - Using "border" in your tables

I also discussed this in the Tables Tutorial.  The "border" attribute in the "table" element has been depricated (no longer acceptable) for HTML or XHTML, although browsers still recognize it for now.  You can create a border with the "style" attribute in tables, in an internal "style" declaration in the header, or you can create a border style in your external CSS file.  For example, if your table contains the following repetitious code:

Instead of:
<table border="5" cellpadding="2" background="../gifs/bg17.jpg" width="73%" cellspacing="2" align="center" bordercolordark="#990000" bordercolorlight="#990000">

You can create the same attribute values in an internal CSS style sheet as:
<style type="text/css">
table {
border: #990000 thick solid;
width: 73%;
}
</style>


Or you can place these same values in an external CSS file and call it with the "class" element in the page header: table {
   border: #990000 thick solid;
   width: 73%;
}


Another way to define your borders in a table when you have a table that is not repetitious of the other tables and you want specific borders to make it stand out.  You can use a "style" attribute in your "table" element for greater flexibility:

<table width="73%" cellpadding="2" cellspacing="2" align="center" background="../gifs/bg17.jpg" style="border-bottom:thick solid #900; border-top:thick dotted #900;> border-right:thin dashed #900; border-left:thin groove #900;">

There are many variables for the border values that can change the look of your table in the "style" attribute or style sheet.  I resolve this issue with a CSS file called "tbl.css" for easy editing which is called into the page content.  The following is my solution in the "tbl.css" file:

table {
    border: thick solid #990000;
}

td {
    border: thin solid #990000;
}


Previous Page Next Page