Sometimes things just don't work the way you expected!

Whether you are using HTML editing software or writing the code by hand mistakes can be made. Sometimes the code does not do just what you expected it to. Here are some typical problems and their possible causes.


Tables

Q Why is there is a large gap below last line of text in a table cell?

image demonstrating large gap below last line of text in a table cell

A When the height of the cell has not been deliberately specified the reason for the gap is there is a </p> tag at the end of the paragraph, but there is no <p> tag at the start of the paragraph. Netscape Navigator does not suffer from this problem.


Q Why is there is a larger space above the last line of text in a paragraph placed in a table cell?

image demonstrating larger space above the last line of text in a table cell

A The reason for this is either; there is a space in the code between the </p> and the </td> tags, or there is no </p> tag at the end of the paragraph.


Q Why does an empty cell appear to have a transparent background or transparent internal borders, even when you have specified the bgcolor or border attribute?

image demonstrating an empty cell that appears to have a transparent background image demonstrating missing internal borders as displayed on some types of web browser

A This happens due to the way the browsers interpret tables, to make sure an empty cell has a coloured background or to make the border visible, type a space in the cell. In the HTML code type &nbsp; for the "space", like this:

<td>&nbsp;</td>


Q When one row of a table has different column widths, even when the colspan properties are correctly specified, why do the column widths appear wrong?

These examples have borders so that you can see the cell layout.
image demonstrating table with mis-aligned columns image demonstrating table with properly aligned columns

The cells in the middle row look almost the same width as the other rows.

A This happens because the 130 width cell is not actually spanning two columns, just overlapping a column does not count as spanning. This can be cured by inserting an extra row, shown as grey in the example. It need only be one pixel high so it will not make any noticeable difference to the layout. Make the row widths compliment the "odd" row. In the example the 130 pixel width cell displays properly if a row with complimentary 100 and 30 pixel width cells are created. However if your table has borders this extra row will be seen, so try splitting up the layout in to separate tables.


Broken Tags

Q Why do some of my HTML tags appear on the web page? If I am using CSS the styles do not always work.

A This happens when there is a space in an HTML tag.

In this example there is a space after the opening bracket of the <h1> tag. In this example there is a space after the opening bracket of the </h1> tag.
image demonstrating broken <h1> tag image demonstrating broken </h1> tag

Q Why does my page have a lot of underlined text when I haven't used the underline tag?

image demonstrating missing end tag for a hyperlink

A This is usually because you have missed the </a> tag from the end of a hyperlink. Not only will everything be underlined, but all the text will be part of the hyperlink too. The underline will stop at the next </a> tag.


Q Why does my page have a lot of bold text when I haven't used the bold tag?

image demonstrating missing end tag for a heading

A This is usually because you have missed the end tag from a <h1> - <h6> heading when formatting using Cascading Style Sheets. If the heading tag is styled with {font-weight: bold} and you miss the end tag, even though there next paragraph might be the correct font, size and colour, unless it has a font-weight specified it will probably be bold too.


Forms

Q Why are some form fields longer in Netscape Navigator than when viewed in Internet Explorer?

Viewed in Internet Explorer. Viewed in Netscape Navigator.
image demonstrating form fields viewed in Internet Explorer image demonstrating form fields viewed in Netscape Navigator

A If you specify the the same value for the size attribute of a text input field and for a textarea, Internet Explorer seems to include the space for the internal scroll bars of the textarea within your size value, but Netscape seems to add space for the scroll bars to the textarea in addition to your size value. In both examples the text input fields and the textarea fields have their size attribute set at "20". Both textareas have their rows attribute set at "3".

Netscape also seems to add an extra row to the textarea. It is best to slightly undersize your text input field and textarea size values so you are sure they will fit in the space you have allowed for them.


Uploading Files

Q Why does a page appear to take a long time to load, and then appears all at once?

A This often happens when the page content is placed in a large table. The browser has to read all of the code to construct the table before displaying it. Break the table up into smaller tables, then as each one loads its contents are displayed.


Q Why does a relatively small page seem to take a long time to load?

A1 If you use the absolute positioning feature in some HTML editors (often invoked when you drag and drop objects) the editor software creates masses of extra code to calculate the exact positions of the objects on the page. It either creates complicated positioning code or a complex table to precisely position items. To resolve this create your own simple table, it is probable that exact positioning is not really necessary, and an entirely acceptable result can be achieved.

A2 You may have lots of images on your page, or your image files may be very large. You may need to re-save JPEGs at a higher compression rate to make the files smaller or reduce the number of images.


Q When I upload my files why do I receive an error message from the host server about invalid file names?

A The host server has detected one or more characters in a file name that the server does not allow. Only use numeric and alphabetic characters and the underscore _ and hyphen - characters.