Validity - Refactoring HTML: Improving the Design of Existing Web Applications - page 136

Convert img Attributes to CSS

Remove the align , border , hspace , and vspace attributes from img elements. Replace them with CSS rules.

<img src="/images/newicon.png" alt="New!"
width="90" height="54"
hspace="5" vspace="5" border="0" align="left" />

<img src="/images/newicon.png" alt="New!"
width="90" height="54"
style="border: 0; float: left; padding-right: 5px;
padding-left: 5px; padding-top: 5px; padding-bottom: 5px;"
/>

Motivation

XHTML strict moves much of the style for img elements such as align , vspace , hspace , and border into CSS.

Making this change is especially important if you're doing heavy CSS layout. Adding layout attributes such as
these to img elements can interfere with the layout described in the external CSS stylesheet. It's easier to
debug CSS layouts when all the relevant details are in one place, rather than spread out across different files
and locations.

Potential Trade-offs

As usual, moving the presentation into CSS does cause cosmetic problems in older browsers, and in this case
maybe they're not quite as ancient. However, it's still true that all current browsers should work just fine with
strict markup, and older ones won't be shut out. They'll just see a less attractive page.

Mechanics

Validation will find the img elements you need to fix. From that point, though, it's a bit of a slog. Tidy and
TagSoup will not help. Furthermore, many of these attributes have values specific to just one image, so you'll
need to assign an ID to each image and write some rules just for it. Consequently, this is one of the few places
where I suspect it often does make sense to use style attributes and inline CSS rather than an external
stylesheet.

Table 4.5 lists the attributes you'll need to change and the CSS properties you'll replace them with.

Table 4.5. IMG Attributes

IMG Attribute CSS Property

align float

border border

hspace padding-left, padding-right

vspace padding-top, padding-bottom