Color & Positioning Tricks using a 1-Pixel GIF Image



pix1green.gif


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:
pix1blue.gifpix1green.gifpix1red.gif
  • pix1red.gif pix1red.gif (shown 10 x 10 px square)
  • pix1blue.gif pix1blue.gif (shown 10 x 10 px square)
  • pix1green.gif pix1green.gif (shown 10 x 10 px square)
  • pix1trans.gif pix1trans.gif (shown 10 x 10 px square)
  • The large colored squares are 100 x 100px.
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:
[[image:pix1trans.gif width="160" height="20"]]

pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
3 x 3 Text Cells
pix1red.gif
180 x 24 x 2px Border
pix1red.gif
Red (#990000)
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
3 x 3 Text Cells
pix1red.gif
180 x 24 x 2px Border
pix1red.gif
Red (#990000)
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
3 x 3 Text Cells
pix1red.gif
180 x 24 x 2px Border
pix1red.gif
Red (#990000)
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
  • Corners (in corner cells) are Red 2 x 2px pix1red.gif
  • Horizontal borders are Red 180 x 2px pix1red.gif
  • Vertical borders are Red 2 x 24px pix1red.gif



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

pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
Eastern State Birds
US
Genus
Species
Common Name
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
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
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
Eastern State Birds
US
Genus
Species
Common Name
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif
pix1red.gif


pix1green.gif