My HTML tips and tricks

Extra spaces inside tables, usually at the bottom of the td (table cell) and hanging bottoms after forms.

This is assuming you don’t have problems with the cellpadding and cellspacing not being set explicitly to 0. You can have tables with cellpadding and cellspacing and still not have that annoying space below your content at the bottom of the table! Read on…

In the old days, the extra space at the bottom of a table was due to having the </td> on the next line after the content inside the table. To make the code readable, most people and web page creation programs will put the closing table data tag on it’s  own line. This creates the problem. The workaround is to close the table data on the same line and don’t leave extra content like a space before the </td> tag.

If you still have the problem: HTML rendering engines in the browsers add spaces before and after block level elements including forms. They almost always suppress the space before the form and only show the space after. If you are using style sheets (refer to my css tricks), you can easily defeat this by specifying a margin of 0.

If you still have the problem and are using pure HTML without css:
You can add just a bit of css to fix your entire page, not your entire website, that would require declaring an external stylesheet on every page. Put this inside your head tag:
h1, h2, h3, h4, h5{margin:0px}

Just substitute whatever block level element is giving you problems with the extra space below.

Image not showing or broken image icon:

1) “View Image” in your browser and look at the file path in the URL bar, that will tell you where the webpage code is saying the image is supposed to be. Put the image up at that path or edit the webpage code to reflect the actual location.

2) Make sure you don’t have a meta tag <base href=”” />  which is telling the webpage to locate image files that are relative linked to look in a certain location with a base path and then add the filename to that. If you do have the meta base href tag, you can change your webpage code to look in an “images/myimage.jpg” folder.

Leave a comment