headers and <br>s

[meltedown]

Earlier, there was a discussion of why not to use <br>s too much. I
mostly don't like using <br>s at all but there is one situation where
its seems better than the alternative.

<h4> this is the paragraph header</h4>
<p> this is the paragraph</p>

If I want no margin between the header and the paragraph, I can use:
<h4 class='no_bottom_margin'> this is the paragraph header</h4>
<p class='no_top_margin'> this is the paragraph</p>

But this is sometimes more obnoxious than

<p>
<span class='paragraphheader'>this is the paragraph header</span>
<br>
this is the paragraph</p>

How would you do this ?

[Jim Moe]

meltedown wrote:

<h4> this is the paragraph header</h4>
<p> this is the paragraph</p>

If I want no margin between the header and the paragraph, I can use:
<h4 class='no_bottom_margin'> this is the paragraph header</h4>
<p class='no_top_margin'> this is the paragraph</p>

But this is sometimes more obnoxious than
"Obnoxious?" Why?
<p>
<span class='paragraphheader'>this is the paragraph header</span>
<br>
this is the paragraph</p>

This removes useful markup from your content. The header becomes just a
modified form of body text and less for non-visual browsers to process.
And changing header styles does not affect that text style increasing your
maintenance burden.
Do you use the gapless presentation randomly? Or does it tend to clump
together?
Hey! You could use a division and cascade the h4 and p elements so no
explicit class attribute is required.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Arne]

Once upon a time *meltedown* wrote:

Earlier, there was a discussion of why not to use <br>s too much. I
mostly don't like using <br>s at all but there is one situation where
its seems better than the alternative.

<h4> this is the paragraph header</h4>
<p> this is the paragraph</p>

If I want no margin between the header and the paragraph, I can use:
<h4 class='no_bottom_margin'> this is the paragraph header</h4>
<p class='no_top_margin'> this is the paragraph</p>

But this is sometimes more obnoxious than

<p>
<span class='paragraphheader'>this is the paragraph header</span>
<br>
this is the paragraph</p>

How would you do this ?

If that header and paragraph is an exeption, different from other
paragraps and <h4> headers on the site, then I use just <h4
style="blablabla"> and <p style="blabla">

But I always try to give all header tags their own style, in the
stylesheet file, e.g. h1 {margin-bottom:12px;} and so on. Less margin
for smaller (sub)headers and use them the same way all over the site.

For the paragraph tag, I mostly set top-margin to "0px" and only use a
bottom-margin to make a space before the next paragraph. That way I
can have a header and a following paragraph with the margins I like.

--
/Arne
-- *Joke of the day* ----------------------------------------
Tech Support: What anti-virus program do you use?
Customer: Netscape.
Tech Support: That's not an anti-virus program.
Customer: Oh, sorry...Internet Explorer.
-------------------------------------------------------------

[meltedown]

Jim Moe wrote:

meltedown wrote:

<h4> this is the paragraph header</h4>
<p> this is the paragraph</p>

If I want no margin between the header and the paragraph, I can use:
<h4 class='no_bottom_margin'> this is the paragraph header</h4>
<p class='no_top_margin'> this is the paragraph</p>

But this is sometimes more obnoxious than
"Obnoxious?" Why?

Just that adding all those classes to the tags is a chore. I'll do it
rather than using <br>'s (it seems like I'm giving up control of my text
when anything is not in a block element). I just thought there might be
a shortcut I hadn't thought of.

<p>
<span class='paragraphheader'>this is the paragraph header</span>
<br>
this is the paragraph</p>

This removes useful markup from your content. The header becomes just
a modified form of body text and less for non-visual browsers to
process. And changing header styles does not affect that text style
increasing your maintenance burden.
Do you use the gapless presentation randomly? Or does it tend to clump
together?
Hey! You could use a division and cascade the h4 and p elements so no
explicit class attribute is required.

I guess that could work if all the paragraphs were that way, but there
are always more paragraphs below the one next to the header. All the
header are the same so it would at least cut down on the need to cite
header classes.

[meltedown]

Arne wrote:

Once upon a time *meltedown* wrote:

Earlier, there was a discussion of why not to use <br>s too much. I
mostly don't like using <br>s at all but there is one situation where
its seems better than the alternative.

<h4> this is the paragraph header</h4>
<p> this is the paragraph</p>

If I want no margin between the header and the paragraph, I can use:
<h4 class='no_bottom_margin'> this is the paragraph header</h4>
<p class='no_top_margin'> this is the paragraph</p>

But this is sometimes more obnoxious than

<p>
<span class='paragraphheader'>this is the paragraph header</span>
<br>
this is the paragraph</p>

How would you do this ?

If that header and paragraph is an exeption, different from other
paragraps and <h4> headers on the site, then I use just <h4
style="blablabla"> and <p style="blabla">

But I always try to give all header tags their own style, in the
stylesheet file, e.g. h1 {margin-bottom:12px;} and so on. Less margin
for smaller (sub)headers and use them the same way all over the site.

For the paragraph tag, I mostly set top-margin to "0px" and only use a
bottom-margin to make a space before the next paragraph. That way I
can have a header and a following paragraph with the margins I like.

That's a good tip, that might be the shortcut I'm looking for. Thanks.

[kchayka]

meltedown wrote:

Jim Moe wrote:

meltedown wrote:

<h4 class='no_bottom_margin'> this is the paragraph header</h4>
<p class='no_top_margin'> this is the paragraph</p>

there
are always more paragraphs below the one next to the header.

Class selectors aren't required. I think someone else already suggested
this:

h4 {margin-bottom: 0;}
p {margin-top: 0; margin-bottom: 1em;}

I do this all the time, on ol/ul as well as paragraphs. Works very nicely.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[meltedown]

kchayka wrote:

meltedown wrote:

Jim Moe wrote:

meltedown wrote:
<h4 class='no_bottom_margin'> this is the paragraph header</h4>
<p class='no_top_margin'> this is the paragraph</p>

there
are always more paragraphs below the one next to the header.

Class selectors aren't required. I think someone else already suggested
this:

h4 {margin-bottom: 0;}
p {margin-top: 0; margin-bottom: 1em;}

I do this all the time, on ol/ul as well as paragraphs. Works very nicely.

OK thanks, I think I got the hang of it. I used to know this too.

[Jim Moe]

meltedown wrote:

Do you use the gapless presentation randomly? Or does it tend to
clump together?
Hey! You could use a division and cascade the h4 and p elements so
no explicit class attribute is required.

I guess that could work if all the paragraphs were that way, but there
are always more paragraphs below the one next to the header. All the
header are the same so it would at least cut down on the need to cite
header classes.

Sometimes you want space, sometimes you don't. I was curious how the
space/no-space decision occurs: for a whole page? a small section of a
page? Alternate sections? Randomly picked by source code? (Okay, the last
one is unlikely. :-))

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[meltedown]

Jim Moe wrote:

meltedown wrote:

Do you use the gapless presentation randomly? Or does it tend to
clump together?
Hey! You could use a division and cascade the h4 and p elements so
no explicit class attribute is required.

I guess that could work if all the paragraphs were that way, but there
are always more paragraphs below the one next to the header. All the
header are the same so it would at least cut down on the need to cite
header classes.

>

Sometimes you want space, sometimes you don't. I was curious how the
space/no-space decision occurs: for a whole page? a small section of a
page? Alternate sections? Randomly picked by source code? (Okay, the
last one is unlikely. :-))

I want a space between everything but a header and a paragraph.
The stuff kchayka and Arne suggested is fine.
h4 {margin-bottom: 0;}
p {margin-top: 0; margin-bottom: 1em;}

[Alan J. Flavell]

On Sat, 12 Nov 2005, meltedown wrote:

I want a space between everything but a header and a paragraph.
The stuff kchayka and Arne suggested is fine.
h4 {margin-bottom: 0;}
p {margin-top: 0; margin-bottom: 1em;}

Have you seen
http://www.complexspiral.com/publica...psing-margins/ ?

Might help in understanding the available options.

[meltedown]

Alan J. Flavell wrote:

On Sat, 12 Nov 2005, meltedown wrote:

I want a space between everything but a header and a paragraph.
The stuff kchayka and Arne suggested is fine.
h4 {margin-bottom: 0;}
p {margin-top: 0; margin-bottom: 1em;}

Have you seen
http://www.complexspiral.com/publica...psing-margins/ ?

Might help in understanding the available options.

No I had't seen it. I always wondered why the headers didn't have top
margins in a div. It has tasted my patience more than once. Thanks.

[meltedown]

meltedown wrote:

Alan J. Flavell wrote:

On Sat, 12 Nov 2005, meltedown wrote:

I want a space between everything but a header and a paragraph.
The stuff kchayka and Arne suggested is fine.
h4 {margin-bottom: 0;}
p {margin-top: 0; margin-bottom: 1em;}

Have you seen
http://www.complexspiral.com/publica...psing-margins/ ?

Might help in understanding the available options.

No I had't seen it. I always wondered why the headers didn't have top
margins in a div. It has tasted my patience more than once. Thanks.

Actually, what that site says is complicated by the fact that the header
margins in firefox do not collapse like the header margins in figure 2.
Here for example, is a simple header in a div, with no styles
http://reenie.org/test/test13.htm

[kchayka]

meltedown wrote:

Alan J. Flavell wrote:

http://www.complexspiral.com/publica...psing-margins/ ?

Actually, what that site says is complicated by the fact that the header
margins in firefox do not collapse like the header margins in figure 2.

http://reenie.org/test/test13.htm

Results can be unpredictable when you trigger quirks mode:
<URL:http://hsivonen.iki.fi/doctype/>

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[meltedown]

kchayka wrote:

meltedown wrote:

Alan J. Flavell wrote:

http://www.complexspiral.com/publica...psing-margins/ ?

Actually, what that site says is complicated by the fact that the header
margins in firefox do not collapse like the header margins in figure 2.

http://reenie.org/test/test13.htm

Results can be unpredictable when you trigger quirks mode:
<URL:http://hsivonen.iki.fi/doctype/>

I added a strict doctype and the header margin still does not collapse
in firefox. http://reenie.org/test/test13.htm