CSS Images & Borders

[LinusIT]

I am in the process of optimising a site and need some help. I am trying to reduce the number of images using sprites & borders.

I have box that has a header image, background image repeating and a footer image. I would like to replace the content image with borders instead of using a repeating background image.

Here is my code:

.infobox{background-image:url('images/infobox/tp-boxfooter.png');background-repeat:no-repeat;background-position:bottom;margin:0px 0px 0px 0px;padding:0px 0px 10px 0px;}
.infoboxcontents{font-size:10px;margin:0px 0px 0px 1px;padding:11px 5px 5px 5px;background-image:url('images/infobox/tp-boxbody.gif');background-repeat:repeat-y;}
.infoboxheading{font-family:Helvetica,sans-serif;font-size:12px;font-weight:bold;color:#333333;padding:5px 0px 6px 5px;margin:5px 0px 0px 1px;background-image:url('images/infobox/tp-boxheader.png');background-repeat:no-repeat;}

Also, with padding and margins is it better to use margin: 0 0 0 0 or margin: 0. Similar question, if you've got margin: 0 0 0 3; would it be better to use margin-left: 3px.

My last question might be classed as a little anal but when you've got a huge stylesheet, optimising these things could reduce it's file size a far amount.

Thanks

[Fotiman]

I'm not sure if you have a question in the first part of your post. Are you having trouble with something in particular?

With regards to whether it's better to use "margin: 0 0 0 0" or "margin: 0", I would say the latter is always better. I always prefer to use the shortest shorthand method possible, as I find it easier to read and follow.

However, "margin: 0 0 0 3px" is not the same as "margin-left: 3px" because the former defines margins of 0 for all other sides, and the latter omits these. I typically always use the shorthand notation unless I explicitly need to NOT specify margins for one of the preceding values. For example, if I needed to not specify the top margin, but I needed to specify a 3px left margin, then I would use margin-left. But these instances are very rare.

In your code above, you have "0px" for many of the settings. When setting the value to 0, you don't need to include the units, so you could remove those to cut down the size a bit. Also, consider using a tool like the YUI Compressor to strip out whitespace. In other words, keep your file indented and formatted in an easy to read format like this:

.infobox {
  background-image: url('images/infobox/tp-boxfooter.png');
  background-repeat: no-repeat;
  background-position: bottom;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 10px 0px;
}
.infoboxcontents {
  font-size: 10px;
  margin: 0px 0px 0px 1px;
  padding: 11px 5px 5px 5px;
  background-image: url('images/infobox/tp-boxbody.gif');
  background-repeat: repeat-y;
} 
.infoboxheading {
  font-family: Helvetica,sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #333333;
  padding: 5px 0px 6px 5px;
  margin: 5px 0px 0px 1px;
  background-image: url('images/infobox/tp-boxheader.png');
  background-repeat: no-repeat;
}

Then use the compressor to create a minified version of the file to use for production sites. This allows you to more easily work with the file, while still creating lighter CSS files.

[LinusIT]

That makes perfect sense now you've pointed it out. I'll study the code I've got and see if it's necessary to use 0 0 0 3 etc. I wasn't aware that you didn't have to specify units when it's a 0.

My first question is basically asking for help on the borders, sorry. If I remove the background image and use border-left and border-right it doesn't line up correctly and looks awful.

I'm thinking it might be easier and better to setup a test page using the borders to show you, is this the case?

P.S I appreciate your help and time taken to respond in such detail.

[Fotiman]

Yeah, if you can provide a minimal test case, that might help. It's hard to offer advice without knowing anything about the elements being styled. For example, are they block or inline elements? I would assume block, but rather than try to make assumptions (that may be incorrect), a small test case would be more beneficial. :)

[LinusIT]

I have read that links aren't allowed, the only way I can see to make this more unstandable is provide complete CSS and HTML. I'm happy to do this, is this the way forward?

[Fotiman]

If you can provide the minimal code required to demonstrate it, that would be helpful. Here I've taken a first stab at a minimal set, though I don't know if the markup order is correct. I've omitted the style rules that shouldn't be needed in order to demonstrate this (like font settings):

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.infobox {
  background: url('images/infobox/tp-boxfooter.png') no-repeat bottom;
  margin: 0;
  padding: 0 0 10px 0;
}
.infoboxcontents {
  margin: 0 0 0 1px;
  padding: 11px 5px 5px 5px;
  background: url('images/infobox/tp-boxbody.gif') repeat-y;
} 
.infoboxheading {
  padding: 5px 0 6px 5px;
  margin: 5px 0 0 1px;
  background: url('images/infobox/tp-boxheader.png') no-repeat;
}
</style>
<title>Test Case</title>
</head>
<body>
<div class="infobox">
  <div class="infoboxcontent">
    <div class="infoboxheading">
      Heading
    </div>
    Contents
  </div>
  Footer
</div>
</body>
</html>

Maybe you could start with this and tweak it to demonstrate what you are seeing?

[LinusIT]

I have created a minified version of the page so hopefully you'll get the idea. It would be benefical if you have the images that go with it.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<!--[if IE]>
<div id="IEroot">
<![endif]-->
<div id="container">
<div id="header">
<span id="header-logo"><a href="index.php"><img src="images/logo.jpg" alt="" title="" width="868" height="178" /></a>
</span>
<div class="divider-header"></div>

<div id="header-navaccount">
<a href="http://www.domain.com/account.php" class="headerNavigation">MY ACCOUNT</a> &nbsp;|&nbsp; <a href="http://www.domain.com/shopping_cart.php" class="headerNavigation">CART CONTENTS</a> &nbsp;|&nbsp; <a href="http://www.domain.com/checkout_shipping.php" class="headerNavigation">CHECKOUT</a>
</div>
<div id="header-breadcrumbs">
<a href="http://www.domain.com" class="header-breadcrumbs">Home</a> &raquo; <a href="http://www.domain.com/index.php" class="header-breadcrumbs">Store</a>
</div>
<div class="divider-header"></div>
</div>
<div id="page">
<div id="pagecolumnleft">
<div class="infoboxheading">
Categories<div class="divider"></div></div>
<div class="infobox">
<div class="infoboxcontents">
<a href="http://www.domain.com/books.html">Books</a><br /><a href="http://www.domain.com/dvds.html">DVDs</a><br /><a href="http://www.domain.com/cds.html">CDs</a><br /><a href="http://www.domain.com/software.html">Software</a><br /></div>
</div>
</div>
<div id="pagecontent">
<div id="content-head"></div>
<div id="content-body">
<h1>Welcome</h1>
<div class="divider-short"></div>
<p>Introduction</p>
<div class="divider-short"></div>
</div>
<div id="content-foot"></div>
</div>
<div id="pagecolumnright">
<div class="infoboxheading">Online Chat
<div class="divider-short"></div>
</div>
<div class="infobox">
<div class="infoboxcontents">
<div class="center"><script type="text/javascript" src="../support/visitor/index.php?_m=livesupport&amp;_a=htmlcode&amp;departmentid=0"></script><noscript><p>Please enable Javascript to use our Online Support!</p></noscript></div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="footer-box"></div>


</div>
</div>
<!--[if IE]>
</div>
<![endif]-->
</body>
</html>

CSS:

fieldset,img{border:none;}
table{border-collapse:collapse;border-spacing:0;}
CHECKBOX, INPUT, RADIO, SELECT{font-size:11px;}
body{margin-left:auto;margin-right:auto;width:100%;background-color:#ffffff;overflow:scroll;font-family:Verdana, Arial, sans-serif;}
#container{width:947px;margin-left:auto;margin-right:auto;}
#header{width:945px;background-color:transparent;}
#page{float:left;width:945px;padding:0;margin:0 0 5px 0;}
#pagecolumnleft{float:left;width:156px;padding:0;margin-left:3px;}
#pagecontent{float:left;width:597px;padding:0;margin:0 16px 0 16px;}
#content-head{padding-top:10px;background-image:url('images/tp-middle-topbar.png');background-repeat:no-repeat;position:relative;top:5px;}
#content-body{border-left:1px solid #95B4F4;border-right:1px solid #95B4F4;padding:12px 12px 0 12px;}
#content-foot{padding:0 0 20px 0;background-image:url('images/tp-middle-bottombar.png');background-repeat:no-repeat;}
#pagecolumnright{float:left;width:156px;padding:0;margin:0;}
#footer{clear:both;text-align:center;width:945px;padding:0;margin:0;}
.leftfloat{float:left;}
.rightfloat{float:right;}
/*.right{text-align:right;}*/
.center{text-align:center;}
/*.divider{clear:both;}*/
.divider-short{clear:both;/*height:5px;*/}
/*.divider-pageheading{clear:both;height:10px;border:0 dashed #F00;}*/
a:hover{font-size:11px;color:#0088CC;line-height:1.4em;text-decoration:none;}
a, p, p.main, .main, .bold, .leftfloat, .rightfloat, .right, .center, ul, li, .modulerow, .modulerowover, .modulerowselected, .pagebox-account, .pagebox, .pagebox-onethird, .pagebox-twothirds, .pagebox-halfwidth, .pagebox-threefourths, .confirm-comments{font-size:11px;color:#333;line-height:1.4em;text-decoration:none;}
p + p{margin-top:1.0em;}
.bold{font-weight:bold;}

.smalltext, p.smalltext{font-size:10px;margin:5px 0 0 0;}
h1{font-size:20px;font-weight:bold;color:#9a9a9a;margin:0;}
h2{font-size:14px;font-weight:normal;margin-bottom:0;padding-bottom:0;color:#9a9a9a;}
h3{font-size:12px;font-weight:bold;margin-bottom:3px;padding-bottom:0;color:#9a9a9a;}
h4{font-size:11px;font-weight:bold;margin-bottom:3px;padding-bottom:0;color:#333333;}
.htc-desc{font-size:14px;font-weight:normal;margin-bottom:0;padding-bottom:0;color:#9a9a9a;float:right;}
#header-logo{display:block;width:868px;margin: 0 auto;}
#header-navaccount{font-size:12px;color:#333333;text-align:right;padding:16px 10px 10px 0; height:13px; background: url("images/bars.png") 0 8px no-repeat;margin-left:3px;}
#header-breadcrumbs{font-size:11px;font-weight:normal;color:#666666;padding:0 0 0 5px;}
a.header-breadcrumbs:hover{color:#0088CC;}
.divider-header{clear:both;height:0;}
.header-error{background:#ff0000;font-family:Tahoma, Verdana, Arial, sans-serif;font-size:12px;color:#ffffff;font-weight:bold;text-align:center;}
.footer-box{background: url("images/bars.png") 0 -31px no-repeat;padding:10px 6px 0 6px;margin-left:3px;}
.footer-links{width:800px;text-align:center;margin:0 auto;}
.footer-links a{font-size:9px;}
.pagebox{border-top:0 solid #E8F2F6;margin:0;padding:5px 10px 5px 10px;}

.pagebox-threefourths{float:left;width:98%;padding:0;}
.pagebox-threefourths img{border:0;margin:5px;}

.infobox{background-image:url('images/infobox/tp-boxfooter.png');background-repeat:no-repeat;background-position:bottom;margin:0 0 0 0;padding:0 0 10px 0;font-size:10px;}
.infoboxcontents{font-size:10px;margin:0 0 0 1px;padding:11px 5px 5px 5px;background-image:url('images/infobox/tp-boxbody.gif');background-repeat:repeat-y;}
.infoboxheading{font-family:Helvetica,sans-serif;font-size:12px;font-weight:bold;color:#333333;padding:5px 0 6px 5px;margin:5px 0 0 1px;background-image:url('images/infobox/tp-boxheader.png');background-repeat:no-repeat;}
#IEroot .infobox{background-image:url('images/infobox/tp-boxfooter.png');background-repeat:no-repeat;background-position:bottom;margin:0 0 0 0;padding:0 0 10px 0;font-size:10px;}
#IEroot .infoboxcontents{font-size:10px;margin:0;padding:11px 5px 5px 5px;background-image:url('images/infobox/tp-boxbody.gif');background-repeat:repeat-y;}
#IEroot .infoboxheading{font-family:Helvetica,sans-serif;font-size:12px;font-weight:bold;color:#333333;padding:5px 0 6px 5px;margin:5px 0 0 0;background-image:url('images/infobox/tp-boxheader.png');background-repeat:no-repeat;}

/* REMOVED - I THINK
.shoppingcart{padding-right:5px;margin-top:0;}
.shoppingcart img{float:right;padding:2px 5px 0 0;}
.leftfloat h1{margin-bottom:5px;width:470px;line-height:22px;}
*/

/* SHOPPING CART BOX */
table.infobox-cart{font-size:10px;line-height:12px;}
td.infoBoxContents-cart{font-size:10px;color:#333333;line-height:12px;}
a.infobox-cart{font-size:10px;line-height:12px;color:#333333;}
a:hover.infobox-cart{font-size:10px;line-height:12px;color:#666666;}
span.newitemincart{font-size:10px;color:#0088CC;}

/*product listing*/
.productlisting-odd, .productlisting-even{float:left;text-align:center;width:130px;border:1px solid #CDCDCD;margin:10px 5px 5px 5px;padding:10px 0 0 0;height:205px;}
.pl-image, .pl-name, .pl-price, .pl-buynow{text-align:center;width:120px;padding-top:2px;padding-bottom:2px;margin:0 auto;}
.pl-price{margin-bottom:5px;font-size:11px;line-height:1.4em;}
.pl-name{height:55px;margin-bottom:2px;}
.pl-buynow{margin-left:25px;}
.pl-image{margin-bottom:5px;}

.productlisting-new-contents{background:#FFFFFF;font-size:10px;padding-bottom:0;}
.productlisting-new-heading{font-size:10px;font-weight:bold;background:#3D79B6;color:#ffffff;padding:2px 0 3px 5px;margin:10px 0 0 0;}

span.errortext{color:#ff0000;}
/*.infobox, span.infobox{font-size:10px;}*/
.errorbox{font-size:10px;background:#ffb3b5;font-weight:bold;}

/*buttons*/
.buttons{background:transparent url('images/button_right.gif') no-repeat scroll top right;color:#4B4B4B;display:block;float:left;font-weight:normal;font-family:Arial, Helvetica, san-serif;font-size:12px;margin:0 6px 0 0;padding-right:10px;border:none;}
.buttons span{background:transparent url('images/button_left.png') no-repeat;display:block;padding:3px 6px 2px 14px;}
.buttons:hover{color:#000000;cursor:pointer;}
.buttons:hover span{}
.buttons_submit{background:transparent url('images/button_left.png') no-repeat;font-weight:normal;font-family:Arial, Helvetica, san-serif;font-size:12px;color:#4B4B4B;display:block;float:left;padding:3px 6px 3px 16px;border:none;}
.buttons_submit:hover{color:#000000;cursor:pointer;}

You may notice there is a conditional statement for IE. This is because the box footer image (.infobox background) doesn't line up correctly. This is the only fix I could come up with.

[Fotiman]

That's a bit more than I would expect in a minimal example. I've reduced your code down to this minimal example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Page</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css">
body {
  margin: 0 auto;
  width:100%;
  background: #fff;
}
#container {
  width:947px;
  margin: 0 auto;
}
#page {
  float:left;
  width:945px;
  padding:0;
  margin:0 0 5px 0;
} 
#pagecolumnleft {
  float:left;
  width:156px;
  padding:0;
  margin-left:3px;
} 
.infobox {
  background: #cc0; /* url('images/infobox/tp-boxfooter.png') no-repeat bottom; */
  margin: 0;
  padding:0 0 10px 0;
} 
.infoboxcontents {
  margin: 0 0 0 1px;
  padding:11px 5px 5px 5px;
  background: #0c0; /* url('images/infobox/tp-boxbody.gif') repeat-y; */
} 
.infoboxheading {
  color:#333;
  padding:5px 0 6px 5px;
  margin:5px 0 0 1px;
  background: #ccc; /* url('images/infobox/tp-boxheader.png') no-repeat;*/
} 
</style>
</head> 
<body>
  <div id="container"> 
    <div id="page"> 
      <div id="pagecolumnleft"> 
        <div class="infoboxheading"> 
          Categories
          <div class="divider"></div>
        </div> 
        <div class="infobox"> 
          <div class="infoboxcontents"> 
            <a href="http://www.example.com/books.html">Books</a><br />
            <a href="http://www.example.com/dvds.html">DVDs</a><br />
            <a href="http://www.example.com/cds.html">CDs</a><br />
            <a href="http://www.example.com/software.html">Software</a><br />
          </div> 
        </div> 
      </div>
    </div> 
  </div> 
</body> 
</html> 

Note, in lieu of the images, I've used background colors instead. Now, from this you are trying to add left and right borders to the middle section, correct? If that's the case, you'll want to remove the left margins from the some of the elements, and add your borders:

.infoboxcontents {
  margin: 0;
  border-left: 2px solid black;
  border-right: 2px solid black;
  padding:11px 5px 5px 5px;
  background: #0c0; /* url('images/infobox/tp-boxbody.gif') repeat-y; */
} 
.infoboxheading {
  color:#333;
  padding:5px 0 6px 5px;
  margin:5px 0 0;
  background: #ccc; /* url('images/infobox/tp-boxheader.png') no-repeat;*/
} 

So what sort of problems are you trying to overcome?

[LinusIT]

I have implemented the code changes and it's worked for IE but it's all out of alignment in Firefox. The top header needs to remain in place so I haven't changed that.

It's very hard to explain especially as I can't provide screen shots.

Any ideas?

[Fotiman]

I would say go ahead an provide a link. Generally, I prefer to avoid links whenever possible (to keep the thread useful for any future visitors) but sometimes a link is required. And maybe I'll be able to post the relevant code and changes here to keep this thread useful.

[Hoople]

Not all browsers treat image properties 'border' and 'outline' the same.

I had to set outline="0" to get all browsers to look similar without wonky gaps in layout.

[LinusIT]

I have setup a link so that you can see what's going on. Please ignore the domain it's on, I haven't got hosting for my new domain as yet.

[rpmotors.co.uk...]

Thanks for your help

[Fotiman]

Ok, so you have container boxes like this:

+--- .infoboxheading -------------+ 
|~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~| 
+---------------------------------+ 
+--- .infobox --------------------+ 
|+-- .infoboxcontents -----------+| 
||~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|| 
|+-------------------------------+| 
|~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~| 
+---------------------------------+ 

You currently have a 1px left margin applied to .infoboxheading and .infoboxcontents. However, .infobox contains .infoboxcontents, so if you remove the 1px left margin from .infoboxcontents and apply it to .infobox instead, it all lines up correctly. Give that a try.
background image that is 155px wide on the header.

[LinusIT]

I have done as you've suggested and it's working great for firefox but not for IE. I have modified .infobox and .infoboxcontents in the CSS for #IEroot and the normal classes as well.

Here is how the code looks now:

.infobox{background-image:url('images/infobox/tp-boxfooter.png');background-repeat:no-repeat;background-position:bottom;margin:0 0 0 1px;padding:0 0 10px 0;width:155px;}
.infoboxcontents{font-size:10px;margin:0 0 0 0;padding:11px 5px 5px 5px;/*background-image:url('images/infobox/tp-boxbody.gif');background-repeat:repeat-y;*/border-left: 1px solid black;border-right: 1px solid black;}
.infoboxheading{font-family:Helvetica,sans-serif;font-size:12px;font-weight:bold;color:#333333;padding:5px 0 6px 5px;margin:5px 0 0 1px;background-image:url('images/infobox/tp-boxheader.png');background-repeat:no-repeat;}
#IEroot .infobox{background-image:url('images/infobox/tp-boxfooter.png');background-repeat:no-repeat;background-position:bottom;margin:0 0 0 1px;padding:0 0 10px 0;width:155px;}
#IEroot .infoboxcontents{font-size:10px;margin:0;padding:11px 5px 5px 5px;/*background-image:url('images/infobox/tp-boxbody.gif');background-repeat:repeat-y;*/border-left: 1px solid black;border-right: 1px solid black;}
#IEroot .infoboxheading{font-family:Helvetica,sans-serif;font-size:12px;font-weight:bold;color:#333333;padding:5px 0 6px 5px;margin:5px 0 0 0;background-image:url('images/infobox/tp-boxheader.png');background-repeat:no-repeat;}

[Fotiman]

Looks like you're missing the 1px left margin on the infoboxheading (for IE). For that matter, though, all of the rest of those style rules are the same, so why do you have a separate version for IE? That's going to be a maintenance headache. I would just delete all of those #IEroot rules.

[LinusIT]

I have changed the margin on the heading and it works perfectly now, in both IE and Firefox (can't say for other browsers).

The reason I added the conditional statement was because it would never line up correctly in IE or Firefox, especially when the page extended further than the bottom of the screen. I have added some text to test this and the problem no longer exists.

I have one more question which does fit in with this thread. I would like to use an image sprite for the infoboxes, so the top and bottom image are in one. I don't know if it's possible as the .infobox uses the position of "bottom". Is it possible to specify an image position and where it belongs on the page?

Here's an example of what I usally use for sprites:

#header-navaccount{background: url("images/bars.png") 0 8px no-repeat;}
.footer-box{background: url("images/bars.png") 0 -31px no-repeat;

[Fotiman]

If you create your sprite such that the footer image is on the bottom and the header image is on top, then it should work. Note, though, you'll probably want to give a fixed height to your .infoboxheader, though, or if the content was long enough it could break your layout.

[LinusIT]

Are you saying that I need to change my html in order for a sprite to work? Sorry if this isn't obvious to myself.

Currently it uses this for the bottom image:

.infobox{background-image:url('images/infobox/tp-boxfooter.png');background-repeat:no-repeat;background-position:bottom;

and this for the top image:

.infoboxheading{background-image:url('images/infobox/tp-boxheader.png');background-repeat:no-repeat;

If I do what I know and change it to something like:

.infobox{background: url("images/sprite.png") 0 -27px no-repeat;
.infofoxheading{background: url("images/sprite.png") 0 0 no-repeat;

Then wont it just place the bottom image (.infobox) at the very start of that div class instead at the bottom of it.

[Fotiman]

No, I am not suggesting changing your html at all.

If you have a sprite image like this:

+------------------+ 
|~~ header image ~~| 
|------------------| 
|~~ footer image ~~| 
+------------------+ 

Then your CSS would be something like this:

.infobox {
  background: url('images/sprite.png') no-repeat 0 100%; /* center bottom */
}
.infoboxheading {
  background: url("images/sprite.png") no-repeat 0 0; /* left top */
}

Therefore, the background image for infoboxheading will be positioned in the top left, and you should set a height on infoboxheading so that only the top portion of the sprite image is visible. The background image for .infobox will be positioned at the bottom.

[Fotiman]

Oh, and you'll want to add something like this too:

.infoboxcontents {
  background: #fff;
}

To prevent the footer background from showing through.

[LinusIT]

Thank you so much for your help, we've made loads of progress with this plus I've learnt things along the way.

I have created the sprite, although I though in an attempt to reduce http requests, I'd add the latest sprite to the existing one. The infoboxes work a treat. The page now uses just 1 image for it's entire layout :)

Issues:

The padding/space between the infobox header image and the text has increased somewhat, also at the bottom of the content it is showing part of the next image in the sprite. I have tried to fix but I can't get it to work, I hope you can help.

Code:

.infobox{background: url('images/layout.png') no-repeat 0 100%; /* center bottom */margin:0 0 0 1px;padding:0 0 10px 0;width:155px;}
.infoboxcontents{font-size:10px;margin:0;padding:11px 5px 5px 5px;border-left: 1px solid #95B4F4;border-right: 1px solid #95B4F4;background: #fff;}
.infoboxheading{font-family:Helvetica,sans-serif;font-size:12px;font-weight:bold;color:#333333;padding:5px 0 6px 5px;margin:5px 0 0 1px;background: url("images/layout.png") no-repeat 0 -71px; /* left top */ height:27px;}

See the link provided earlier to see it in action.

[Fotiman]

I think the height on your infoboxheading is too big, which is why the contents have been pushed down. So try playing with that a bit to find a good fit.

I didn't see the next image showing in the sprite, so either you've changed it or fixed it. But just to give you an idea, there can't be any images below the footer image in the sprite file for this to work.

[LinusIT]

Your are correct once again, I've removed the height and changed some padding, it looks good now.

I haven't managed to fix the other problem. If you look at the page again, at the bottom of the center section where it says "Share and Enjoy:". Just below there on the left hand side it shows part of the next image.

The code for this section is:

#content-foot{padding:0 0 20px 0;background: url("images/layout.png") 0 -56px no-repeat;}

I suspect it's todo with the 20px bottom padding. However if I remove it, the lower bar jumps up and covers the content footer.

The code for the last bar is:

.footer-box{background: url("images/layout.png") 0 -31px no-repeat;padding:10px 6px 0 6px;margin-left:3px;}

Hopefully I've explained this better now :)

[Fotiman]

In your layout.png image, the background for your infobox header begins at 71px from the top. In your CSS, you are beginning the background images 56px from the top and then because you've set a bottom padding of 20px, you are displaying down to 76px, so you see 5px of the next background image. The fix, then, is simply remove 5px from the padding.

Alternatively, you could set the padding to 0 and give it a fixed height of 15px instead.

[LinusIT]

That's done it, thank you very much for your help. I've achieved exactly what I was after :)

Here is the resulting code:

.infobox{background: url('images/layout.png') no-repeat 0 100%; /* center bottom */margin:0 0 0 1px;padding:0 0 10px 0;width:155px;}
.infoboxcontents{font-size:10px;margin:0;padding:5px 5px 5px 5px;border-left: 1px solid #95B4F4;border-right: 1px solid #95B4F4;background: #fff;}
.infoboxheading{font-family:Helvetica,sans-serif;font-size:12px;font-weight:bold;color:#333333;padding:5px 0 6px 6px;margin:5px 0 0 1px;background: url("images/layout.png") no-repeat 0 -71px; /* left top */}

[Fotiman]

Great. Glad you got it working. :)