Internet Explorer 7 does not display icons

When I look at my icon, I'm calling it like this:

<td>
 <i id="sthAdd" class="icn_plus"></i>
</td>

and the class looks like this:

.icn_plus {
  background: url(../images/icons/plus-14x14.png) no-repeat;
  width: 20px;
  height: 20px !important;
  cursor: pointer;
  border: none;
  padding-left: 20px !important;
}

This works in Chrome and IE8, but not in IE7. I've tried different configurations like separating the URL and background repeat, changing the URL by removing the first "/", but it still doesn't work.

What's strange is that at the same time and in the same view, this code works:

<td>
  <input value=" " class="btn_left" />
</td>

and the class for that is:

.btn_left { 
  background: url(../images/campaign/Ok1.png) no-repeat;    
  width: 20px;  
  height: 30px; 
  border: none; 
  cursor: pointer;
  outline: none;
}

I can't figure out what I'm missing. Thank you in advance.

Answer №1

<i> signifies a tag that appears inline. Consider this example:

.icn_plus {
    display: block;
    // you can also use
    display: inline-block;
    background: url(../images/icons/plus-14x14.png) no-repeat;
    width: 20px;
    height: 20px !important;
    cursor: pointer;
    border: none;
    padding-left: 20px !important;
}

Answer №2

Appreciate the help,

I managed to resolve it by updating how it is used:

<td>
    <a class="button" id="addToCart">
         <img src="../images/plus-icon.png" />
    </a>
</td>

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

Utilizing SASS, JavaScript, and HTML for seamless development with Browser Sync for live syncing and

I've been on a quest to find a solution that covers the following requirements: Convert SASS to CSS Post-process CSS Minify CSS Move it to a different location Bundle all Javascript into one file Create compatibility for older browsers Tre ...

Why does appending to a TextArea field fail in one scenario but succeed in another when using Javascript?

There is a JavaScript function that captures the value from a select dropdown and appends it to the end of a textarea field (mask) whenever a new selection is made. function addToEditMask(select, mask) { var selectedValue = document.getElementById(sel ...

Retrieve the identification number from the specific row chosen in the table

Having some issues with retrieving the correct ID from the selected table row in Datatable. The alert I'm using to check the output of the JS script always shows the same ID, regardless of how many rows are in the table list. Each row has a different ...

Tips for saving the JSON data from a directive so it can be accessed on a different HTML page using Angular

One of my requirements is to retrieve data from an Excel file located anywhere and display it on a separate HTML page. Initially, I managed to display data from multiple sheets on the same page. Now, however, I need to select the file on the first page and ...

Showing a loading animation inside an HTML element

I have a main webpage that contains several buttons. Each button, when clicked, loads a specific target page as an object within a div on the main page. The "target" refers to the page that will be displayed within the object. <script> .... chec ...

Utilizing Laravel 5.2 to showcase a video

I am currently developing in Laravel 5.2 and facing an issue with displaying a video on my view page. While I can successfully store the video in my database table, I am encountering difficulties when trying to fetch and display it. In my database table, I ...

Dynamically Loading External JavaScript Files Depending on User Input

Looking for guidance on how to dynamically load a single javascript file out of several options based on user input in an HTML code. Any suggestions on how to achieve this task? Thank you! ...

The hover state of a div will not be lost if its parent element is not being hovered over

When hovering over the second, third, or fourth item, hidden text will appear on the left side. If you hover your cursor over the hidden text, it will disappear again. I want to be able to hover over the second item, move my cursor to "hide", and click o ...

Django is looking for a primary key that I do not possess

Encountering an issue: invalid literal for int() with base 10: 'ljrh' This error occurs when attempting to add a new entry in a model: day = itemize(value, getday(strip(key))) add = Reoccurring(request.user.username, strip(day.Day), strip(day. ...

Tips for Creating Sand Text Effects in CSS (Using Text-Shadow)

I am attempting to create a CSS effect that resembles text written in the sand. Here is an example of what I am trying to achieve: As a newcomer to CSS, I would appreciate any guidance on how to make this effect possible. I have tried using the following ...

The labels in production are getting cut off when creating a view in ASP .NET MVC

Upon viewing a Create View on my PC, I noticed that the main form and labels are adequately spaced: However, once the website is deployed to IIS and accessed on the same PC with the same browser, everything appears cramped in a smaller space. Is there a s ...

I am having trouble with Popover and Tooltip not functioning properly in my browser

Today, I spent countless hours trying to implement popovers in my table to display additional information for each cell. However, I eventually discovered that the popovers do not seem to be functioning at all in my code. What could be causing this issue? D ...

Steps for incorporating error messages in jQuery Validator:1. Begin by including the

I am currently facing an issue with displaying error messages on my "contact me" form. Although I have successfully implemented validation, I am struggling to comprehend how the errorPlacement function should be utilized. Could someone provide me with a ...

Stop Gulp Inline CSS from enclosing HTML content within html and body elements

I need to work on a piece of HTML that I plan to copy and paste directly into an existing document. Here is the code snippet: <div id="someDiv"> </div> <script src="js/someScript.js" inline></script> <style> div#someDiv { ...

Conflict between jquery and hoverIntent libraries

I've encountered an issue with a website that was functioning properly until we added a new form to a specific page. The form, created by another person, utilizes javascript/jQuery for processing. Since adding this form, it has caused the majority of ...

Creating a dynamic hover drop-down navigation bar in ASP.NET

After successfully creating a navigation bar with hover effects, I am now looking to implement a dropdown list when hovering over the items. Can anyone provide guidance on how to achieve this? Below is the current code snippet I am working with: <ul c ...

Show the center portion of an image without needing to know the size, both horizontally and vertically aligned

I have experimented with various methods like table-cell, but none of them have been successful. All I am seeking is an <img src="" /> within an <a> tag. The <a> element has specific width, height, and overflow:hidden properties set. H ...

Adjust the positioning of divs to account for changes in scale caused

I have 3 div blocks arranged on a web page, with the first one bigger and located on the left side while the other two smaller ones are positioned on the right side. I want their relative positioning to remain fixed across all browsers and zoom levels. Cur ...

After the form is successfully submitted, you can remove the required attribute

Upon clicking the submit button of a form, an input box is highlighted with a red border if empty. After successful jQuery AJAX form submission, a message "data submitted" is displayed and the form is reset causing all input fields to be highlighted in red ...

Having an issue with displaying the country name and country code in a table using the Angular7 custom pipe

country code: "ab", "aa", "fr", ... I need to create a custom pipe that will convert a countryCode into a countryName, such as: "ab" → "Abkhazian", "ch" → "Chinese", "fr" ...