remove dashed border when u press/select a linkd image (pic included)

[OnIIcE]

http://www.fredmyerscough.co.uk/myfiles/showborder.jpg

im using some jquery stuff to make myself a new website, but when you press the image (used for the menu) a dashed border apears around it. im not sure what element this is called, since its not affected by border: none; in css.

any help or advice on removing it? =)

thanks

[OnIIcE]

fixed it myself after a few more hours reading.

outline: none;

if anyones interested! =)

[Troy III]

-did that work in opera?

[w33n]

wow, that's weird that it has a border inside of the image.

in the html, try after the image:

add "border="none"

so it should look like this:

[Troy III]

he is talking about focus (element selected) outline; otherwise 'a tiny dotted border around the element that recieved focus'. But, css declaration " outline: none; " will work only in mozillas.

IE offers outline:expression(hideFocus='true')
or an inline statement hideFocus='true' although not a requirement because in IE this outline doesn't affect the page layout, while in mozilla it does.

On the other side Opera doesn't offer any kind of means to do that, allthough it doesn't affect the document, and normally would not be a requirement, it does affect your design and your menu links may get ugly on keyboard navigation because on top of a fancy border around the elment, it also selects its content forcing the text content to have a navy background color.

- If anybody found a 'cure' for this in Opera, ..would be much appreciated.

[OnIIcE]

it works in IE8 (what i work in) and jus tried in FireFox and Chrome and it works. ive just got the line i said in my link css like:

a { display: block; }

borders just the online isnt it? i got rid of that, its how Troy said - its when the object is focusd on.

on the other hand - from just quickly testing - turns out that FF and Chrome have a bit of a problem with jQuery!

[Troy III]

Any success with Opera?

[MidiMagic]

That dotted line indicates that the picture has the focus. That is a windows function. It is supposed to be there.

[Troy III]

That dotted line indicates that the picture has the focus. That is a windows function. It is supposed to be there.

But not here: http://i25.tinypic.com/21bjf3k.png
Here you have 3-state buttons or should I say "5".
1Normal 2Hovered 3Focused 4Visited 5Active
although 2 of them are intermediary and will only change font color intensity.
Currently Hovered button is "home" sorry you cant see the mosue from the printScreen command. The focused button is "projects" and the current page not indicated by the button state is "contact".

But then Opera does this:
http://i30.tinypic.com/33z9uu9.png
without giving any means to controll it.
At the end everybody will keep his own opinion allthough the situation is clear to see.

Regards.

[codejoust]

Use

a:active img, a:hover img, a img, img { border:0 none;}

.
That probably should fix it.

[Troy III]

Of course not - the outline of the element recieving focus has nothing to do with its borders.

[codejoust]

Use

a:active img, a:hover img, a img, img { border:0 none; outline:0 none !important;}

. That probably should fix it.

Sorry! As pointed out afterwards, I forgot to put the outline.
Linked images usually have a border, and active ones have an outline, which I forgot about.
The important isn't necessary, I just put it there to emphasize it.

[Troy III]

Sorry! As pointed out afterwards, I forgot to put the outline. Linked images usually have a border, and active ones have an outline, which I forgot about. The important isn't necessary, I just put it there to emphasize it.

Yes, and how do you remove this focus outline in Opera or in IE?

[codejoust]

For that, add a:focus img to the css selector syring. (sepeprated by commas). To the border and outline none selector. There are tons of link pusedo elenrs and methods supported by different browsers.

[Troy III]

May I see the code for I'm dying to remove it from Opera!
Did you read my posts on this thread?

[codejoust]

a:focus, a:active, a:link, a:hover img, a img, img { border:0 none; outline:0 none;}

[Zero13]

float your image

img {
float: left }

[Troy III]

You guys, are kidding right?!!

[codejoust]

You guys, are kidding right?!!

Floating will have no effect, I think....