Member Avatar for 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

  • 6 Contributors
  • 18 Replies
  • 258 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by codejoust

Dani AI

Generated

Quick expert note: the dotted/dashed line you see around a linked image is the browser’s focus indicator (a “focus ring”), not the image’s normal CSS border. ’s experiment showing that removing the ring hides the visual effect is exactly what happens when the element receives focus; ’s posts about Opera point out that different engines handled that ring differently in the past. (developer.mozilla.org)

Accessibility reminder (important): don’t simply strip the focus indicator site‑wide. Keyboard users and many people with low vision rely on that visual cue to know where focus is. Removing the default outline without supplying an equivalent, high‑contrast focus style can fail WCAG requirements. If you change the ring, replace it with a clear, testable focus state. (w3c.github.io)

Recommended, modern approach: style the focus state instead of hiding it. Use the :focus-visible selector to show a custom ring for keyboard focus (so mouse clicks don’t produce an ugly ring), and provide a fallback or the official polyfill for older browsers. Example pattern:

/* show a custom ring for keyboard focus */
a:focus-visible img {
  box-shadow: 0 0 0 3px rgba(21,156,228,0.5);
  border-radius: 4px;
}

/* fallback for UAs without :focus-visible (use @supports or load polyfill) */
@supports not selector(:focus-visible) {
  a:focus img { box-shadow: 0 0 0 3px rgba(21,156,228,0.5); }
}

If you need cross‑browser consistency, use the WICG focus-visible polyfill and test on real devices. Check current browser support before relying on :focus-visible alone. (developer.mozilla.org)

If you absolutely must hide the visual ring for mouse users only, prefer an input‑modality approach rather than turning off focus globally. A small script that tracks the last input (mouse vs keyboard) and toggles a class on <html> lets you hide the custom ring for mouse interactions while keeping keyboard focus visible. Historically, older Presto Opera had rendering quirks that made this fiddlier; modern Opera (Chromium) accepts these techniques. Always test by tabbing through the UI. (stackoverflow.com)

Further reading: MDN :focus-visible, the WICG polyfill, and WCAG guidance linked above.

Recommended Answers

All 18 Replies

Member Avatar for OnIIcE

fixed it myself after a few more hours reading.

outline: none;

if anyones interested! =)

Member Avatar for Troy III

-did that work in opera?

Member Avatar for 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:

<img src="your image.jpg" border="none" />

Member Avatar for 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.

Member Avatar for 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!

Edited by mike_2000_17 because: Fixed formatting
Member Avatar for Troy III

Any success with Opera?

Member Avatar for MidiMagic

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

Member Avatar for 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:

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:

without giving any means to controll it.
At the end everybody will keep his own opinion allthough the situation is clear to see.

Regards.

Member Avatar for codejoust

Use

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

.
That probably should fix it.

Member Avatar for Troy III

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

Member Avatar for 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.

Member Avatar for 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?

Member Avatar for 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.

Member Avatar for Troy III

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

Member Avatar for codejoust 
a:focus, a:active, a:link, a:hover img, a img, img { border:0 none; outline:0 none;}
Member Avatar for ko ko

float your image

img {
float: left }
Member Avatar for Troy III

You guys, are kidding right?!!

Member Avatar for codejoust

You guys, are kidding right?!!

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.