CODEWITHSUNDEEP
htmlcsscss-sprites
Chris Lacy
Chris Lacy

Reputation: 4462

Border renders when using CSS Sprites

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.

Upvotes: 1

Views: 2190

Answers (2)

sankha
sankha

Reputation: 1

I found an excellent solution just put a blank transparent image (preferably 1x1 png) within the src elements...:) as the image is transparent it will not visible at all src does not go blank and your purpose is solved...

Upvotes: 0

BoltClock
BoltClock

Reputation: 724162

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.

Upvotes: 6

Related Questions