467,170 Members | 1,165 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,170 developers. It's quick & easy.

Shrink wrap header background & clearing floats

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
Jul 21 '05 #1
  • viewed: 3291
Share:
6 Replies
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/
Jul 21 '05 #2
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>
Jul 21 '05 #3
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
Jul 21 '05 #4
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
Jul 21 '05 #5
*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!
Jul 21 '05 #6
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
Jul 21 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by BashiraInTrouble | last post: by
18 posts views Thread by Niels | last post: by
4 posts views Thread by LB | last post: by
1 post views Thread by Sam | last post: by
13 posts views Thread by yb | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.