I have buttons to zoom-in or zoom-out content. In firefox cursor works well (its like magnifier with +). But in chrome I have default cursor. This is my code:
.button.zoom-in {
...
cursor: zoom-in;
}
Can someone help me, why that works in forefox and in chrome not? Also, other cursors like help, move, pointer... works in chrome too.
For Chrome you have to use the prefixed-property-value:
.button.zoom-in {
...
cursor: -webkit-zoom-in;
cursor: zoom-in;
}
Here is a jsfiddle.
This page from Mozilla is an excellent reference to different cursors as well as browser compatibility for each.
For the zoom-in and zoom-out cursors, the following should work for Chrome 1.0+, Firefox 1.0+, Opera 11.6+ and Safari 3.0+. Zoom-in/out is not supported by IE.
.button.zoom-in {
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
cursor: zoom-in;
}
Related
I am trying to use blend modes for a website for a project, but I've found that they look different on my phone browser (chrome v 78.0.3904.84 on iphone 7) to my browser on my laptop (chrome v 78.0.3904.97 on mac).
It looks like this on the laptop, and like this on the phone.
So far as I can tell, both browsers support mix-blend-modes, so I'm not sure what's different.
The code for the elements that are being blended is:
.GraphButton {
font-size: calc(10px + 8vmin);
font-weight: 300;
color: var(--button-text);
background: var(--main-yellow);
mix-blend-mode: overlay;
height: 27vh;
width: 35vw;
margin: auto 6vw;
overflow: hidden;
}
This is a div on top of an svg background image. There is no transform involved.
Does anyone know what could be causing the difference or how to fix it?
mix-blend-mode is not supported on SVG elements in Safari and iOS Safari, but it IS supported for SVG elements in chrome. See https://caniuse.com/#search=mix-blend-mode
Here is my CSS code:
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus::-moz-input-placeholder { color:transparent; }
My CSS is not working on Mozilla Firefox. Please let me know what is wrong in my code.
Thanks in advance.
According to CSS Tricks, the correct selector is:
::-moz-placeholder /* Firefox v19+ */
:-moz-placeholder /* Firefox v18- */
(Because it seems you're using CSS3 selectors, you can just use the former)
You probably got this confused because Webkit has its own vendor prefix of -webkit-input-, but Firefox only has -moz- (without the input).
I'm using the following css code in my web page:
appearance: none;
-moz-appearance: none; /* Firefox */
-webkit-appearance: none; /* Safari and Chrome */
Does these codes support IE6 / IE7 / IE8? if not, then is there any alternate code that can work in IE6/IE7/IE8?
As you can see here the IE is not supporting appearance.
The appearance property is not supported in any of the major browsers.
Firefox supports an alternative, the -moz-appearance property.
Safari and Chrome support an alternative, the -webkit-appearance
property
Options of select field are moving away from selected field inside the lightbox only on mozilla and working fine on Chrome.
Codepen demo
Add below CSS
.custombox-show.custombox-sign .custombox-modal-content {
transform: none;
transform-style: initial;
}
Codepen demo
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.