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
Related
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
I tried to achieve a contrast effect on the logos for this page --> http://momarredi.homenet.org/
I used
img {filter: contrast(0%);}
to apply the effect on every image of the site. Everything is working fine in chrome and safari and opera, but not in firefox (I am on version 35.0.1).
I put now some code trying to simulate the effect, but with poor results..
Do you have any advice?
Thank you all
I try to accomplish this:
But I can't get the third column and the flipped headers correct.
This is how I have it now:
<http://jsfiddle.net/6TnaD/2/>
The solution works in IE9, Chrome, Firefox, Safari and Opera and doesn’t require JavaScript or images.
This is done with CSS3 :target selector
hope this will help you fiddle
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.
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.