Disable grey border on anchor (<a>) elements on focus - javascript

I am trying to make the ugly grey border that appears around anchor tags go away. The CSS property outline:none; works for Firefox, but how can I do it in IE? Preferably using CSS expressions or jQuery. I'm not worried about accessibility BTW.
Based on your suggestions I found these to be the best solutions:
The jQuery (for IE browsers):
$('a').focus(function() {
$(this).blur();
});
Another jQuery option (for IE browsers only):
$('a').focus(function() {
$(this).attr("hideFocus", "hidefocus");
});
The CSS (for all other browsers that force an outline):
a {
outline: none;
}
Note: Some browsers such as Google Chrome don't force an outline on focus.

Unfortunately I think hideFocus is your best answer as blur isn't always appropriate:
...
http://msdn.microsoft.com/en-us/library/ms533783(VS.85).aspx

It sounds like you're talking about the dotted border that appears when you tab through links. You have the correct solution for Firefox (outline: none in the CSS). The best solution I've used for IE is to add an onfocus listener that removes focus:
link
Take a look at this site for an example of how you might do it globally: http://codylindley.com/Javascript/223/hiding-the-browsers-focus-borders-should-i-shouldnt-i

Unless I'm missing which dotted border is being discussed, outline:none works in Internet Explorer 8 (at least, for me). Rather all of a sudden some hyperlinks were rendering with a dotted border (the only attribute I remember changing is display:inline on an h2 element that contained a link, afterwards the dotted border appeared). So I threw in a { outline:none; } in my global stylesheet and poof, no more border in IE8!

For IE, you can use Javascript like this:
Click Here
Read more:
http://www.htmlgoodies.com/beyond/javascript/article.php/3471171
For Firefox and Safari, outline:none works.
Read more:
http://css-tricks.com/removing-the-dotted-outline/

Does this not work?
a
{
border: 0;
}

a {outline:noneIE 8} css seems to work well on Firefox, Chrome and IE 8.

a {
outline: 0 none !important;
border: none;
}

Related

How can I hide browser broken default image added on empty src <img /> with css? [duplicate]

I'd like to give broken/errored images some extra CSS:
img:error {
max-width: 20px;
max-height: 20px;
}
but that doesn't work. Is there a way with pure CSS to do this? Is there an img pseudo selector for this? Or even better: a dirty hack that works?
I've looked around, but nobody seems to be wondering =)
(Yes, I know JS can do it and I know how; no need to mention it.)
There is no way in CSS specs or drafts, but Firefox has a proprietary selector (pseudo-class) :-moz-broken. Its documentation is very concise and it says “intended for use mainly by theme developers”, but it can be used e.g. as follows:
:-moz-broken { outline: solid red }
:-moz-broken:after { content: " (broken image)" }
Although the documentation says that it “matches elements representing broken image links”, it actually matches broken images (an img element where the src attribute does not refer to an image), whether they are links or not. Presumably, “links” really means “references” here.
CSS 2.1 says: “This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.” But Selectors Level 3 (CSS3 Selectors) just says about them: “They are explained in CSS 2.1.” In practice, browsers handle them differently. Oddly enough, Firefox supports :-moz-broken:after but ignores :-moz-broken:before. It does not support either of these pseudo-elements for normal images, but img:after, too, is supported for a broken image (i.e., the specified content appears after the alt attribute value).
For this, you should use the alt attribute, wich shows up if link is broken and you can as well style background of image :
example:
img {
display:inline-block;
vertical-align:top;
min-height:50px;
min-width:300px;
line-height:50px;
text-align:center;
background:
linear-gradient(to bottom,
blue,
orange,
green);
font-size:2em;
box-shadow:inset 0 0 0 3px;
}
These style will be hidden when image is shown.
http://codepen.io/anon/pen/Kxipq
As you can see, we do not check for broken links, but offer alternative , usefull for blind people , searchengines, whatever , and some extra styles finishes it :)
some extra Image alt attribute best practices
<img src="not_found_image.png" onerror='this.style.display = "none"' />
from:
https://www.geeksforgeeks.org/how-to-hide-image-not-found-icon-when-source-image-is-not-found/
NO there is no :error pseudo class. This is a good site for a comprehensive list of what is available:
http://reference.sitepoint.com/css/css3psuedoclasses
July, 2015 EDIT/ADDITION:
(Thank you Rudie)
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
No. There is nothing in CSS selectors level 2.1 or level 3 that allows targeting an image like that.
This is close:
<style>
img[data-broken="true"] {
visibility: hidden;
}
</style>
<img src="none.webp" onerror="this.setAttribute('data-broken', 'true')">
Strictly speaking, it sill uses JavaScript. But the JS is self contained in the image HTML code.

issue with jquery .css() and getting brifed css of style Attribute

i want to add style to an element using css() and save it
first step works fine but when i want to save it the code that jquery gives me is too detailed
for example
<div id="d"></div>
$('#d').css("border-radius","55px");
and
alert($('#d').attr('style'));
gives
border-top-left-radius: 55px;
border-top-right-radius:55px;
border-bottom-right-radius:55px;
border-bottom-left-radius:55px;
is there anyway to get less detailed code like
border-radius:55px
?
I think you can see it by:
$('#d').css("border-radius");
Or may be
$('#d').attr("style");
try something like this
alert($('#d').css(border-radius'));
I tested this in Firefox and I got:
border-radius: 55px 55px 55px 55px;
In other browsers tested I got what you wrote. The output appears to be browser-specific - if you inspect the element in the DOM, even there it's already written differently in Firefox than the other browsers I tested (Safari, Chrome, Opera all write the explicit, extended definition).
Also found this, although in a different context:
Different browsers may return CSS color values that are logically but
not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).
http://api.jquery.com/css/
In conclusion, if you want the style definitions in a specific formatting, you will have to do something like regex-replacing on the string that attr('style') returns. Hope this helps.
try this
alert($('#d').attr('style'));
I ended up with different method by capturing all input[type=text] where i set value of properties ,there i can have full control on output

Simple Mouseover not Working in Chrome?

Okay, so I am working on a game-center. I got this cool idea so when I mouseover a hyperlink it shows a scary face (just for kickz & gigglez);
The problem is, it works perfectly in Firefox, but not Google Chrome? The demo is over here:
http://bouncygames.org/games/scary/
Please help... :(
*My Question: * *How come this is not working in Chrome, and how can I fix this?*
You don't need any javascript whatsoever, just use this css-declaration and it will work perfectly in all browsers:
#img{
display:none;
}
a:hover ~ #img{
display:block;
}
To make it more specific (so that it will not trigger on all hovered anchors), put a class onto your anchor and write ( e.g. .scary:hover ~ #img ).
Don't use onmouseover and onmouseout these are considered bad coding practice for several reasons.
Also, don't use the center tag, but use the css-declaration text-align:center instead.
In your script, instead of using img.style.visibility, use
img.style.display="none";
and
img.style.display="block";
make sure you also remove the visibility='hidden' attribute from your img tag or it won't work
There is a space between getElementById and ('img'), remove that and try again.

CSS pseudo class won't work when normal class is set from javascript, under FF

I have p.first_p:first-letter in my stylesheet, as I checked, it works well when class first_p is set in HTML. Problems start when I use javascript to find elements and then set their class.
Under Chrome and Opera it works fine (I need to check IE 8 and 9, and FF3).
FF 5.01 changes the class, but still pseudo class setting doesn't affect the element.
It seems that FF needs to 'refresh' css settings of element before pseudo class starts working, so I made rather dirty workaround - script replaces affected node with its clone.
Is there a better way to solve that issue? Some way to make FF recalculate everything it knows about node? Also that workaround isn't enough for IE 7.
Edit: yeah, pseudo-element not pseudo-class, my bad
It is definitely a bug. A possible work-around would be changing the display style of the element. Unfortunately, this needs to be done delayed, after the previous style change applied:
element.className = 'first-class';
element.style.display = 'inline';
setTimeout(function(){
element.style.display = '';
}, 0);
Demo: http://jsfiddle.net/pvEDY/3/
You're running into https://bugzilla.mozilla.org/show_bug.cgi?id=8253
Is it possible to not use javascript?
I'm guessing that you're applying first_p to the first paragraph of particular elements.
It possible for you to use the :first-child selector instead?
I'm not sure if this will work, but you could try something like the following, assuming you want to apply this to children of divs with class "copy"
.copy p:first-child:first-letter{
color: #abcdef; /* or whatever */
}
this definitely works and you don't need javascript, except for crappy old IE.
Alternatively you could try this:
.element p:first-letter{
font-size: 20px;
}
.element p + p:first-letter{
font-size: inherit;
}
This css makes any paragraph that is not preceded by another paragraph have a styled first letter. Would that solve your problem?
Wait, you want it to work in Firefox. Try this:
.element p:first-of-type:first-letter{
font-size: 20px;
}
It selects the first matching element. The :first-of-type pesudo-element is supported by Firefox, Opera, Chrome and Safari according to SitePoint's page for :first-of-type

Ext JS: createStyleSheet problems with two classes

Ext.util.CSS.createStyleSheet(
'.cleanForm .x-form-text.x-superboxselect { background: none; border-color: white; } ' +
'.cleanForm .mySuperSelectItem a { background: url(../sprite.png) no-repeat 0px -50px; } ' +
Ext.id( null, 'someStyleSheet')
);
This stylesheet works in FireFox. The second rule works in IE. The first rule does not work in IE. It appears when IE loads the stylesheet, it ignores the third class creating a rule not applicable for my code.
Has anybody seen problems with multiple class selectors that follow a third, parent class?
What version of IE are you using? I tested IE9 on this mulitclass selector test page and it doesn't look like it properly supports multiclass selectors in quirks mode. Have you set a doctype? Switching to standards mode in IE7+ looks better.
Some cursory googling found this blog post with a good discussion in the comments.

Categories

Resources