I have a simple hover function that makes the image more transparent. I'm trying to use the site on IE 11. The weird thing is that on some computers, it works how it's supposed to. On others also running IE 11, it doesn't. I don't know if this is a code problem or maybe just a settings issue. Any ideas?
Here is my image code:
<img alt="Home" class="auto-style8" src="http://contoso/AzureTeam/Images/Home.png">
Here is my css:
.auto-style8 {
width: 150px;
height: 150px;
}
.auto-style8:hover {
opacity: 0.4
}
There's nothing too fancy too it. I don't really understand what is wrong.
Try using css Cross-Browser prefix
like this for example:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
Are you sure all of the computers are on the same version of IE 11? I had a similar issue.
You could try to cover all your bases by doing this:
.auto-style8:hover {
-webkit-opacity: 0.4;
-khtml-opacity: 0.4;
-moz-opacity: 0.4;
-ms-opacity: 0.4;
-o-opacity:0.4;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
}
Check out: http://www.w3schools.com/css/css_image_transparency.asp
About CSS Browser support:
The Opacity property works from the following Browser's version.
Opacity:
IE: 9
Firefox: 2
Chrome: 4
Safari: 3.1
Opera: 9
Maybe in some computers, the IE version is older than 9.
And you should always use vendor prefix:
webkit- (Chrome, Safari, newer versions of Opera.)
moz- (Firefox)
o- (Old versions of Opera)
ms- (Internet Explorer)
If you have access to the computers which your code is not working, you could also test deleting the cache of that computer.
Press F12 > Network > F5 > Right click > Clear browser cache
In IE6 :hover is applied only to HTML a elements that have an href attribute.
In IE7 :hover on elements other than anchors is often slow to react. On large tables this can prove to be almost unusable. A fix is to add position relative (assuming the element is not positioned) to the element being hovered.
In Internet Explorer version 8, the manipulation of elements with negative z-index is buggy when used in conjunction with :hover
Related
I am trying to integrate some non editable zones in my TinyMCE 4. And it works fine. But now I want a cursor to become "not-allowed" over the non editable elements. I set it in css and it all works fine for Chrome and Firefox but not for IE9 the cursor don't change!
Is there a workaround for this problem?
Thanks
You can find a simple exemple here http://fiddle.tinymce.com/iSeaab
IE only supports CUR and ANI as formats from CSS to change cursor.
{
cursor: url('/cursors/customMoveCursor.png'), /* Modern browsers */
url('/cursors/customMoveCursor.cur'), /* Internet Explorer */
move; /* Older browsers */
}
Please look here. or a good link here
Have you tried to edit the CSS for TinyMCE like (tinymce/skins/lightgray/skin.min.css)
add what you need. Example:
.mce-grid td.mce-grid-cell div[disabled]
{
cursor:not-allowed
}
I still recommend using .cur file for IE.
My goal is to increase the size of the checkboxes, cross-browser. I have accomplished this goal in Internet Explorer, Firefox, and Chrome by using the browser prefixes (-moz-, -ms-, etc.) with this:
input[type=checkbox]
{
/* Double-sized Checkboxes */
-ms-transform: scale(2.1, 2.1); /* IE */
-moz-transform: scale(2.1, 2.1); /* FF */
-webkit-transform: scale(2.1, 2.1); /* Safari and Chrome */
-o-transform: scale(2.1, 2.1); /* Opera */
}
It is not working in Safari (and Opera, but I'm more focused on Safari). I have version 5.7.1 and I am accessing it from a windows desktop.
However, I was playing around with this jsfiddle and noticed that the scale works on divs:
http://jsfiddle.net/webvitaly/KKVXB/
I stripped out the code to get the minimum that will still get the desired result:
<div class="matrix3d"></div>
<input type="checkbox" name="opt1" id="option1" />
input[type=checkbox] {
-webkit-transform: scale(3,3); /* safari and chrome */
}
.matrix3d {
-webkit-transform: matrix3d(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); /* safari and chrome */
}
Here's the jsfiddle for it: http://jsfiddle.net/3xr7Q/
The checkbox is larger as expected, but as soon as I took out the 'matrix3d' class or alter the 'matrix3d' html or css in any way, the checkbox goes back to its normal size.
Does anyone know why it works with the 'matrix3d' class and how I can accomplish the goal without it, preferably by not editing the HTML? I do not want to just add an extra 'matrix3d' div next to my checkbox because I don't know why it affects the checkbox.
Edit: Also, something I notice is if I refresh the page, it flashes to the big size before going back to the small size. Also, it would nice to figure out it on Windows, but if someone says it works on a Mac or iphone, that might be OK.
Input elements are inline not block level elements, and webkit has historically not supported transforms on inline elements.
One way to fix this is to add a display: inline-block to the input's CSS. I'm not an a Mac right now, so can't check this.
Please check this DEMO in IE. The menu item name is not visible in IE. It is working perfect in all other browsers.
Any idea??
You were looking for rotation=3
http://jsfiddle.net/fTmxc/11/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"
"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";
Its because you are using CSS3 transform to rotate the text.
IE 6,7,8 does not support it.
to make it work in ie9 you need to add following code
-ms-transform: rotate(-90.0deg);
you can check this website to make it work in older browsers
http://www.aquim.com/web-article-226.html
I'm using opacity and I want to apply it on an image.
This is my CSS code:
img {
opacity:0.4;
filter:alpha(opacity=40);
}
img:hover {
filter:alpha(opacity=100);
opacity:1;
-moz-opacity: 1.0;
-khtml-opacity: 1.0;
}
It works fine in Firefox, Chrome and Safari, but it is not working in Internet Explorer 9. The problem is at the hover effect.
On the simple img the opacity works in IE9, but the hover effect doesn't work. How can I solve this problem?
Opacity is not yet a CSS standard. However, it works in all modern browsers, and is a part of the W3C CSS 3 recommendation.
Please refer: http://www.w3schools.com/Css/css_image_transparency.asp
if no joy,
use compatibility mode
<meta http-equiv="X-UA-Compatible" content="IE=8" >
I had the same problem, try this:
hit F12 (debugging console), then F5 (refresh). IE9 pops up a little box:
'Internet Explorer restricted this page from running scripts or ActiveX controls'
Click the button 'Allow Blocked content' and your opacity should work.
Not quite sure how to ensure that it works automatically.
I have opacity working in ALL Browsers except IE - the problem in IE (6,7,8) is that the color renders as a SOLID :(
The CSS I am using is legit per the MS Blog Post on IE Opacity Filter
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=75)";
filter: alpha(opacity=75);
The weird thing is that I have my elements structured with Z-Index (overlay with 90, lightbox with 100)
When I set the z-index to -1 - IE Opacity starts rendering, but >0 and it appears solid again?
Any ideas!? Its driving me nuts!
Are you using a lightbox plugin or are you trying to make your own? You might want to check out slimbox2 and see how he does it since he claims compatibility with all browsers of the rainbow.