No replies
LinusIT
Offline
newbie
United Kingdom
Last seen: 10 years 7 weeks ago
United Kingdom
Timezone: GMT+1
Joined: 2010-08-03
Posts: 2
Points: 4

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