Color_Pixel_gif

Color & Positioning Tricks using a 1-Pixel GIF Image


In traditional web jargon, this trick is known as **cleardot.gif** or **spacer.gif**. The green bars above & below this section are constructed from a single green pixel, stretched to 600 x 10 px. To fill a transparent cell 160 x 20 px, one would declare: code code
 * Warning: These techniques are not recommended!** (July 2007) The information is included here only if you need it. When Wikispaces increases their support of tables and CSS, this page should be removed. The tests use 1x1-pixel .gif images, stretched to fill their table cells. The images are named:
 * [[image:pix1red.gif width="10" height="10"]] **pix1red.gif** (shown 10 x 10 px square)
 * [[image:pix1blue.gif width="10" height="10"]] **pix1blue.gif** (shown 10 x 10 px square)
 * [[image:pix1green.gif width="10" height="10"]] **pix1green.gif** (shown 10 x 10 px square)
 * [[image:pix1trans.gif width="10" height="10"]] **pix1trans.gif** (shown 10 x 10 px square)
 * **The large colored squares are 100 x 100px.**


 * [[image:pix1red.gif width="2" height="2"]] || [[image:pix1red.gif width="180" height="2"]] || [[image:pix1red.gif width="2" height="2"]] || [[image:pix1red.gif width="180" height="2"]] || [[image:pix1red.gif width="2" height="2"]] || [[image:pix1red.gif width="180" height="2"]] || [[image:pix1red.gif width="2" height="2"]] ||
 * [[image:pix1red.gif width="2" height="24"]] || **3 x 3 Text Cells** || [[image:pix1red.gif width="2" height="24"]] || **180 x 24 x 2px Border** || [[image:pix1red.gif width="2" height="24"]] || **Red (#990000)** || [[image:pix1red.gif width="2" height="24"]] ||
 * [[image:pix1red.gif width="2" height="2"]] || [[image:pix1red.gif width="180" height="2"]] || [[image:pix1red.gif width="2" height="2"]] || [[image:pix1red.gif width="180" height="2"]] || [[image:pix1red.gif width="2" height="2"]] || [[image:pix1red.gif width="180" height="2"]] || [[image:pix1red.gif width="2" height="2"]] ||
 * [[image:pix1red.gif width="2" height="24"]] || **3 x 3 Text Cells** || [[image:pix1red.gif width="2" height="24"]] || **180 x 24 x 2px Border** || [[image:pix1red.gif width="2" height="24"]] || **Red (#990000)** || [[image:pix1red.gif width="2" height="24"]] ||
 * [[image:pix1red.gif width="2" height="2"]] || [[image:pix1red.gif width="180" height="2"]] || [[image:pix1red.gif width="2" height="2"]] || [[image:pix1red.gif width="180" height="2"]] || [[image:pix1red.gif width="2" height="2"]] || [[image:pix1red.gif width="180" height="2"]] || [[image:pix1red.gif width="2" height="2"]] ||
 * [[image:pix1red.gif width="2" height="24"]] || **3 x 3 Text Cells** || [[image:pix1red.gif width="2" height="24"]] || **180 x 24 x 2px Border** || [[image:pix1red.gif width="2" height="24"]] || **Red (#990000)** || [[image:pix1red.gif width="2" height="24"]] ||
 * [[image:pix1red.gif width="2" height="2"]] || [[image:pix1red.gif width="180" height="2"]] || [[image:pix1red.gif width="2" height="2"]] || [[image:pix1red.gif width="180" height="2"]] || [[image:pix1red.gif width="2" height="2"]] || [[image:pix1red.gif width="180" height="2"]] || [[image:pix1red.gif width="2" height="2"]] ||
 * **Corners (in corner cells) are Red 2 x 2px** [[image:pix1red.gif width="2" height="2"]]
 * **Horizontal borders are Red 180 x 2px** [[image:pix1red.gif width="180" height="2"]]
 * **Vertical borders are Red 2 x 24px** [[image:pix1red.gif width="2" height="24"]]


 * Working example in a real table -- note how the red cells stretch the column widths** (July 2007)


 * [[image:pix1red.gif width="150" height="1"]] || [[image:pix1red.gif width="30" height="1"]] || [[image:pix1red.gif width="90" height="1"]] || [[image:pix1red.gif width="90" height="1"]] || [[image:pix1red.gif width="150" height="1"]] ||
 * **Eastern State Birds** || **US** || **Genus** || **Species** || **Common Name** ||
 * [[image:pix1red.gif width="150" height="1"]] || [[image:pix1red.gif width="30" height="1"]] || [[image:pix1red.gif width="90" height="1"]] || [[image:pix1red.gif width="90" height="1"]] || [[image:pix1red.gif width="150" height="1"]] ||
 * Delaware || DE || Gallus || gallus || Blue Hen Chicken ||
 * Maryland || MD || Icterus || galbula || Baltimore Oriole ||
 * Virginia || VA || Cardinalis || cardinalis || Northern Cardinal ||
 * North Carolina || NC || Cardinalis || cardinalis || Northern Cardinal ||
 * South Carolina || SC || Thryothorus || ludovicianus || Carolina Wren ||
 * Georgia || GA || Toxostoma || rufum || Brown Thrasher ||
 * Florida || FL || Mimus || polyglottos || Northern Mockingbird ||
 * [[image:pix1red.gif width="150" height="1"]] || [[image:pix1red.gif width="30" height="1"]] || [[image:pix1red.gif width="90" height="1"]] || [[image:pix1red.gif width="90" height="1"]] || [[image:pix1red.gif width="150" height="1"]] ||
 * **Eastern State Birds** || **US** || **Genus** || **Species** || **Common Name** ||
 * [[image:pix1red.gif width="150" height="1"]] || [[image:pix1red.gif width="30" height="1"]] || [[image:pix1red.gif width="90" height="1"]] || [[image:pix1red.gif width="90" height="1"]] || [[image:pix1red.gif width="150" height="1"]] ||