HTML and CSS Reference
In-Depth Information
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;"
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.
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
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
padding-left, padding-right
padding-top, padding-bottom
Search WWH ::

Custom Search