Home/ Questions/Q 3876844
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T22:25:45+00:00

I’m trying to use CSS sprites to reduce the number of HTTP requests on

  • 0

I’m trying to use CSS sprites to reduce the number of HTTP requests on page. I want the these images to render without borders.

As best I can tell I have configured the CSS correctly, yet I am experiencing the render issues below (note: The Google logo is intentionally clipped):

As you can see, all the browsers still render a border. Also, IE and FireFox render ‘broken link’ type icons as well.

The HTML used in this example is:

<html>
  <head>
    <style>
      img {border:none}
      img.css_sprite { background:url("http://www.google.com/images/nav_logo29.png") -20px -10px; height:24px;  width:100px; border:none;}
    </style>
  </head>
  <body>
    <img class="css_sprite"/>
  </body>
</html>

Can anyone tell me what I’m doing wrong here? I’m sure it must be something simple. Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The border belongs to this:

    <img class="css_sprite"/>

    It’s a border drawn by the browsers due to a missing image. Here you don’t specify any src so the browsers add the border and missing image graphic instead.

    Change the img to some other element instead like div or span instead.

    • 0