I can't remove inset borders from object elements in IE11. They don't appear in any other browser or version of IE as far as I can tell. See the attached screenshot. Setting border as an attribute or inline style doesn't work... any ideas?
Add border-style: none; to your css for that div.
I had this issue with object images which were loading over script. The object data attribute wasn't defined so it was putting this border around the object. Adding a 1x1px blank image as the data attribute made it happy.
Have you tried:
border-width:none
or
-webkit-border-before: unset;
Related
I have file-uploader control.
When i hover on button in Web-Kit browsers, cursor is default, while must be pointer.
I red this post The cursor:pointer property doesn't apply to file upload buttons in Webkit browsers but in my case i don't use property height. Also try solution that #Mohammed Ibrahim suggest, but it also doesn't work for me.
Here is my example : http://jsfiddle.net/q686cc7s/4/ I try to add cursor:pointer for every possible selector, but no success.
Any suggestions? Thanks.
If set display:none for input then cursor works correctly but uploader - not :)
Adding this always did it for me
input[type="file"]::-webkit-file-upload-button {
cursor: pointer;
}
I'm using Programmer's Notepad, in my .css I've got the following:
tr#menu
{
border-style:solid 5px black;
background-color:#0099FF;
border-radius:25px;
}
border-radius is highlighted red as incorrect code?
Update - Code don't work in browser.
Update - I don't get a black border either :(
It does not exist in CSS level 2.
It is fine in CSS level 3.
Update Code don't work in browser.
See the specification:
The effect of border-radius on internal table elements is undefined in
CSS3 Backgrounds and Borders, but may be defined in a future
specification. CSS3 UAs should ignore border-radius properties applied
to internal table elements when ‘border-collapse’ is ‘collapse’.
Note that tr elements are, by default, internal table elements.
Update - I don't get a black border either :(
You've confused the border shorthand property with the border-style property.
You should just see if it works when you open a browser. Maybe Programmer's Notepad has an old version? Border-radius should work.
Programmers notepad isn't updated to include all the CSS3 keywords in the css.cscheme file for syntax highlighting.
The CSS will still work in compatible browsers. I would suggest getting a different more updated text editor.
Add border-radius to your WebFiles.scheme file
I have an <object> in my page code and my background color is not white. The object is created with a white border, which I don't want.
Any ideas on how to make it border: 0px; or border-color: #whatever;? Neither of those work. Can someone help me figure this out. Thanks
You're probably seeing an outline rule. This CSS should remove it:
object {
border: none !important;
outline: none !important;
}
You should probably get rid of the !important tags once you make sure that works.
When debugging something in the browser, you should be able to see what styles are set within the browser console. In Chrome, for example, you can right click on an element and it will show you exactly what styles are being applied to any given DOM element.
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;
}
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 .