How to eliminate gap below "<h3>"

[Netx]

I try in vain to eliminate the vertical space between <h3> and
the following text. What style tags or other tags will help?
http://www.cavea.yoyo.pl/index2.html
Currently I have displayed:
"Main Menu


aaa"
And I need:
"Main Menu
aaa"

There will be a list (<ul>) in place of "aaa" and I don't want to
have vertical gap between the title of menu and the <ul> list.
Please advise how to achieve this as I have checked a lot of
style tags and don't know how to manage to do that.

Thanks,
Mark

 

[dorayme]

I try in vain to eliminate the vertical space between <h3> and
the following text. What style tags or other tags will help?
http://www.cavea.yoyo.pl/index2.html
Currently I have displayed:
"Main Menu


aaa"
And I need:
"Main Menu
aaa"

There will be a list (<ul>) in place of "aaa" and I don't want to
have vertical gap between the title of menu and the <ul> list.
Please advise how to achieve this as I have checked a lot of
style tags and don't know how to manage to do that.

<h3>Main Menu</h3>
<p>aaa</p>


h3 {margin-bottom: 0;}
p {margin-top: 0;}

 

[Jonathan N. Little]

<h3>Main Menu</h3>
<p>aaa</p>


h3 {margin-bottom: 0;}
p {margin-top: 0;}

Or if you do not want to get rid of the top margin on *all* P elements
but just the ones following an H3 element then use an adjacent sibling
selector:

h3 + p {margin-top: 0;}

*Of course you guessed it...no <= IE6 support

 

[Ari Heino]

Jonathan N. Little kirjoitti seuraavasti:

Or if you do not want to get rid of the top margin on *all* P elements
but just the ones following an H3 element then use an adjacent sibling
selector:

h3 + p {margin-top: 0;}

And to be precise, OP will put a list after the h3, so
h3 + ul { margin-top: 0; }

Specific list and/or header identifiers can also be used to make it work
also in IE6 etc.

 

[Jonathan N. Little]

Jonathan N. Little kirjoitti seuraavasti:

And to be precise, OP will put a list after the h3, so
h3 + ul { margin-top: 0; }

Yes, had to go back in the thread, that info was not carried through...

Specific list and/or header identifiers can also be used to make it work
also in IE6 etc.

Yes IE6 requires to to add an extra class or id...

 

[Jukka K. Korpela]

And to be precise, OP will put a list after the h3, so
h3 + ul { margin-top: 0; }

Specific list and/or header identifiers can also be used to make it
work also in IE6 etc.

I think it is generally questionable whether lists should have top margin by
default. Why should they? There is quite often a block with default bottom
margin before the list anyway. If there isn't, the odds are that the list
logically associates with the preceding text (like a list header) so closely
that a gap is undesirable.

So maybe it's best to set
ul, ol, dl { margin-top: 0; }
and specify, using class attributes or otherwise, a top margin for a list in
the rare cases where a margin is needed.

 

[Bergamot]

Yes IE6 requires to to add an extra class or id...

Or just leave IE6 with the extra space and forget about it. I'd rather
keep the code leaner than have a bunch of excess selectors just for IE6.
Its numbers dwindle a little more each month and I'm personally sick of
catering to it.

 

[Jonathan N. Little]

Or just leave IE6 with the extra space and forget about it. I'd rather
keep the code leaner than have a bunch of excess selectors just for IE6.
Its numbers dwindle a little more each month and I'm personally sick of
catering to it.

Amen to that...I have begun to take the same tack

 

[Allodoxaphobia]

I try in vain to eliminate the vertical space between <h3> and
the following text. What style tags or other tags will help?

for me: <h3 style="line-height: 80%;">

Adjust the % as necessary.

Works here in konqueror, Firefox, Opera, and in IE6 running under wine.

Jonesy

 

[dorayme]

Amen to that...I have begun to take the same tack

The revolutionary movement has started in earnest, you few serious
minded cadres as seed and the world will be yours... no, ours, (I think
I'll join)

 

[dorayme]

for me: <h3 style="line-height: 80%;">

Adjust the % as necessary.

Works here in konqueror, Firefox, Opera, and in IE6 running under wine.

Not a good idea though as a practice because headings can (and
desirably) wrap when browser width cannot hold the text on one line
(accelerated by large user font-sizes). See the cramped effect.

 

[Allodoxaphobia]

Not a good idea though as a practice because headings can (and
desirably) wrap when browser width cannot hold the text on one line
(accelerated by large user font-sizes). See the cramped effect.

True, I guess. But..
Seems to play nice with an <h3> following an <h1>:

<h1 style="line-height: 80%;">Short Text 1</h1>
<h3 style="line-height: 80%;">Short Text 2</h3>

Here I employ simple, short, sweet <header> texts.
I check my results by shrinking the size of my browser(s) windows to 640.
KDE is nice because it'll display the size of the window as you resize it.

On a few of my web pages I have the comment, to wit:

"If you're still browsing the World Wide Web using 640x480
resolution, ask your grand-daughter to change it for you."

Jonesy

 

[Jukka K. Korpela]

True, I guess. But..
Seems to play nice with an <h3> following an <h1>:

It's a foolish play, in a world where adequate approaches (mentioned in the
discussion) exist. Besides, on my browser, this styling really has no
effect:

<h1 style="line-height: 80%;">Short Text 1</h1>
<h3 style="line-height: 80%;">Short Text 2</h3>

A 3rd level heading after a 1st level heading? Who stole the entire 2nd
level?

And it looks bad e.g. when a background color is used for headings (which is
a nice way to highlight headings in user style sheets, for example - for any
reasonably-authored pages).

On a few of my web pages I have the comment, to wit:

"If you're still browsing the World Wide Web using 640x480
resolution, ask your grand-daughter to change it for you."

It's a very useful bogosity indicator. I would surely not devote even a 640
by 480 window to viewing such a page, even if my monitor can accommodate a
few such windows. Could I suggest that you add
<blink><marquee><font color=red size=7>...</font></marquee></blink>
markup around this important message?

 

[nice.guy.nige]

While the city slept, Jukka K. Korpela feverishly typed:

[...]

<blink><marquee><font color=red size=7>...</font></marquee></blink>

[...]

<font color=red bgcolor=green size=7>

.... surely?? ;-)

Cheers,
Nige

 

[Bergamot]

While the city slept, Jukka K. Korpela feverishly typed:


<font color=red bgcolor=green size=7>

... surely?? ;-)

<font color=red bgcolor=green size=7 face="Comic Sans MS">

No other font will do.