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>Headi ng 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]

Re: Shrink wrap header background &amp; clearing floats

Michael Rozdoba <mroz@nowhere.i nvalid> wrote:
[color=blue]
> 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.[/color]

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.).
[color=blue]
> ATM I've resorted to <h3><span>Headi ng text</span></h3>[/color]

That's the usual workaround.

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

[Lauri Raittila]

Re: Shrink wrap header background &amp; clearing floats

in comp.infosystem s.www.authoring.stylesheets, Michael Rozdoba wrote:[color=blue]
> 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.[/color]

display:table;
[color=blue]
> I was styling display to inline to achieve this.[/color]

That is
[color=blue]
> 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.[/color]

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]

Re: Shrink wrap header background &amp; clearing floats

Jukka K. Korpela wrote:[color=blue]
> Michael Rozdoba <mroz@nowhere.i nvalid> wrote:[/color]
[color=blue][color=green]
>>ATM I've resorted to <h3><span>Headi ng text</span></h3>[/color]
>
> That's the usual workaround.[/color]

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]

Re: Shrink wrap header background &amp; clearing floats

Lauri Raittila wrote:[color=blue]
> in comp.infosystem s.www.authoring.stylesheets, Michael Rozdoba wrote:
>[color=green]
>>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.[/color]
>
>
> display:table;[/color]

I later found that in connection with captioning & thought it might be
an option, but...
[color=blue][color=green]
>>I can't see how to do this without having to introduce unpleasant extra
>>markup.[/color]
>
> Well, big question is if it needs to work on IE[/color]

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]

Re: Shrink wrap header background &amp; clearing floats

*Michael Rozdoba* <mroz@nowhere.i nvalid>:[color=blue]
>
> 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.[/color]

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]

Re: Shrink wrap header background &amp; clearing floats

Christoph Paeper wrote:[color=blue]
> *Michael Rozdoba* <mroz@nowhere.i nvalid>:
>[color=green]
>>
>> 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.[/color]
>
>
> 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.)[/color]

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