CancelImage Upload

How to force a defined height and width on an empty HTML element

Here is a valuable trick for newbie web developers. On this page you will learn how to keep empty table rows, span and divs from collapsing on every browser.

While most browsers now accept the height definition via CSS, some still balk at the idea of being told what to do, and therefore would rather rebel and either collapse into an undesired height, or vanish entirely. To trick browsers into leaving the gap at a defined height and width we can use an invisible pixel image.

To create such an image open Photoshop, or whatever other photo editing program you happen to use and create a one pixel transparent Gif. By using this Gif (which is usually called p.gif, or pixie.gif within the business) you can now define a fixed height:

<table cellpadding="0" cellspacing="0" border="0">
          <td><img src="images/p.gif" height="10"></td>

In the above example the TD would have a height of 10 Pixels forced upon it. And although there is usually a way available somehow to get by without cheating, the pixie option is a commonly used get out option for when there is little time to hunt around for alternative solutions!

Want to leave a comment?

No problem. Just enter your email and password below.

register | home | reminder

myDesignTool Networking •