Image border in Strict HTML using CSS

I have the following to display an clickable image (with no border) on a website:

<a href="link"><img src="img" border="0" /></a>

开发者_运维问答However this is not strict XHTML 1.0 so I changed it too:

<img src="img" class="mystyle" />

And the CSS:

mystyle img
{
    border: 0px;
}

However this only works in Safari & Chrome and does not work in IE & FireFox.

I understand that the w3 validators aren't necessary but was wondering if anyone has come across this and possibly a fix :)

EDIT: Style was a typo, I meant class ;)

Thanks

Needs some changes (i am surprised to hear that it works in any browser, well looks like webkit-based browsers do not put a border around image links, as @Adriano mentioned in his comment)

in Html

<img src="img" class="mystyle" />

because the style attribute is to assign property values directely, and not to reference a css rules. The class attribute is used for that.

and in CSS

.mystyle
{
    border: 0px;
}

because to signify a class rule you put a . to it (# for ids). And we removed the img from there because it would mean that you want to style img tags that are contained in some other element that has the mystyle class.

Your css is missing the "." in front of mystyle. This is the css you want:

.mystyle img { border: 0px; }

In your html, use the "class" tag, not the "style" tag. You would use style when you include in line Css, such as:

<img href="img" style="border: none;" />

Firstly, it should be class="mystyle" not style="mystyle".

Secondly, since the <img> tag is the same element that has the mystyle class, your CSS is wrong.

The CSS you've defined is for an element called mystyle which is inside of another element called img.

How you actually want to define the style is img.mystyle.

So your CSS code would look like this:

img.mystyle {
    border:0px;
}

and your HTML would look like this:

<img src="img" class="mystyle" />

To be honest though, I'd prefer to have this apply to all images, so I wouldn't bother with the mystyle bit at all; just have a stylesheet entry for img on its own to remove any borders. If you need to add one to a specific image later, you can always override it, but I'd rather have it off by default.

As for the mystery as to how the original code worked in Chrome/Safari but not Firefox/IE: I suspect that Chrome/Safari have dropped the default border. So it's not so much that they worked for you, it's more that those browsers don't even need you to do this, whereas Firefox and IE are still using the old default style for image links that defaults to giving them a border so they do need the override.

Shouldn't that be <img src="img" class="mystyle" />?

my quess is that you don't catch the css propertly. it should be **.**mystyle img

<a href="link" ><img style="border: 0px" src="http://www.google.com/images/nav_logo16.png"  /></a>