The scaling feature in CSS does not function properly in Internet Explorer 8

I've tried multiple approaches to transform the IE Matrix, but I'm facing an issue with the transform scale CSS not functioning 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')";
}

Can anyone provide guidance on how to resolve this compatibility issue in IE8?

htmlcssinternet-explorerinternet-explorer-8

Answer №1

If you're working with Internet Explorer 8, keep in mind that it does not support CCS3 transforms. While incorporating another library may not be ideal, consider exploring velocity.js. This tool utilizes CSS3 when possible and switches to Javascript for older browsers like IE8. Additionally, jQuery is optional and not a requirement.

$.velocity({scale: 1.2});

Answer №2

Unfortunately, CSS transform does not work on IE8.

If you're interested in checking browser support for front-end web technologies on both desktop and mobile browsers, visit http://caniuse.com.

To see the support status of CSS transform specifically, go to http://caniuse.com/#search=transform.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying a table in Chrome/Firefox with a mouseover feature

Hovering over the rows of this table triggers a display of descriptions. html: <tr title="{{transaction.submissionLog}}" class="mastertooltip">... JavaScript: $('.masterTooltip').hover(function(){ // Hover functionality ...

javascripthtmlangularjs

What is the best way to conceal the main list but still show the nested list within?

I'm looking for a way to conceal the main parent of a sub-list while still displaying the nested list. Furthermore, I need to ensure that the parent element doesn't occupy any space on the page when hidden. HTML <ul> <li class="par ...

htmlcss

Creating a function within document.ready using jQuery is a common practice for ensuring that

I am currently working on creating a straightforward function that will replace an attribute when called using onclick="changeYoutube('XXXXXX');" within a link tag. However, I am encountering an issue where it says calling "changeYoutube" is resu ...

jqueryhtml

PHP code containing an if/else statement that performs form validation and validates the entered date of birth

Currently, I am practicing my PHP skills with if and else statements as well as form validation. The main concept I am working on involves the following: Upon entering a name, Date of Birth (DOB), and email, and then clicking the submit button, the action ...

phphtmlvalidationif-statement

Creating a unique ticket ID in Flask Python involves combining a string with an incremented integer value. This process ensures that

I am working on developing a Ticketing System using Python Flask and storing it in SQLite. However, I am facing challenges when trying to store the ticket ID. My expectation is that the ticket ID will be a combination of Datetime and an increment number. Y ...

pythonhtmlsqliteflaskticket-system

In Internet Explorer 7, there appears to be a white box that covers up the content on our website beyond a

I'm feeling stuck and frustrated trying to solve this issue. I have a Mac and no access to an IE7 machine, so I've been using browserlab (which is slow) to make any changes and see if they help. Unfortunately, I haven't been able to fix the ...

jqueryhtmlcssinternet-explorer-7wordpress-theming

Integrating blade code within blade code

Struggling to craft a button using the Form builder. {!! Form::button('<span style="color: {!! $colour[$i] !!}" class..') !!} The specific details of the button don't matter, all I wanted was to adjust the font color to $colour[$id]. Th ...

phphtmlcsslaravel-blade

PHP form does not seem to be vulnerable to cross-site scripting attacks

On one of my web pages, I have a form with an action php page using the following html syntax: <form name="form" action="test.php" method="get"> I decided to make it more secure by modifying it to: <form name="form" action="<?php echo htmlsp ...

phphtmlforms

How can we prevent a div from displaying if no image is pulled in using Custom Field? Looking for a solution in WordPress, PHP, and CSS

Here is the code snippet I am currently using: <div class="banner"> <?php if(get_post_meta($post->ID, 'banner', true)) : ?> <img src="<?php echo get_post_meta($post->ID, 'banner', true); ?>" /> <?php el ...

phphtmlif-statement

During API requests, NTLM is included by default instead of Bearer in AJAX Calls

On my website, I have encountered a strange issue while using Internet Explorer. The website and API are hosted separately - the API has anonymous authentication with token-based authorization, while the MVC website uses Windows authentication. Most of the ...

ajaxinternet-explorerauthorizationntlmbearer-token

Managing browser cache while developing locally

During development testing, how can you selectively disable caching for local scripts and styles while keeping cache enabled for external ones? Ideally in Firefox. When editing css, js, or sprite files on my developmental site, I find myself needing to fr ...

javascripthtmlfirefoxcachingmaps

Which is more effective: coding with just plain JavaScript and CSS, or utilizing frameworks?

As a student, is it more beneficial to focus on utilizing pure JavaScript & CSS or frameworks? And which approach is best suited for the professional field? ...

javascriptcssframeworks

What causes my CSS styles to vanish upon refreshing the page in Next.js?

After setting up a CSS folder within my app directory and importing the files into components for use, I noticed that the styles are applied initially. However, upon refreshing the page, they all disappear. I attempted to resolve this issue by going back ...

cssnext.jsjsxrefresh

Help display tooltips for ASP.NET resources using the resx string

Within my resource file, I have a string labeled Mini-move.Help. This string should be displayed each time a user clicks on the help image provided. NOTE: The help image is loaded dynamically when .HELP is added to the resource string. I am looking to cu ...

javascriptasp.netcssajaxresources

Using Node JS to serve an HTML file along with cascading style sheets

As I delve into pure node.js, I encountered an issue related to the HTTP protocol. After spending hours searching and testing my code, I finally managed to serve my HTML page with CSS successfully. Take a look at my code snippet below: const server = http ...

htmlcssnode.jshttp

Incorrect Alignment of Centered Boxes with CSS

I'm having trouble creating centered boxes with CSS. Currently, I have the following code: http://jsfiddle.net/LW7mN/2/ .trex-clear-all{ display: inline-block; width: 99%; height: 17px; font-size: 12px !important; text-align: -w ...

htmlcss

How to give a stylish touch to your :after element with a css

I have a unique bubble design that pops up when hovering. I'm trying to add a border around the bubble, but I'm facing difficulty adding a border to the pointer of the bubble. The arrow is created using the .bubble:after selector. You can check ...

htmlcsscss-position

Is it possible to choose tags from a different webpage?

Imagine you have a page named a.html which contains all the jQuery code, and another page called b.html that only includes HTML tags. Is it feasible to achieve something like this: alert( $('a').fromhref('b.html').html() ); In essence ...

javascriptjqueryhtml

Invoke JavaScript when the close button 'X' on the JQuery popup is clicked

I am implementing a Jquery pop up in my code: <script type="text/javascript"> function showAccessDialog() { var modal_dialog = $("#modal_dialog"); modal_dialog.dialog ( { title: "Access Lev ...

javascriptjqueryhtmlasp.net

I'm struggling to concentrate and unable to type in the email field

Today while working on a website, I encountered something strange. In the footer section of the site, there is a quick contact form. However, I noticed that in Firefox, I am unable to focus on the email field. Surprisingly, this issue does not occur in Chr ...

javascriptcssdrupaldrupal-7drupal-webform