I created a few buttons in Photoshop, put it into the .gif format, and placed it on my website-to-be.

They are ROUND, originally designed on a square, with the corners lopped off in Photoshop (put on transparency) and using the transparency in the .gif file, too.

Safari shows everything well.

Firefox 3 (color management enabled) shows bright blue rectangles around the original square of the file.

Looks horrible.

It's obviosly Firefox' way to describe a link.

How can I turn this off?

Thanks!

Firefox automatically puts a 'link' look around all images. If you want to avoid this you can:

<img src="whatever.ext" border="0" />

Or if you want to be correct:

img {
border: 0;
}

- Steve

Thanks!

I actually used #id in CSS as I have images with borders on my website (which I needed), so I created the rule for the buttons only (which are images, too).

#button_pricing  {

border:				0;
}

Worked like a charm.

Originally Posted by World

Thanks!

I actually used #id in CSS as I have images with borders on my website (which I needed), so I created the rule for the buttons only (which are images, too).

#button_pricing  {
    border:0;
}

Worked like a charm.

Creating a rule for a specific ID does of course mean that you have to create the same rule for every individual image that is linked, as IDs have to be unique in the document.

A class applied to the linked images to turn off borders is one way;

img.no_border {
   border:0;
}

creating a rule that only applies to images inside a type of element is another.
This is for images inside anchors (<a>)

a img {
   border:0;
}

Or creating a rule for images in a specific container is yet another;

#navigation img {
   border:0;
}

Hello,

I usually use the following CSS code:

img {
border: none;
}

But i agree you can make a global rule or make it for eavery selector and classes. Look at your code and see which class, ids or html tag you are using before you use the image... then add the border none to all images.


Just post some code and i will show you! HTML and CSS please!
Thank you,

Yeah, those methods all work. There's usually a few different ways you can get things done.

add the following code to your CSS stylesheet:

img {
    border: none;
}

if you want it only for one/few image(s) and not every single image, make the image code:

<img src="img.jpg" alt="Image" class="theimg" />

and add the following in the CSS stylesheet:

.theimg {
    border: none;
}

Thanks! I have been searching for this answer. It works!

I have a variation of this problem.

Now, the linked thumbnails on my webpage have 1px black borders.

Firefox now adds the blue border for active link.

I can't do the border: none thing any more, as I'd be removing the black borders, too, which I need for my design.

What could I do instead?

Pseudo-classes, and telling Firefox to not put a border around when active? How do I write this?

Thanks.

a:active {
    outline:none;
}

Thank you very much, Chris!

Unfortunately, it doesn't work completely.

The outlines are no longer blue, but dotted and black, and they describe the area of including margin and padding.

I found the solution.

To get rid of the dotted outline, this works:

*:focus {
outline: none;
}

The reason why a:active isn't enough, as the dotted line appears in the focus state of a link.

You really shouldn't remove those dotted lines, they are meant for ACCESSIBILITY, so removing them is detrimental to people using assistive technologies.