Internet Explorer is unable to recognize the .less file format

I have created a less file that works perfectly in Chrome and Firefox, but it is not being recognized in IE 9. Does anyone have suggestions on how to make it run in IE 9.0? Below is a sample of the CSS code:

@import "../core/variables.less"; @import "Mixins.less";

.classname {

    @fontweight:bold;
    @width:99.9%;
    @height:67px;
    @color:#D3E2F2;
    @icon-width:10px;
    @icon-height:10px;

    .div-carddropdownbox{
             width:90%;
        }
    .span(@fontweight)
    {
        font-weight:@fontweight;
    }
     .span-underline(){
            .span(bold);
            text-decoration:underline;
        }
     .span-bold{
           .span(bold);
            text-decoration:none;
            font-size: 15px;
        }

    .div(@width,@height)
    {
        float:left;
        width:@width;
        height:@height;  
        padding-top: 10px;  
        padding-bottom: 10px;  
    }
    .div-tracethistransaction
    {
        .div(100%,100%);
        border:1px solid black; 
    }
    .div-servicerequestcharge{
           .div(99.9%,67px);    
            background-color:@color;
            border:1px solid black;
    }
    .div-account
    {
            .div(99.9%,35px);    
            background-color:@color;

    }
    .div-white-blank
    {
         .div(99.9%,2px);
    }
    .div-button
    {
        padding-top:110px;
    }
    .div-carddelivered
    {
        .div(100%,45px); 

    }

    .icon(@icon-width,@icon-height)
    {
            width:@icon-width;
            height:@icon-height;
    }
    .div-icon
    {
        .icon(20px,20px);
        padding-left: 580px;
    }

    .round-button-cancel {
        .rounded-button (7px, #ECECEC, #A9A9A9,none, bold, #52504C,
90px, 35px);
    }

    .round-button-submit {
        .rounded-button (7px, #FAF5E9, #EFAE2C,none, bold, #8B4513,
Auto, 35px);
    }

} 

Answer №1

Visit the official LESS website for information on browser compatibility. Unfortunately, it does not offer support for Internet Explorer across any of its versions.

Answer №2

Ensure that you have included the necessary less.js script in your project to correctly parse less files.

For .NET projects, if you prefer not to use less.js (especially for larger .less files which may cause client-side overhead), consider integrating the DotLess library instead.

Answer №3

The problem I encountered was similar. My solution was to compile it into a .css file and use that for testing, even in Internet Explorer.

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

Height not being generated by Div element

I am encountering an issue with a div element that contains an h2 and three nested div elements. Despite not explicitly setting a height for the container div, it is not expanding to accommodate the varying heights of the inner divs. This problem is causin ...

Conceal all div elements except for displaying the initial two

Can an entire div be hidden with only the first 2 entities visible? <div class="inline-edit-col"> <span class="title inline-edit-categories-label">Brands</span> <ul class="cat-checklist product_brand-checklist"> < ...

Personalize the pagination or other elements of Splide in a Svelte component to suit your needs

I am currently integrating Splide into my Svelte application and facing an issue with the pagination styling. The pagination is appearing on top of my images and is too transparent for my liking. I'm utilizing Svelte Splide to incorporate this library ...

Adjust the CSS styling to ensure that the div or iframe expands to fit the entire height of the

Having trouble making a map embedded via an iframe on a WordPress page display responsively at full height independent of the device? Check out: . To clarify, by full height, I mean that the bottom of the map should not extend beyond the screen, eliminati ...

CSS Positioning: the container is not the right size for its content dimensions

Code Snippet: <div content> <div post> <div post> ... </div> Styling: .post { margin: 0; padding: 110px 20px 20px; float: left; width: 560px; position: relative; display: block; } #content { display ...

Creating a Bootstrap 4 DIV element with horizontal scrolling functionality

I've been struggling to implement a horizontal scroll for a DIV on my site, but none of the common solutions like overflow-x or white-space:nowrap are working for me. This is the section of my website where I need a horizontal scroll bar If you want ...

Adjust the color of additional SVG paths upon hovering

I have the following code snippet. .icon {stroke-width: 0; stroke: currentColor; fill: currentColor;} a {color: red} a:hover {color: pink} a:hover circle {fill: green !important; color: orange} a:hover path {fill: blue !important} <a href=""> ...

Using CSS to duplicate images in multiple repetitions horizontally

In the process of developing a UHD project that involves showcasing large images, I have encountered limitations with iOS and certain mobile browsers. While stationary browsers pose no issue, iOS only supports PNG images up to 5 megapixels in resolution, w ...

Troubleshooting issue with Bootstrap slider: CSS display problem

After downloading the Bootstrap slider from this link: https://github.com/seiyria/bootstrap-slider, I navigated to \bootstrap-slider-master\dist and transferred the bootstrap-slider.js and bootstrap-slider.min.js files to my js folder. Additional ...

Personalize the layout for vertical table headings and table information

I need help with a table that has vertical headers. I want to remove the extra space within the table header and data cells. Here is the code for my table: <table> <tr> <th class="field">Item ID Number:</th> < ...

What is the best way to position a title at the bottom center of each image within my grid gallery?

I'm struggling to find a way to position a title at the bottom of each image in my grid gallery, right in the center of the photo with a light-gray background. I want the text to be fully visible regardless of the image used. Currently, I can only put ...

What is the best way to center text vertically in a <div> using CSS?

This is my first attempt at creating a chrome extension, and I am currently working on centering text. Right now, I am using text-align: centre; to align the text horizontally, but I am struggling to figure out how to align it vertically. As a result, my t ...

Is it possible to include jQuery's selectors contain and closest within my CSS selector?

I created a script to hide specific table rows as follows: $('.ms-formtable nobr:contains("Question")').closest('tr').hide(); However, I'm unsure if there is a way to achieve the same result using only CSS. Can anyone provide adv ...

Display the HTML/CSS layout following the JavaScript window.open action

Encountering issues with printing output in an opened window using JavaScript. I'm creating a new document through window.open and including CDN links to Bootstrap files. While everything appears fine in the opened window, when attempting to print (XP ...

The anchor tag dwarfs the element it contains

I'm experiencing an issue on my website where the clickable area of my two images/buttons, labeled Get Started and Learn More, is larger than the actual image itself. I've wrapped the images with anchor tags to link to separate pages, but for som ...

Make sure to load the <img> html tag before implementing js masonry for optimal

I am facing an issue with jQuery Masonry as it arranges my 'bricks' immediately without waiting for images to load in. Additionally, I need the images to be responsive so I cannot define their height and width like this: <img src="asas" heigh ...

Knockout text binding does not automatically update the width

Recently, I encountered a bug in an ongoing project where the user name was appearing within another element until hovered over with a cursor. Upon further investigation, I discovered that this issue stemmed from the project's usage of Knockout.js. I ...

Instructions on triggering a pop-up modal from a separate HTML document to the index page

I am trying to open a form in a Modal using a button. However, the Modal is located in a separate .html file. How can I use JavaScript to call the form from that external html file into my index.html file? Currently, I am able to call the Modal within the ...

How can I prevent tinymce from stripping out my <link> tag?

I'm having an issue with tinymce. dd<script id="kot-id" src="***insert link here***"></script><div id="kotcalculator"></div><link rel="stylesheet" href="***insert link here***" type="text/css" media="screen" /> It seems ...

I'm having trouble with the colors not displaying correctly on my NextJS Tailwind navbar

I've encountered an issue with my navbar where none of the specified colors are being displayed. The code snippet for the navbar is as follows: Codes: 'use client' import Head from 'next/head'; import Link from 'next/link&apo ...