html annoyances

tips and tricks for html problems

page 1 of 2

page 1
• cells and pictures
• the pre tag
• invisible tables
page 2
• image reloading
• invisible pages

cells and pictures

Formatting a page with pictures is often done with tables. Placing a picture in a cell to hold it's position is extremely common. But there is a vexing problem with tables and pictures that sometimes pops up.

Below I've place a square picture in a two cell table, one cell for the picture and the other for the text. The code is below. I have taken the time to set all of the table attributes to zero as well as all of the picture spacing attributes.

<table align=center border=1 bgcolor=red
	cellpadding=0 cellspacing=0>
<tr><td>
<img src="image1.gif" border=0
	vspace=0 hspace=0
	width=60 height=60>
</td>
     <td>some text over here
</td></tr>
</table>

table and picture

Look where the green arrow is pointing. See the red background showing through the cell under the picture? That is caused by the formatting of the HTML. The closing cell tag for the cell the picture is in is below the IMG tag. The cell contains not only the picture but whitespace. Move the closing cell tag so that it's against the IMG tag like this:

<img src="image1.gif" border=0
	vspace=0 hspace=0
	width=60 height=60></td>

That will allow the table cell border to lay flush up against the picture and remove any extra space in the cell.

the pre tag

The PRE tag's purpose is to leverage the formatting that's present in the HTML source code for some text. Browsers ignore whitespace for the most part and only deal with the formatting information inherent in a tag. They ignore the line feed/carriage return at the end of each line of text. They arraign text based on the nature of the tags the text is bracketed by, not how the text is arraigned on the source page. But, using the PRE tag, text will appear in the browser window as it appears in the HTML source code.

If the PRE tag is placed below a line of text, it will pick up the line feed/carriage return of that line of text. As a result, an extra line will appear in the browser window below the text. To get rid of this line, butt the PRE tag right up against the last line of text. See what I mean below.

<pre>
	some text
	some other text
	some more text</pre>

invisible tables

Have a table that won't display in NN4.7? Chances are that you've left out the closing table tag </table>. Navigator has always been strict about HTML. The various Explorers up to IE5.0 will assume the closing table tag.