Text position with BG image in sidebox header???

[torgil]

Hi.

I'm using a bg image for my sidebox headers, placed in the css .sideboxheading, and not repeating.

The thing is, that when trying to apply padding to place the header text properly, the pixel set height of the header expands with the value of the padding, causing gaps between header and sidebox content, and still not aligning the text right.

I've tried to apply the padding(and margins) both in the .sideboxheadneg and the H3.sideboxheading class, but no luck.

So far I've managed to get it looking fairly decent by setting line-height to the same value as the class height, but that is still not looking exactly the way I want.

There has to be a way to do this, anyone with ideas please help me out.
I'm working with the css copied from the template_default into my_template.

Do I have to alter the tpl_box_default_left.php and add another wrapper div and put the bg image there?

This time I'm designing for a client, but as a web designer I really want to learn to make perfectly coded and cross broser working templates for ZC.
I have heard from a lot of peolpe that first template is a ########## to construct if you'r unfamiliar with the system and this is my fist one. Any pointers I can get I'll be very grateful.

/Torgil - www.kabelkultur.se

[kuroi]

People often find this confusing. Even the programmers of Internet Explorer 5.5 got it wrong. So don't worry that you're finding it a bit difficult.

The CSS height attribute for (for example) a sidebox heading refers not to the height of the sidebox heading block, but to the content that it contains.

The height of the sidebox heading block is made up of top border + top padding + height value + bottom padding + bottom border. So if you add or increase the padding, you must also decrease the height to keep the sidebox heading block the same size.

You can find out more about the CSS box model at the official W3 org box model page.