I have this image map
http://corfro.com/projects/charlie-faye-tour-map/
And when you click on the different cities a black border shows up on the area but only happening in Chrome. (you might need to click a few times on different cities but the border will show up - once the bus arrives at the city the borders start showing up)
I've tried the following but to no avail.
a{outline:none;}
map > area,
map > area:active,
map > area:focus {outline: none; border:0; }
Do you guys have any suggestions? Any help is much appreciated as this is driving me crazy!
Old trick <area onfocus="blur(); (...) />"
Good luck;
I had a similar problem on IE9 and this worked:
#MyImageMap, #MyImage {
outline: none;
}
Original source of the idea: "One note about image maps is that you'll want to disable the border on the img, map, and area tags using CSS." http://forums.macrumors.com/showthread.php?t=1342928
(the area is a child of the map)
In the <IMG> tag add
hidefocus="true"
Try this, it worked for me ;)
a{
outline:none !important;
border: none !important;
}
This fixes it on IE
img {
outline:none;
}
Using jquery based on #boru solution:
$("area").focus(function(){
$(this).blur();
})
Have you tried adding the attribute "border: none !important" ?
just found a fix to get rid of that border in firefox 4 as the .blur does not seem to fix it.
#someWrappingElement *:active { overflow-x:hidden }
if you don't get specific to the div or element it's in it can reek havoc with your page and cause things clicked on to disappear while the mouse is held down. Use in conjuction with .blur() to fix for firefox and chrome.
Go to sharePoint Designer and locate your page/image
Highlight the image that has the randomized border
Find the following tags in the code:
<Content xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor">
</Content>
Between them Add:
style="border:none"
*may have to add them after the following: alt="" style="margin: 5px"
I'm experiencing exactly the same thing with Chrome on OS X (v 8.0.552.224). I just restarted Chrome and got an automatic upgrade on my Mac for this to start appearing, so must be something in the new release.
I have noted though that the colour of the outline can be changed by altering the "outline-color" attribute of the image, but have been unable to hide it completely even though "outline" is set to "none".
I just faced a similar problem. I couldn't get rid of the outline but was able to effectively hide it by setting the color property of the div to the background color. But I had areas of flat color. If I set color to transparent it came out black. That should be the right track to figure out a fix, though. I used it on a US map seen here: map
A really old question, but I found another solution that might help others.
I'm using the React package react-google-maps to show my Google Maps instance and markers
and used the following CSS to overwrite the user agent styles to fix this problem.
:focus {
outline: none !important;
}
Related
Ayo,
I have built a contact form and every time I click on a specific input field to fill it out, it imitates a weird blue border around the input field.
I think the best way to present you the problem with code is if you visit my website - I don't know which of my 1k line in css triggers that so please take a look to the very bottom of the website https://www.adamsochorec.com/about/[ ](https://www.adamsochorec.com/about/)
I've tried to remove it by setting border: to none on :focus but that did not work and the effect isn't generally visible while I inspect the page. So I was wondering if it might be some browser preset or something? It is both on Brave and Safari browsers.
no outline before clicking in, outline after clicking in
EDIT: Outline: none worked!
It seems like an input, you can use:
input:focus{
outline: none;
}
You can replace input with textarea or anything else in your case.
There's possibly no straightforward solution for this, but any suggestions for a workaround or pointers to some documentation of this issue/ behavior is welcome.
Scenario:
If I apply a custom on-focus CSS style, such as:
:focus {outline: 2px auto green; }
Issue:
Parts of the outline still show on the previously active links even after focus moves away.
In the screenshot, the last link with the green outline is the currently active element. The rest of the links with small green lines around were active only previously.
These remaining bits of the outline go away after a few seconds on their own or when you drag the mouse over them (or disturb that area of the page in some other way).
Context:
I am working on a chrome extension for accessibility, and I need to set an explicit style to the active element. The reason I am hoping to use outline-style:auto is that 1) applying any other style except auto (like "solid", "dotted" etc) give another issue and 2) also, it looks better.
I am aware that outline-style:auto is not supported by other browsers.
Using Chrome 27.
You might check to see if an outline-offset is being set.
I had a similar problem, I was using Bootstrap and it was setting:
a:focus {outline-offset: -2px;}
Doesn't sound like you're using Bootstrap, but maybe something similar is happening for you. I changed it back to the default:
a:focus {outline-offset: 0px;}
that seemed to work for me. Hope this helps!
(Warning, outline-offset is not supported in IE: http://www.w3schools.com/cssref/css3_pr_outline-offset.asp)
I had the same issue. In my case, I set an outline and a box shadow. Both seemed to stick to the element.
When I added the outline, I also set the box position to "relative" to make it stand out. For some reason that I can't explain, giving the box a z-index of 1 (bringing it forward) when I set the position to relative completely fixed this issue for me.
How do I delete or remove the white backgroundColor that swiffy puts on my animation?
stage.setBackground(null);
add it before stage.start()
Go to the upper right hand of the editor:
Site Settings->Appearance->Colors and Fonts
Update:
you can a backgroundColor Element or create a style to overwirte it:
<style>
svg
{
background: none !important;
}
</style>
I've read in other locations that the solution to this issue to search for "backgroundColor: nnnn" in the Swiffy output and to remove this element completely. This did not work for me until I discovered that Google have broken the ability to do this in the current version of the Swiffy runtime. If you also change:
src="https://www.gstatic.com/swiffy/v5.2/runtime.js"
to
src="https://www.gstatic.com/swiffy/v5.1/runtime.js"
at the top of the file you should find that the transparent background works correctly.
best regards
I have the below code:
<button onmousemove="this.style.border='2px #555555 solid';"
onmouseout="this.style.border='';">Test</button>
On mousemove, it correctly changes the border as specified. On mouseout my intention is to change the border back to the original. This works in Gecko based browsers but not in IE. IE removes all the borders and the button becomes 2D.
How do I get back the original 3D look of the button?
Note: For debugging, I tried alert(this.style.border) the get the value of the original border. It shows it blank. So the original border value seems to be blank. But setting to blank does not bring the original look back. :(
Try setting and clearing a class for the element and assigning the border value to the class. Just like below:
.buttonHover
{
border: 2px #555555 solid
}
<button onmousemove="this.className='buttonHover';" onmouseout="this.className='';">Test</button>
Note that this simple JS code will break your existing classes assigned to the element if there are any. If you are to use additional classes, please add a comment declaring the situation and I'll change the code accordingly.
As far as I know, there is no way to restore the original OS look once the element's border is set, although it strikes me as odd that even emptying border doesn't do the job. Ah well. The OS style is not just a classic border, but includes a black outline (depending on OS visual settings, even more than that).
Seeing as IE < 8 doesn't understand outline, I think the best workaround would be putting an element around the button, and highlighting that on hover.
Would recommend using CSS for the same rather than javascript. You can do the following.
Define only the hover propery of the button.
HTML :
<button value="Hello">Hello</button>
CSS :
button:hover
{
border:1px solid #333;
}
I think that what you are looking for can be found in the bowers user agent CSS. Here is a table that will give you a good idea of whats going on with different browsers http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm .
I'm using a picture with polygonal hotspots. In IE the hotspots are visible and I do not want that effect. How can I prevent this? Thanks
Go here: http://animactions.ca/Animactions/volet_entreprise.php with IE and select one
Have you tried setting the style 'outline: 0;' on all of your links in your image map?
You can try:
a, area {
outline: 0;
}
This will remove the ugly outline around any links on your site that appear when you click them.