Sprites and padding don't go together

Hi

I decided to make sprites of my images in one of the pages. The images were inside a border with 2px padding between the image and the border. I am unable to replicate that and while googling found out that images and padding don’t go together, and that one of the answers is to use span instead of div.

I am ashemed to admit that I don’t really know how to go about changing the code, specially in the css.

The test page is at http://pintotours.net/Work/Barca.html

To see what it should look like http://pintotours.net/Europe/Spain/Barcelona.html

Thanks

Sprites aren’t good for this sort of imagery - they’re better for things like menus, icons, etc.That being said, if you can’t change them back to regular images you can get pretty close by adding overflow: hidden; to .hotels on line 591 of Barca.css and decreasing the width down to 205, so something like this:

.hotels {
	position: relative;
	float: left;
	width: 205px;
	height: 158px;
	margin: 0 20px 7px 4px;
	background-color: #fff;
	cursor: text;
	overflow: hidden;
}

Hi labofoz

Thank you. Before I go ahead. let me say that the in the current published page the images are all separate but as there are 32 going onto 35 I thought it might speed things up if there was only one request for the lot.

Please have a look at http://pintotours.net/Europe/Spain/Barcelona.html and let me know what you think I should do.

I would definitely keep them separate for several reasons:

  • You need to constantly edit the one image vs just uploading a new one (ie, it doesn’t scale well)
    • What would you do in the future if you decide you want different size ratios?
    • What would happen if you need to paginate in the future?
  • Technically your page downloads a few dozen milliseconds sooner but it now has to download one gigantic image vs multiple smaller, concurrent images. This will make the page seem to download slower.
  • If you ever need to paginate, you’ll run into redundancy where you’re loading major parts of the spritesheet that don’t need to be

Something to think about.

Thanks

You like making things hard for yourself don’t you :smile:

All those images are the same size yet you have created unique classes for them all and are therefore defining their widths and height over and over again. If instead you used a common class on all of them you would need one class to define everything about them including the image. Then all you need is one extra class on each item to define the background -position:only. This will save hundreds of lines of code.

e.g.

.common {
  background: url("sprites.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  width:200px;
    height:150px;
    border: 2px double #6495ed;
  float: left;
  margin:0 20px 7px 4px;
  padding: 2px;
}
.MeliaRoom2{background-position:-199px 0}
.CrowneBcn{background-position:-401px -450px}
etc...

Then you give the div a class of .common plus the unique class.

Note that when you make sprites you must leave at least a 5px gap around each sprite in the image because of rounding errors when zoom is used. Otherwise when zoomed the image may show a few pixels of the image next to it. IE is particularly bad at this.

As already mentioned though you generally would not create sprites for images like that as you make it to hard to manage. Sprites are best used when you have hundreds of little icons and they can all fit into one reasonable sized sprite. The reason for using sprites is that it saves on http requests and for small icons the http request is the thing that causes the most delay and not the size of the sprite so having one http request instead of a hundred is a big saving. For larger images the benefits are not so great because the size of the image is many times greater than the http request delay.

Seeing as you have already coded the page you can get over the problem by applying the image using the :after element (ie8+).

If you use this (extra) code it will apply your image inside the padding and border.

.MeliaRoom2{
background:none;
position:relative;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.MeliaRoom2:after{
content:"";
position:absolute;
left:3px;
right:3px;
bottom:3px;
top:3px;
background:red;/* apply the image here instead of red*/
}

Of course the same applies for the above code and you should use a common classname for the things that are the same and just specify the background-position in the specific named rule for that item.

That doesn’t make any sense in regards to this situation as you would use a span or a div depending on the structure of the html and not some requirement of the appearance. CSS doesn’t care if you use a span or a div because you can change its display to do whatever you want.

Html on the other hand cares very much what you use and where you use it. A div is a block element and a span is an inline element and they have html rules that they must abide by. CSS doesn’t care and a span can be styled to act the same as a div and vice-versa so you never make a choice about what html element to use based on how you want it to look. You choose html tags based on the content and structure not on the appearance :smile:

2 Likes

Paul, I really appreciate the trouble you took to write the above. The css was generated automatically when I made the sprite with SpritePad.

The page I am working on was supposed to replace the existing one (sprite instead of single images) but after the advice above I am rethinking and mayb I will leave things as they are. My understanding is that the Barcelona page, which is the largest in image content that I have loads pretty fast anyway.

I will be doing the changes you proposed to the test page for the sake of learning something, anyway

As for the span v div I read it in http://stackoverflow.com/questions/15237140/css-sprites-inside-padded-elements

Shhhh… sorry… I shoudn’t mention the competition!

Yes they are all tripping over themselves with mis-information there :slight_smile: Divs are allowed inside lists and they are also allowed inside anchors in html5. The sprite issue has nothing to do with the tag :smile:

Ah ok :slight_smile: Someone should tell them its bad to have the sprites tightly packed.
:wink:

Yes I think normal images are best for that section and easier to manage. It was still a worthwhile exercise for you to think about anyway.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.