Incorporating CSS sprites within an <img> element

I have a sprite that contains various logos. I am trying to extract a specific logo using the following css

.prog_logo { background-image:url('../../image/sprite_logo.png'); }
.prog_logo_prime { background-position:0px -81px; width:52px; height:51px; }

In my aspx file, I insert an image like this

<asp:Image ID="imgLogo" CssClass="prog_logo prog_logo_prime" runat="server" />

Challenges

  • Issue with Opera browser

It works perfectly.

  • Problem in Chrome

A white border is visible.

  • Trouble with IE 9

The sprite appears with an unwanted white border.

  • Error in FF

The image doesn't show up at all. Please see comments for more details


How can I resolve these issues across all browsers?

Answer №1

Have you considered incorporating the style border:none into the CSS?

.brand_icon { background-image:url('../../image/sprite_logo.png'); border:none; }

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

Is it possible to remove the parent element using CSS?

Is there a method to remove the parent element while retaining the current element? Take a look at my example here: <div id="parent"> <div id="child"> <span>some text</span> </div> </div> div { ...

Showcasing top performers via JavaScript tabs

I have two tabs on my webpage: "Overall Leaderboard" and "Weekly Leaderboard". Each tab displays a leaderboard with different scores. When I click on the "Overall Leaderboard" tab, it shows a leaderboard with specific scores. Now, my question is how can ...

Dynamic divs to occupy the rest of the available vertical area

I have been experimenting with a new website layout and created a form setup. However, I am facing an issue with the fluidity of the layout. While the items are floating into position, there is a problem where if the item on the right is 400px bigger than ...

The parent's height remains unaffected by the margins of its child element

My code snippet is concise: .parent{ box-sizing: border-box; } .child{ height: 100px; margin: 20px; background: red; } .a1{ background: green; } <!DOCTYPE html> <html> <head> </head> <body> ...

Issue with toggling behavior of dynamically generated <div> using jQuery

My issue involves managing the behavior of dynamically generated <div> elements on my webpage. I am struggling to control these elements as intended. I have implemented an onclick Toggle function to show/hide the div Panel. However, since all the dyn ...

Utilizing Bootstrap to Showcase a Form

I am facing some confusion. In my MVC5 project, I am trying to display a form with 4 input fields. The display looks perfect without using the @using (HTML.BeginForm(...) statement. @using(Html.BeginForm("Create", "HR", FormMethod.Post)) { When the @ ...

Animating the fixed location with CSS and JQuery

I'm attempting to create a seamless transition from one form field type to another. However, when I add another <input> element, the following elements do not animate into their static positions. $("#switchlogin").click(function() { //Creat ...

Alignment of Bootstrap input groups and buttons

I am looking to have the input group aligned on the left side and the "Add New" button aligned on the right side of the row. <div class="row"> <div class="input-group col-sm-6"> <input type="text" class="form-control" placehol ...

Bootstrap datepicker and timepicker icons are misaligned

While working on a Date Picker and Time picker in Bootstrap 4 with bootstrap-datepicker.js and bootstrap-timepicker.js, I encountered an issue. The calendar and time icon are not displaying correctly; they should be inside the input button but instead appe ...

What criteria need to be met for height: 100% to be displayed correctly?

Although I haven't had the need to use this often, there are times when it proves to be useful... when it decides to cooperate. It's interesting how sometimes the height: 100%; code works perfectly, while other times it seems to fail. It leaves ...

How come the overlay only appears the first time the button is clicked in JQUERY? What could be the issue here?

Why is my purple overlay with yellow text showing only once after the button is clicked, even though I have toggled the function? Check out my codepen to test the issue: https://codepen.io/cat999/project/editor/AEeEdg $('.animate-this').cl ...

Tips for setting up nextjs with typescript to utilize sass and nextjs font styles

I am attempting to configure a Next.js TypeScript app to work with Sass and a font in Next.js. I have been following the steps outlined in this article. Without the font module, styles are working correctly. Below is my next.config.js without the font co ...

How can I apply bold styling to primary nodes in jsTree using CSS?

I am currently utilizing the in conjunction with asp.net mvc. My objective is to apply bold styling to the text using CSS within the main nodes, specifically those with arrows (refer to the image below). https://i.sstatic.net/xg3uF.png Below is the code ...

Resolving the 'unexpected token u' error in ASP.NET MVC

Having some trouble implementing autocomplete in my asp.net mvc 4 project. I keep getting an error: unexpected token u. From what I understand, it means there's an unidentified object but I'm not sure how to fix it. Any suggestions? <link rel ...

Sending individuals from a single webpage to another location

One of my website pages retrieves all its content from a database. The current URL is www.mysite.com/List/Oct/DisplayPost.aspx?id=120 Now I need to redirect this page to: www.mysite.com/List/Oct/DisplayPost.aspx?id=150 Is this possible and what are the ...

When transitioning to mobile size, I aim to maintain the consistent design of my background-color circle using Bootstrap 5

I am working on creating a card design with a colored background instead of an image. However, I am facing an issue where the rounded-circle background color changes to an ellipsoid shape after passing the mobile size (sm or xs). Here is what I am aiming ...

The Angular overlay is concealed beneath the pinned header

I am seeking a solution to have a mat-spinner displayed on top of my app while it is in the loading state. Currently, I am using an overlay component with Overlay from @angular/cdk/overlay. The issue arises when part of the spinner that should be overlai ...

"Reduce the height of the navigation bar when the user scrolls down the webpage

I am having an issue with my fixed navigation bar created using bootstrap 4. I want to reduce the height of the navbar as I scroll down the page, but it does not seem to be working. Here is a link to a video showing the problem in action: Link to the vide ...

implementing a button's decrease and increase functionality in JavaScript

Whenever the button is clicked, it changes its color to red. Additionally, a counter increments with each click. However, I want the counter to be dynamic so that when the button is unclicked, the counter decreases as well. Unfortunately, I am facing diffi ...

What is the best way to trim the edge of a container without causing the contents to spill over?

A request has come in from a client asking for a unique image slider that is quadrilateral in shape, but not rectangular. The slider should only occupy half of the page and should not overlap the content on the right side. An example of what is needed can ...