| MSIE 5 | Netscape 6 | Netscape 4 |
|---|---|---|
 |
 |
 |
| Home Web | Top Bottom | Contents Prev Next |
The border Property
Eliminating Borders From Link Images
Adding Fancy Borders
The border property replaces the border attribute. It provides a lot more control over borders. It's unfortunate that browser support is so poor.
As we've seen, the border attribute of <img> is used primarily to eliminate the ugly border around images that are used as links. The following rule should accomplish the same thing.
a img { border: 0px; }
The selector a img indicates that this rule applies only to <img> tags that are inside an <a> tag.
Unfortunately, Netscape 4 doesn't eliminate the image's border when you use this rule. As a work-around, you can add a color property and set the color the same color as the background. This works perfectly if you're using a solid background color. If you're using a background image, set the color to blend as much as possible with the background.
Here's an example. Things to try in MSIE:
Things to try in Netscape 4:
You can also use the border property to create fancy borders around images. Once again, though, Netscape 4 falls down on the job.
I'll describe the border property more thoroughly later on. For now, I'll just give a quick example.
Here's how this example displays in several different browsers:
| MSIE 5 | Netscape 6 | Netscape 4 |
|---|---|---|
|
|
|
MSIE and Netscape 6 both produce reasonable, though not identical, borders. Netscape 4 failed miserably. While it did produce a border, it's the wrong size and it's not around the image. The border will appear somewhere on the page, but not necessarily even near the image!
I haven't found a workaround to make a nice border in all browsers.
| Home Web | Top Bottom | Contents Prev Next |