Validating XHTML containing borderless images as links
Often when an image is used as a link, we don't want to see a big chunky border around the image, which is there to indicate that it's a link (as well as changing colour to reflect the status - i.e. visited, active and so on). Back in the old HTML days we simply used the img tag's "border" attribute and set it to 0, hiding the border altogether.
Hiding the image border in XHTML and CSS
Because XHTML doesn't support the "border" attribute we can't use that any more, but we can control the border using CSS. If you are looking for a "quick fix", you can simply replace the "border=0" part of the old image tag with the required CSS, like in this example:
<img src="mypicture.png" alt="Picture of me." style="border-style: none;" />
All this does is modify the style for this image so that it has no border. That's great for a single image, but if you want to change it for all your images then you can just modify your CSS to include something along the lines of this:
img {
border-style: none;
}
This means that all images in your site will have no borders, unless of course you add extra styles and so on. Either of these two approaches will validate with no problems, but make sure you dont forget to include the alt and title attributes for the tags!
Back
14.04.2006.
Thankyou for providing this easily understandable and even more easily implemented explanation. I'm just starting out in XHTML and it's simple things like this that seem to be the most difficult to fix.