Relative Positioning

This time we will use relative position for our smileys. Such items should flow down the page as it is resized or have new material added above. We'll set TOP to 0 for all. We'll leave the LEFT settings the same as in our absolute examples.
Smileys that are successfully positioned fall in a diagonal line starting 150 pixels from the left. Smileys on the left edge or off the diagonal are not successfully positioned.

Position set within IMG tag

Sad smiley

Winky smiley

Smiley with open mouth

Smiley with glasses Smiley with open eyes
Smiley with tongue sticking out

Smiley face- position set within the IMG tag using STYLE

Sad smiley - position set with CLASS in the P tag

Winky smiley position set with CLASS in the DIV tag

Open Mouth smiley position set inline in H2 tag

Glasses smiley position set within the LAYER tag.

Open Eyed smiley position set with CLASS in LAYER tag

Tongue Out smiley position set with CLASS in BLOCKQUOTE tag.

This is much different from using absolute

Under IE4 and later versions, only the two LAYER cases fail this time!

Under NC4 the IMG fails. You just can't position an image unless it's in a DIV or LAYER.

Under NC4, trying to set relative within the LAYER fails. BLOCKQUOTE is correctly indented but hasn't dropped down a line.

With Netscape 6, the diagonal shows up pretty well except for the glasses smiley again.

[CAUTION: NC4 may crash when resizing this site! It is a known problem that has never gotten fixed by Netscape.]
Try narrowing the window until the Tongue Out smiley is cut off. Whoops! No horizontal scrollbar appeared! We won't know that content was off screen!

The final choice is static positioning.

© 1997-2002 Jan Smith   <jegs1@jegsworks.com>