You’re viewing an archive of outdated material. Visit The Web Standards Project’s updated site to learn about our current mission.

Problems setting border on Images

The border property causes the border to be drawn under images. This page contains the following stylesheet:

     BODY { background: #CCCCCC; color: black; }
     IMG { border: solid lime 10px; }

Here is an image:

Of course, it would help if you used Opera with images enabled, otherwise there is no point in us trying to show problems in Opera, is there?!

You can see the fact that the border is inside the image quite clearly when the picture is not displayed - for example, if it cannot find the file:

Note the two borders around this text. One is put there by Opera because it cannot find the file, the other is caused by CSS. The CSS border appears *inside* the 'no image' border. It should appear outside it.

(There is actually another issue here. Technically speaking, the alt text of an IMG element should be rendered in the flow of text. It is a replacement for the image, not merely a textual description that should be rendered where the image would be.)