Shrink wrap header background & clearing floats

[Michael Rozdoba]

I want to set a background colour on one level of headings, but have
their width span only the text & a small amount of padding.

I was styling display to inline to achieve this.

Then I realised I need to have clear: left, to keep the headings against
the lefthand side, should they come near floats.

I can't see how to do this without having to introduce unpleasant extra
markup.

ATM I've resorted to <h3><span>Heading text</span></h3>

With clear on h3 & the background set on h3 span :-/

http://digitalrat.co.uk/test3/index.html

--
Michael
m r o z a t u k g a t e w a y d o t n e t

[Jukka K. Korpela]

Michael Rozdoba <mr**@nowhere.invalid> wrote:

I want to set a background colour on one level of headings, but
have their width span only the text & a small amount of padding.

I was styling display to inline to achieve this.

Then I realised I need to have clear: left, to keep the headings
against the lefthand side, should they come near floats.
Moreover, you can't effectively set top and bottom margins. You could
set margins for the preceding and following element, but it gets
awkward (you would probably need to class those elements, etc.).
ATM I've resorted to <h3><span>Heading text</span></h3>

That's the usual workaround.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Michael Rozdoba wrote:

I want to set a background colour on one level of headings, but have
their width span only the text & a small amount of padding.
display:table;
I was styling display to inline to achieve this.
That is
Then I realised I need to have clear: left, to keep the headings against
the lefthand side, should they come near floats.

I can't see how to do this without having to introduce unpleasant extra
markup.

Well, big question is if it needs to work on IE

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

[Michael Rozdoba]

Jukka K. Korpela wrote:

Michael Rozdoba <mr**@nowhere.invalid> wrote:

ATM I've resorted to <h3><span>Heading text</span></h3>

That's the usual workaround.

Okay, thanks. At least I've not overlooked something obvious.

--
Michael
m r o z a t u k g a t e w a y d o t n e t

[Michael Rozdoba]

Lauri Raittila wrote:

in comp.infosystems.www.authoring.stylesheets, Michael Rozdoba wrote:

I want to set a background colour on one level of headings, but have
their width span only the text & a small amount of padding.

display:table;

I later found that in connection with captioning & thought it might be
an option, but...

I can't see how to do this without having to introduce unpleasant extra
markup.

Well, big question is if it needs to work on IE

Alas, yes :/

--
Michael
m r o z a t u k g a t e w a y d o t n e t

[Christoph Paeper]

*Michael Rozdoba* <mr**@nowhere.invalid>:

I want to set a background colour on one level of headings, but have
their width span only the text & a small amount of padding.

h3 {float: left; clear: both;}
h3+* {clear: left}

maybe? (Of course you'd need to use something different than "h3+*" to
please IE and MacIE doesn't do shrink-wrap on floats.)

--
We are the e-continent!

[Michael Rozdoba]

Christoph Paeper wrote:

*Michael Rozdoba* <mr**@nowhere.invalid>:

I want to set a background colour on one level of headings, but have
their width span only the text & a small amount of padding.

h3 {float: left; clear: both;}
h3+* {clear: left}

maybe? (Of course you'd need to use something different than "h3+*" to
please IE and MacIE doesn't do shrink-wrap on floats.)

Thanks for the idea, though the problems with IE would probably put me
off. I guess I'll stick with the extra span markup for now.

--
Michael
m r o z a t u k g a t e w a y d o t n e t