Padding it out...

[Bo Aakerstrom]

I've been adding padding to font declarations (headings that is) to create a coloured background that fills the width of a column and that will resize with the font size. See attached image.

Are there any potential problems with doing that - is it better to put the text in a div with padding instead?

[ktinkel]

I've been adding padding to font declarations (headings that is) to create a coloured background that fills the width of a column and that will resize with the font size. See attached image.

Are there any potential problems with doing that - is it better to put the text in a div with padding instead?I can’t think of any hazard (but will be interested in what Marjolein has to say on this).

It seems like a very clean and logical way to do it if it gives you the effect you want.

[Kelvyn]

If it is a heading then you can style it however you wish (within reason ;-) ). On the page there will still be <hx>-Your text-</hx> so semantically that is correct. I think a lot or people forget that you can use background colour (or background images) for any container.

[Bo Aakerstrom]

If it is a heading then you can style it however you wish (within reason ;-) ). On the page there will still be <hx>-Your text-</hx> so semantically that is correct. I think a lot or people forget that you can use background colour (or background images) for any container.
It just seemd like a good idea to me, haven't seen anyone writing about it though. Why I don't know, they seem to have covered everything else, many times over...

I've tried to do that with images too, but haven't found a use for that yet.

As it is a local page it works fine, but I have noticed that there are differences in how a browser renders local and remote pages - or is that just me!?

And why do I have to be reasonable? :twisted:

[Kelvyn]

I have noticed that there are differences in how a browser renders local and remote pages - or is that just me!?That should not happen. Must be you. :)

[ktinkel]

As it is a local page it works fine, but I have noticed that there are differences in how a browser renders local and remote pages - or is that just me!?Doesn’t sound right to me.

Do have margins on your hx? If not, different browsers will likely apply different margins to the element. Best to set them to 0 (or whatever you want). Browsers are tediously inconsistent on padding and margin.

[Bo Aakerstrom]

Didn't think of adding a margin declaration as well - I'll try anything once!

[donmcc]

Run it through the css validator at w3.org. If that doesn't grumble, you should be okay.

[iamback]

I've been adding padding to font declarations (headings that is) to create a coloured background that fills the width of a column and that will resize with the font size. See attached image.

Are there any potential problems with doing that - is it better to put the text in a div with padding instead?If you want to style an element it's better to actually style the element than to style whatever is surrounding it! And that way you'll know what style applies to what. (You sometimes may be forced to use a roundabout method - but use it only then, avoid whenever possible.)

[Bo Aakerstrom]

If you want to style an element it's better to actually style the element than to style whatever is surrounding it! And that way you'll know what style applies to what. (You sometimes may be forced to use a roundabout method - but use it only then, avoid whenever possible.)
Good to know I'm on the right track here! It's easy to come up with some hairbrained idea when I've only got my PC to talk to - the wife is away for a few days, not that she's a great help when it comes to css...

Run it through the css validator at w3.org. If that doesn't grumble, you should be okay.
Did that and it didn't grumble. Still not 100% sure if valid code will work as intended in some browers though.

[Bo Aakerstrom]

At last my text behaves itself!

I have also been able to reduce the amount of markup I'm using by a surprising amount.

Why did I not realise that I had to add marging and padding to font declarations earlier - I just kept complaining about the way it was rendered.

Thank's guys!

[ktinkel]

At last my text behaves itself!Congratulations! :)