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

Ways to relocate the menu within the confines of the "menu border"

Is it possible to move the menu inside the border on this webpage? I am new to web design and was thinking of using position:absolute for the links. Should I also move the submenu along with it? Any suggestions on how to achieve this? Thank you! The goal ...

htmlcssmenuposition

@keyframes shimmering-fade

I'm attempting to create a text animation effect (please see video) but I'm struggling to find the solution!! Can someone assist me with this? Should I use JavaScript for a better result? h1.fadeinone { animation: fadeinone 10s;} h1.fadeintwo ...

javascriptjqueryhtmlcsscss-animations

What are the best techniques for styling the aria label element in HTML?

Looking to enhance the appearance of a button label upon hover. Curious about how I can customize the aria-label element to resemble the design in the screenshot provided below. https://i.sstatic.net/Mjr7q.png ...

htmlcsslabel

The settings of the button return to their default state once it is clicked on

I've been working on a small project and I added a button with hover and CSS effects. However, the issue is that once the button is clicked, it reverts back to its basic state without any of the CSS properties applied. I attempted to troubleshoot if ...

javascripthtmlcss

Exploring the implementation of toggling functionality for nested children within <li> elements using jQuery

Unable to get the toggle function working on child nodes. Can someone assist me with this issue? $(document).ready(function() { $('label.tree-toggler').click(function() { $(this).parent().children('ul.tree').toggle(300); }); ...

javascriptjqueryhtmlcss

What steps should I take to correct the color selection of a button that has been pressed down

Here is the code snippet that I am currently working with: HTTP: <label class="instructions" for="hidden_x"> Insert X: </label> <button type="button" class="button" name="button_x" value="1" id="x_1" onclick="document.getElementById(' ...

javascripthtmlcss

Bootstrap 3 offset doesn't respond to dimensions

Even though I have set an offset for a medium-sized screen, the offset still appears in large screens. Here is a snippet of my HTML code. How can I resolve this issue? <div class="col-lg-6 col-sm-12"> <div class="row"> <div class="co ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Tips for ensuring smaller columns have the same height as their siblings

I'm facing an issue where I have a row with two columns dictating the height, but one of them is shorter than the others. How can I make the shorter column stretch to match the height of the row? This inconsistency in height is causing disruption to ...

css

Is there a way to use CSS to prevent a user from being able to click on a table?

My CSS table appears standard: <table class="form grid"> <thead> <tr> <th>EId</th> <th>Number</th> ...

htmlcss

Tips for effectively displaying elements on a page

After making changes to my css/html code, all the elements within a div are now displayed in a single line instead of appearing as separate <p>contents</p> tags with each on a new line. An example of this issue can be seen here: Dealing with C ...

htmlcss

"Learn the trick to concealing a modal and unveiling a different one with the power of jquery

Whenever I try to open a modal, then click on a div within the modal in order to close it and open another one, I encounter an issue. The problem is that upon closing the first modal and attempting to display the second one, only the background of the seco ...

javascriptjqueryhtmlcsstwitter-bootstrap

Implementing a Slide animation in React

I am currently working on a carousel feature that includes two buttons, Next and Previous. When the user clicks on Next, I want the carousel to slide from left to right, and when they click on Previous, it should slide from right to left. One important not ...

cssreactjscss-animations

Leverage the power of Bootstrap's col-push and col-pull

Here is the code snippet I am currently working with: <div class="col-md-9 col-md-offset-3"> <div class="row> <div class="col-sm-4 col-sm-push-4"></div> <div class="col-sm-8 col-sm-pull-8"></div> </div> ...

csstwitter-bootstrap

Flashing issues when utilizing the Jquery ui slider within an Angular 2 component

I recently incorporated a jquery-ui slider plugin into an angular 2 component and it's been working well overall, but I have encountered an annoying issue. Whenever the slider is used, there is a flickering effect on the screen. Interestingly, when I ...

csshtmljquery-uitypescriptangular

Placing a list item at the beginning of an unordered list in EJS with MongoDB and Node.js using Express

What I've done: I already have knowledge on how to add an LI to UL, but it always goes to the bottom. What I'm trying to achieve: Add an LI to the top so that when my div.todos-wrapper (which has y-oveflow: hidden) hides overflow, the todos you a ...

javascriptcssnode.jsmongodbejs

Looking to clean up unnecessary <b></b> tags from my Wordpress website - how can I do this?

One of my sites is located at . When inspecting the source code through the browser, I noticed the presence of empty tags. Does anyone know why these empty tags are being generated and how they can be removed? I have thoroughly searched through all files ...

javascriptphphtmlcsswordpress

The blur() function does not function properly on IOS devices such as iPad and iPhone

I've attempted using blur() to change the CSS, but it seems that this function is not effective. After researching, I discovered that blur() does not work on IOS devices. Is there an alternative method for removing the position from .body-clip-overflo ...

javascriptcss

What is the best way to conceal the bottom portion of an image?

My image in the header overlaps with the next section's features (image-phone). I've tried changing the position and z-index types. If I crop the image, it's not ideal and difficult to fix ;) How can I structure my image: using a div-class ...

htmlcss

Showing a div element with the power of JavaScript

I want to enhance the accessibility of my website for users who do not have JavaScript enabled. Content that will be visible if the user has JavaScript enabled. Content visible when JavaScript is disabled. By default, DisableJS is set to Display:none; ...

javascriptjquerycss

Split the output into two separate columns in a cshtml file using a foreach

Is there a way to modify my current code so that the output is displayed in two columns instead of one? Would using flex grid be the best approach, or is there another method I should consider? <div class="col-12 box-container"> <div class=" ...

c#htmlcss.net