IE <= 9 pseudo element inherits container style when container is hovered - css

See this jsfiddle for a working example of the problem.
Opera 12, chrome, and firefox all work as intended, while IE9 and below underline the pseudo element.
I have already tried the following:
a:hover *,
a:before,
a:hover:before {
text-decoration: none;
}
but neither selectors work.

Finally managed to find an (half decent) way to handle IE:
clip: rect(0px 300px 16px 0px);
This hides the underline while leaving everything else - also updated the jsfiddle

Related

Problem with custom link cursor in Chrome

I want to use a custom cursor on hover for links. It works fine on Safari and Firefox, but on Chrome it jumps back to the default cursor for a millisecond, and then goes to my custom cursor.
Codepen: https://codepen.io/ford1234/pen/vwzRgJ
I've recreated the problem in Codepen but it also happens on the site I'm applying it to.
<div>
<p>Hello</p>
</div>
<style>
html {
cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/02/black-01.png'), auto;
}
a:hover {
cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/05/blacktriangle-small17px.png'), auto;
}
Expected result: A transition from the circle to the triangle.
Actual result: A transition from the circle, to the default hand pointer, to the triangle.
remove ":hover" on your selector.
your selector must be;
a{
cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/05/blacktriangle-small17px.png'),
auto; }
Have you tried out a transition-duration or a transition-delay? This is used to define the duration of a specified transition. This is the length of time it will take for the targeted element to transition between two defined states.
.example {
transition-duration: 0s;
// or
transition-delay: -1s;
}
Also keep in mind that some features are only supported by certain versions of the browser.

Webkit scrollbar CSS, always a white box in corner

Is there any way to avoid the default white box that appears on a custom styled webkit scroll bar?
The white box only appears when overflow is going both horizontally and vertically. (Using Google Chrome)
Edit: I have tried setting body background to a different colour - still only seeing a white box.
Screenshot:
CSS:
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background: rgba(0,0,0,0.35);
}
::-webkit-scrollbar-corner {
background: #0c0c0c;
}
This is a little out of date, but in chrome, you can set background colour to rgba(0,0,0,0). Anything with alpha 0 and the box won't show :)!
::-webkit-scrollbar-corner {
background: rgba(0,0,0,0);
}
As E.C.Pabon mentioned, you can use the
::-webkit-scrollbar-corner {background-color: red;}
tag, setting the background-color to transparent worked for me.
::-webkit-scrollbar-corner {background-color: transparent;}
if you only need the vertical scrollbar you can use
overflow-y: scroll;
the white is the space between the x-scrollbar and the y-scrollbar
i hope it solve your problem
No, there is no way to avoid the white box.
You can set the background-color of it (as you did making it grayish-white in:
::-webkit-scrollbar-corner {
background: #0c0c0c;
}
We deal here with pseudo elements and the color under the ::-webkit-scrollbar-corner is white. So to get the custom webkit scrollbar blend in with your lay-out, you always have to take care of the corner's color AND keep in mind that transparency is over the white color.
While the answer provided by E.C.Pabon was technically correct, the real error was Chrome 50 on x64 Linux had a bug with GTK integration. As of Chrome 51, the issue has been fixed.

CSS3 animations don't always run when 'display' attribute is set on a pseudo element

The problem I am running into occurs when trying to animate a web font. Specifically, if the HTML element has a class that defines the font-family and other needed CSS attributes on the :before element as opposed to the element itself, the pseudo content will not get animated.
Here is some sample CSS:
#font-face {
font-family: 'FontAwesome';
src: /** src urls here... **/
}
.fa-before:before,
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-refresh:before {
content: "\f021";
}
.spinning-loader {
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
#-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
#keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
Now the key part is my fa and fa-before:before selectors.
If I use the fa-before class, that works fine to set the correct font-family of my :before content. Additionally, plain fa also works fine for the :before content (and I think any other content too).
The problem is, if an element has fa-before, it doesn't animate (at least, not all browsers animate it).
<!-- This doesn't always animate -->
<i class="fa-before icon-refresh spinning-loader"></i>
<!-- This DOES always animate -->
<i class="fa icon-refresh spinning-loader"></i>
When it works:
When it doesn't work:
Here is a JSFiddle so you can test in your own browser: https://jsfiddle.net/b3gojahs/1/
Here are all the browsers I've been able to test:
Works in:
Mac OS X 10.10.5
Chrome 47.0.2526.111
Windows 10.0.10240
IE 11.0.10240.16644
Edge 10.10240.16384.0
Doesn't work in:
Mac OS X 10.10.5
Chrome Canary 50.0.2639.0 (!!)
Safari 9.0.3 (10601.4.4)
Firefox 44.0
Windows 10.0.10240
Chrome 48.0.2564.97
Firefox 44.0
Anyone know why this is occurring? I can't seem to find any articles on this issue.
Why does the animation not work when fa-before class is applied?
The problem is because i element is an inline element by default and CSS transforms don't work on inline elements. Inline elements are not transformable elements.
As per W3C Spec:
Transforms apply to transformable elements.
transformable element
A transformable element is an element in one of these categories:
an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]
atomic inline-level element
Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.
When the fa class is applied on the element, the element's display is changed to inline-block via the CSS and so the animation that is applied through .spinning-loader selector works as expected.
However when the fa-before class is applied on the element, only the :before pseudo-element of the i gets the display changed to inline-block. The display setting of the i itself doesn't change and it remains as the default inline setting. Because of this, the animation on the i has no effect.
What is the solution?
Solution is exactly the same that is mentioned in Paulie_D's answer. The parent i element on which the transform animation is applied should be made as a block or an inline-block element.
i.spinning-loader {display: inline-block;} /* this setting should solve it */
Note: The behavior in Chrome is a bit erratic (atleast on my PC - v43 + Win 7). It starts working automatically when I make any change to the fiddle, close and then reopen it. I have no explanation for this but Firefox is perfect.
Why does it work on some browsers?
This is something to which I don't have an answer at present. The only reason could be that they treat the i element differently and set its default display setting as block or inline-block.
The issue seems to be setting the
.fa-before:before{
display: inline-block;
}
Is you just make this
.fa-before {
display: inline-block;
}
It works just fine - JSFiddle

Opacity transition for a:hover not working

I want all elements that are links to show consistent behavior.
a:hover { opacity: 0.5; }
This works in IE and Firefox, but the opacity (and associated CSS transition) is not properly applied to the child elements of the <a> tag in Chrome and Safari. If I add an explicit rule for a <div> as a child element, it works in Chrome and Safari:
a:hover, a:hover div { opacity: 0.5; }
So far so good, and this has been asked and answered before. The problem that I have is that by adding the rule for the containing <div>, the opacity gets applied twice in IE and Firefox, making the element too transparent.
I need to cover both scenarios - <a> wrapping a <div> or not, without writing lots of explicit CSS rules. How can I do that?
http://liveweave.com/fMsz7m
What worked for me in Safari was adding display: block into the a tag
a:hover {
opacity: 0.5;
transition: opacity 0.2s ease;
display: block;
}
I'm not sure whether this counts as a direct solution to your question (I'm not sure why the children aren't inheriting), but you can add display: block to the a in your css which will work (tested with Firefox and Chrome).
JSFiddle DEMO
An alternative is to assign the hover to your <div>, parent of <a>.
JSFiddle DEMO
I feel as though there are better solutions/explanations out there, maybe this one will spark an idea for someone else.

Opacity not working on img in IE8

I have code that works in Chrome and Firefox, but not in IE8.
<a href="javascript:void();" class="shareActionLink" id="comment">
<img src="comment.gif" class="shareActionImage" />Comment
</a>
The CSS for this is:
.shareActionLink:link, .shareActionLink:visited
{
margin-right:8px;
color:#999;
opacity:0.6;
filter: alpha(opacity=60); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=60)"; /*IE8*/
background-color: #fff;
}
#shareActionsBox .shareActionLink:hover
{
color:#333;
text-decoration:none;
opacity:1.0;
filter: alpha(opacity=100); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /*IE8*/
}
Based on other StackOverflow posts, I added the IE filters, which helped to adjust the text opacity, however, the image opacity still doesn't change in IE. It works fine in other browsers.
I suspect that this is happening because the img is nested within the link. How do I get the image to change opacity in IE??
Thanks
MS filters only work in IE7 if the hasLayout property is set to true, they only work in IE8 on block elements, or if you set the display property to block or inline-block.. as you're trying to use this on an inline element, the a, then setting display: inline-block; should solve it for all IE's as it works to set hasLayout for IE7 and also keeps IE8 happy
.shareActionLink {
display: inline-block; /* IE needs but shouldn't hurt anyone else */
}
.shareActionLink:link, .shareActionLink:visited {
margin-right:8px;
background: #fff;
color:#999;
opacity:0.6;
filter: alpha(opacity=60); /* IE */
}
.shareActionLink:hover {
color:#333;
text-decoration:none;
opacity:1.0;
filter: alpha(opacity=100); /* IE */
}
Off the top of my head, setting opacity on a parent element means it's children elements get, erm, opacitied? as well.
To target the image specifically, add img after each of the css selectors; e.g.:
#shareActionsBox .shareActionLink:hover img
to target the image whenever the parent link is something (in this case when hovered).
I could not get this to work in IE6 without targeting the <img> element. I've not got IE8 installed so cannot be sure this demo will work in that browser. However, it does work in IE6, Chrome11 and Firefox4.
Also, it is worth noting that if your comment.gif has transparency then you may have further problems with the transparent part unless you set a background-color or use JavaScript to handle the hover. See another answer I wrote on this.

Resources