Images With Style

Topics on This Page

vertical-align
float, padding and clear

Several of the attributes of the <img> tag are deprecated and cannot be used in strict HTML. CSS provides alternatives for the deprecated attributes. Unfortunately, browser support varies widely for the CSS alternatives. The problem isn't so much that some browsers haven't implemented all of the alternatives: if they simply ignored the ones they didn't handle properly, this would be easy to live with. The problem is that the earlier CSS-enabled browsers (MSIE 3 and Netscape 4) have major problems with the way they support some of the CSS properties.

vertical-align

The vertical-align property is pretty well supported by all CSS-enabled browsers, and takes the place of the align attribute (except for align="left" and align="right", which are covered by the float property).

vertical-align provides several additional values beyond the ones provided by align.

The following values are supported by pretty much all CSS-enabled browsers, although there might be minor differences in how they work:

• baseline — Default, aligns bottom of image with baseline of parent.

• bottom — Aligns bottom of image with the lowest element on the line.

• top — Aligns top of image with the highest element on the line.

• middle — Aligns vertical midpoint of image with baseline plus half the x-height (the height of the letter "x") of the parent.

• text-top — Aligns tops of image and parent's font.

• text-bottom — Aligns bottoms of image and parent's font.

The following values are only supported by Netscape 6 (and possibly the Mac version of MSIE 5):

• sub — Subscript.

• super — Superscript.

• nn% — Raises the element's baseline the specified amount above the parent's baseline. Negative values are permitted.

Here's an example. Try different values for vertical-align to see what the different values do. Remember that you can change the width and height of the image. Verify that this code validates as strict (the doctype here is already strict).

float, padding and clear

The float property takes the place of align="left" and align="right". The allowable values are left, right and none.

The padding property takes the place of hspace and vspace. You can specify padding in several different units, but you'll probably want to use pixel units most often with images. Here are some examples:

padding: 5px;              5 pixels on all sides of image

padding: 5px 10px;         5 pixels on top and bottom,
                          10 pixels on right and left

padding: 5px 6px 7px 8px;  5 pixels on top,
                           6 pixels on right,
                           7 pixels on bottom,
                           8 pixels on left

The clear property takes the place of the clear attribute of <br>. You can use it with any tag, not just in <br>.

Netscape 4 tends to be pretty flaky with CSS-specified floating elements. You'll want to be careful to test your pages in Netscape 4 when you use them.

Here is an example that shows how these properties can be used. Try validating the code (the doctype is strict).

Netscape 4 tends to mess up a little bit. Here's a screen shot of the left side of this page in Netscape 4 and Netscape 6. Notice the different placement of the text. This misalignment isn't too bad, but sometimes Netscape 4 can actually place the image right over the top of the text (on occasion, this can happen with align="left" and align="right" as well, but it happens much more often with CSS).

Netscape 4	Netscape 6