Tips for adjusting this CSS to be compatible with Internet Explorer

This CSS code I have was created specifically for Firefox compatibility.

/* Green header */
.container {
    background: linear-gradient(#5FA309, #3B8018);
    position: relative;
    display: inline-block;
    padding: 0 20px 0 10px;
    width: 270px;
    line-height: 20px;
    font-size: 12px;
    font-family: sans-serif;
    text-shadow: 0 1px 0 #264400;
    font-weight: bold;
    color: #fff;
}

.container:after {
    content: '';
    background: linear-gradient(top left, #5FA309, #3B8018);
    background: -webkit-gradient(linear, left top, left bottom, from(#5FA309), to(#3B8018));
    background: -moz-linear-gradient(top left,  #5FA309,  #3B8018);
    position: absolute;
    top: 3px; right: -7px;
    width: 15px;
    height: 15px;
    transform: rotate(45deg);
}

I am looking for a way to make this code compatible with Internet Explorer as well. Is there a way to achieve this using only CSS without relying on images?

css

Answer №1

Take note of the inclusion of the -ms- vendor prefix and the specific sequence in which vendor prefixes are arranged:

.container{
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #5fa309), color-stop(1, #3b8018));
    background:-webkit-linear-gradient(top, #5fa309 0%, #3b8018 100%);
    background:-moz-linear-gradient(top, #5fa309 0%, #3b8018 100%);
    background:-o-linear-gradient(top, #5fa309 0%, #3b8018 100%);
    background:-ms-linear-gradient(top, #5fa309 0%, #3b8018 100%);
    background:linear-gradient(top, #5fa309 0%, #3b8018 100%);
    position:relative;
    display:inline-block;
    padding:0 20px 0 10px;
    width:270px;
    line-height:20px;
    font-size:12px;
    font-family:sans-serif;
    text-shadow:0 1px 0 #264400;
    font-weight:bold;
    color:#fff
}
.container:after{
    content:'';
    background:-webkit-gradient(linear, left top, right bottom, color-stop(0, #5fa309), color-stop(1, #3b8018));
    background:-webkit-linear-gradient(top left, #5fa309 0%, #3b8018 100%);
    background:-moz-linear-gradient(top left, #5fa309 0%, #3b8018 100%);
    background:-o-linear-gradient(top left, #5fa309 0%, #3b8018 100%);
    background:-ms-linear-gradient(top left, #5fa309 0%, #3b8018 100%);
    background:linear-gradient(top left, #5fa309 0%, #3b8018 100%);
    position:absolute;
    top:3px;
    right:-7px;
    width:15px;
    height:15px;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg)
}

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

When I try to expand the width of a div, the display property set to inline

Visit my website At the moment, my website features the following code snippet: <div class="main-sale"> <div class="time-left">Sale Ends in: </div> <div class="sale-item"> //Highlighted Sale it ...

jqueryhtmlcss

Is it possible for a navbar in CSS to collapse based on its width?

At the moment, I am utilizing Bootstrap v3.3.6 and jQuery v1.9.1. My current project involves a horizontal navbar that collapses once it reaches a specific screen resolution. I am pleased with how this feature operates and wish to maintain the same breakpo ...

htmlcsstwitter-bootstrap

What is the best way to access all of a class's properties in JavaScript?

Is there a way to retrieve all the properties of a class using JavaScript? For example, if I have a class like this: .menu { color: black; width: 10px; } How can I extract "color: black; width: 10px;" as a string using JavaScript? Thanks in advance! ...

javascriptjquerycsspropertiesstyles

Guide to creating a scrollable container that occupies the remaining height of the screen

Looking to create a fixed container that is scrollable, while keeping the rest of the page fixed? Check out this Stackblitz example. Here's a component called "PageDefault" that includes a Header and wraps each page in the application (the content of ...

cssreactjssass

Why doesn't jQuery UI's addClass method animate visibility like it should?

One of the advantageous features of jQuery UI is its enhancement of the jQuery addClass method, which enables animation by including a second parameter for 'duration', as shown below: $('div').addClass('someclass', 1000); Th ...

cssjquery-ui

Exploring Material UI: Step-by-step guide to customizing component styles

After reviewing the documentation, I have discovered two ways to style the component: import * as React from 'react'; import { makeStyles } from '@mui/styles'; import Button from '@mui/material/Button'; const useStyles = make ...

htmlcssreactjsmaterial-uimern

Leveraging font awesome ttf in conjunction with scss

I am currently attempting to incorporate Font Awesome with SCSS. @font-face { font-family: 'awesome'; src: url('../../fonts/font-awesome/fa-light-300.ttf') format('ttf'); } Although the path appears to be correct, I am ...

csssassfont-awesome

Creating a default menu within a specific route in Ember.js is a crucial step in

I have created a JSBin code for my Ember.js application which can be found here: When I click on Item A, I want the ABCD menu on the left to remain visible and not disappear. Thank you. ...

javascriptjquerycssember.js

"I'm facing an issue with aligning elements in my ReactJS application using CSS Flexbox. Despite setting up a flexbox layout, I am unable to

Despite setting up a flexbox to align my elements, I am struggling with vertical centering on my page. I have made sure to use a container for the page and set brute size with viewport units. Here is my sandbox: https://codesandbox.io/s/rlk3j68pmq. Belo ...

cssreactjsflexbox

What are the placeholders for the "localIdentName" query tag in a custom CSS-loader for Webpack?

Just starting out with Webpack and experimenting with the css-loader. I came across the option to specify a localIdentName query tag on the Github page under "Local Scope". This tag allows us to define our own custom values for how classes should be named ...

javascriptcsswebpackloader

Using padding and float properties in the a tag of HTML does not result in the expected behavior

I am attempting to display the menu in a left-to-right fashion, however I am encountering issues with using padding and float in HTML. Here is my current code: .main-nav ul li a { padding-right: 15px; float: left; } <div class="main-nav"> &l ...

htmlcss

When the cursor is placed over it, a new div is layered on top of an existing

Currently, I am working on a project with thumbnails that animate upon hovering using jQuery. One of the challenges I have encountered is adding a nested div inside the current div being hovered over. This nested div should have a background color with som ...

jquerycsshoveraddclass

alignment not behaving as anticipated

My goal is to position two elements on different sides within a container. Although in my coding scenario, these elements are meant to be on opposite ends of a div, for the sake of explanation, let's consider them being on opposite sides of the browse ...

htmlcsshtml-tabletext-alignment

What could be causing the flex item to be wider than its container?

One issue that can arise when utilizing flexbox is the scenario where, as demonstrated below, the content exceeds the width of the viewport causing the flexbox items to become wider than their container. What are the factors contributing to this situat ...

cssflexbox

Unable to navigate a simulated scrollbar

As someone who is new to web development, I am embarking on the journey of building a UI Grid that can effectively display a large amount of data. My goal is to implement a scrollbar that allows for horizontal scrolling across approximately 1,000,000 data ...

javascripthtmlcssweb

I am looking to create a feature for my table that adjusts its color scheme based on whether the number is odd or even

My current code is designed to change the background color of td elements for odd and even rows. However, when a new high score is entered, a new td is added but it does not get colored automatically as intended. I am facing an issue where the code is not ...

htmlcss

What is the best way to align a logo in a log-in screen?

I am having an issue with centering the logo on my login form. The "signin" text is centered perfectly, but the logo always stays at the top left corner. I don't understand why the logo is not centered. If anyone has a solution to propose, I would gre ...

css

Surprising CSS overflow error

Recently, I've encountered a CSS overflow issue while working on a responsive webpage. The problem seems to be stemming from the navigation menu. The declaration of "overflow-x: hidden" is specifically causing the trouble... Initially, I suspected i ...

cssmobileoverflowresponsive

Firefoxy can't seem to get through the navigation keys within an element that has a hidden

Check out this fiddle I created: http://jsfiddle.net/c11khcak/13/. My goal is to hide the scrollbar of an element while still allowing it to be scrollable using the mouse wheel and up/down navigation keys. I've been able to achieve this using some bas ...

htmlcssfirefoxscroll

Explore a variety of themes for the antd design token

Is there a way to access the text color of both the default and dark themes using design tokens? I am looking for a method to seamlessly switch between the two color schemes based on specific conditions, without having to change the entire theme. For ins ...

cssreactjsreact-hooksthemesantd