I have tired everything transform to IE Matrix but transform scale css not work in ie8.
Code:
.fture_box ul li.fture_img img{
width: 451px;
height: 284px;
display: block;
margin: 0 0px 0 11px;
padding: 0px;
float: left;
transform:scale(1.2);
}
.ie8 .fture_box ul li.fture_img img{
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.2, M12=0, M21=0, M22=1.2, SizingMethod='auto expand')";
}
Please tell me what i should do to make it compatible in ie8?
Internet Explorer 8 does not support CCS3 transforms. While adding an extra library might not be what you want, you could look into velocity.js It uses CSS3, when available and falls back to Javascript on older browsers, like IE8. jQuery is optional and not a dependency.
$.velocity({scale: 1.2});
Css transform isn't supported on IE8.
http://caniuse.com provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
CSS transform: http://caniuse.com/#search=transform
Related
.element {
border-radius: 15px;
position: absolute;
transition: box-shadow 0.5s;
}
.element:hover {
box-shadow: 0 0 6px rgba(35, 173, 278, 1);
}
<div class="element" style="width: 100px; height: 50px;"></div>
This code works perfectly in Chrome and IE 11, BUT when I use this code in SharePoint, the IE does not detect the hover-event. Chrome does. Only when the div has a background color, the IE detects the event.
Does anyone know why?!
The box-shadow property has support from IE9.
Please check for the CSS property browser support.
Use css prefix click here for link which will help you. here is basic list.
-moz- (Firefox)
-o- (Opera)
-ms- (Internet Explorer)
-webkit- (Safari, Chrome)
also consider for use higher version of IE for future development very less people use it nowadays if you have any new difficulty in new version you do not have to think about too much for it , its Microsoft fault they doing things way different than Open Source world.
I have a question regarding Safari Mobile and CSS object-position/object-fit property.
I've tried to use it, but it doesn't work for me.
I've seen 2 different answers(Safari Mobile supporting this property and doesn't support)
There is my example:
img {
object-position: 0 -300px;
width: 112px;
height: 50px;
display: block;
float: left;
margin-right: 10px;
}
I'm using CSS sprites for menu icons as img, not as background.
How I can solve this issue?
iOS safari does support object-fit however doesn't support object-position
See Can I use CSS3 object-fit/object-position ?
1 Partial support in Safari refers to support for object-fit but not object-position.
A possible solution is using background with background-position
Other solution, given you are using icons, would be using glyphs, from Font-Awesome or Glyphicons, just to name a few.
Here is a good article about CSS sprites
This question already has answers here:
Gradients in Internet Explorer 9
(10 answers)
Closed 9 years ago.
I have refered many sites for applying linear gradient to ie-9 and some links are saying not support as well as some link are saying it will work.can any body clear whether we can uselinear gradient or not?
This is my code:
.top_block
{
position: fixed;
display: block;
height: 150px;
width: 105px;
z-index: 9999;
background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D3D3D3));
background: -moz-linear-gradient(top, #E9E9E9, #D3D3D3);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E9E9E9', endColorstr='#D3D3D3',GradientType=0 );
margin-left:72px;
left: 36%;
top: 32%;
border: 6px solid white;
border-radius: 10px 10px;
-moz-border-radius: 10px 10px;
-webkit-border-radius: 10px 10px;
padding: 15px;
}
I have applied this not working in ie-9 as well as working working fine in firefox and ,chrome.
No, IE9 does not support the standard CSS gradients. This was only introduced in IE10.
IE9 does, however, support the old IE-specific -ms-filter style, in the same way as older IE versions did, so you can use this to generate gradients in IE9.
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#222222', EndColorStr='#AAAAAA')";
However, it is important to note that these filter gradients (and in fact IE's filter styles in general) have a number of bugs and quirks, some of which can make them difficult to work with.
For example, they are incompatible with CSS border-radius. If you use a filter gradient and border-radius on the same element, the gradient background will be displayed on top of the rounded corners and will hide them.
There is no way around this problem using the filter gradients.
So if you need to use gradient backgrounds and rounded corners on the same element in IE9, the best solution is to use a polyfill script such as CSS3Pie, which implements standard CSS gradients into IE9, and does it in a way that is compatible with border-radius.
This isn't the only problem you'll encounter when using filter styles, so my preference would be to avoid using them wherever possible. Polyfill scripts like CSS3Pie generally make things a lot easier to work with, and often do a good job of working around or avoiding the bugs in the fiter styles.
Hope that helps.
Rescaling iFrame content works in Chrome, but not other browsers. Any solutions? I'd like a cross-browser solution for rescaling an iframe to place a form in.
It doesn't rescale in IE8 and Firefox 15.0.1. It appears at 100% in these browsers, but is reduced in Chrome. Any thoughts?
<iframe src="http://www.apple.com/"
frameborder="0" noresize="noresize" scrolling="no"
width="66%" margin: 0 auto; align= "left "seamless="seamless"style="
-webkit-transform:scale(0.5);-moz-transform-scale(0.5);
width: 400px; height: 400px;"></iframe>
http://jsfiddle.net/DisEngaged/t9yhm/
You have made a small typo / used the wrong syntax for Firefox. You have used a - instead of a :.
Live example: http://jsfiddle.net/t9yhm/3/
Instead of:
-moz-transform-scale(0.5);
It should be:
-moz-transform:scale(0.5);
Also, it is worth noting that the latest versions of Firefox support the unprefixed version:
transform:scale(0.5);
EDIT :
Sorry, I've just noticed that you wanted a "cross-browser" solution. The CSS3 below will support the latest versions of Firefox, Chrome and IE9+ :
iframe{
width: 400px;
height: 400px;
margin: 0 auto;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
}
For IE8 and below there is a filter you can use, but it has a complicated syntax:
/* IE8+ - must be on one line*/
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.5, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.5,
M12=0,
M21=0,
M22=0.5,
SizingMethod='auto expand');
To help you calculate the matrix values you can use this site: http://www.useragentman.com/IETransformsTranslator/
I've got a peculiar problem related to a requirement to display a piece of text at 45 degree angle. The requirement is to support "all browsers", however I managed to eliminate IE6 (thank-you-very-much) and older versions of Mozilla/Opera. The requirement is for this display is like this:
I can get this sorted in CSS3 compliant browsers (latest versions of pretty much everything) using this CSS/HTML:
<style type="text/css">
.homepage-top .red-corner {
position: absolute;
right: 0px;
top: 300px;
width: 0px;
height: 0px;
border-top: 55px solid #e11e2d;
border-left: 55px solid transparent;
z-index: 9;
}
.homepage-top .free {
position: absolute;
right: 3px;
top: 310px;
text-transform: uppercase;
color: white;
font-size: 10pt;
font-weight: bold;
z-index: 10;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-sand-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<div class="red-corner"><!-- --></div>
<div class="free">free</div>
It works well with IE9 and newer Firefox, Safari and Opera. Then I need to get IE7 and IE8 working - and this is where it becomes interesting. I can use filter on IE7 and -ms-filter on IE8 - and I get very interesting results indeed.
The filter/-ms-filter look like this:
filter: progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
Adding this to the .homepage-top .free selector causes IE7 to display the rotated text correctly (although with some black tint to white letters, but I can live with that) - but it ignores absolutely EVERYTHING in the css file following that line. Removing the filter line restores the rest of the CSS, but, naturally, does not rotate the text.
In IE8 everything works correctly, however adding this to the selector causes IE9 to malfunction. It seems that IE9 is trying to use both -ms-filter and -ms-transform properties - and this causes some internal confusion. As a result, IE9 display looks like this:
Clearly, something is wrong here - but how do I go about fixing this so that it works in IE7, 8 and 9?
Many thanks in advance.
You can use conditional comments to provide each MSIE its own stylecheet.
http://de.wikipedia.org/wiki/Conditional_Comments
<!--[if lte IE 8]> <style>...</style> <![endif]-->
<!--[if IE 9]> <style>...</style> <![endif]-->
Is it possible to simply use an image? I normally prefer styling plain text with CSS over using an image, but since you need to support older browsers, an image is a much simpler solution.