By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,665 Members | 1,952 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,665 IT Pros & Developers. It's quick & easy.

Shrink wrap header background & clearing floats

P: n/a
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
Share this Question
Share on Google+
6 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
*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

P: n/a
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.