How to eliminate gap below "<h3>"

Discussion in 'HTML' started by Netx, Dec 8, 2008.

  1. Netx

    Netx Guest

    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
     
    Netx, Dec 8, 2008
    #1
    1. Advertising

  2. Netx

    dorayme Guest

    In article <493cde53$0$29452$>,
    "Netx" <> wrote:

    > 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;}

    --
    dorayme
     
    dorayme, Dec 8, 2008
    #2
    1. Advertising

  3. dorayme wrote:
    > In article <493cde53$0$29452$>,
    > "Netx" <> wrote:
    >
    >> 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;}
    >


    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

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Dec 8, 2008
    #3
  4. Netx

    Ari Heino Guest

    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.

    --
    Ari
    http://users.utu.fi/athein/
     
    Ari Heino, Dec 8, 2008
    #4
  5. Ari Heino wrote:
    > 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; }
    >


    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...


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Dec 8, 2008
    #5
  6. Ari Heino wrote:

    > 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.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Dec 8, 2008
    #6
  7. Netx

    Bergamot Guest

    Jonathan N. Little wrote:
    > Ari Heino wrote:
    >> h3 + ul { margin-top: 0; }
    >>
    >> 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...


    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.

    --
    Berg
     
    Bergamot, Dec 8, 2008
    #7
  8. Bergamot wrote:
    >
    > Jonathan N. Little wrote:
    >> Ari Heino wrote:
    >>> h3 + ul { margin-top: 0; }
    >>>
    >>> 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...

    >
    > 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

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Dec 8, 2008
    #8
  9. On Mon, 8 Dec 2008 09:44:06 +0100, Netx wrote:
    > 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
    --
    Marvin L Jones | jonz | W3DHJ | linux
    38.24N 104.55W | @ config.com | Jonesy | OS/2
    * Killfiling google & XXXXbanter.com: jonz.net/ng.htm
     
    Allodoxaphobia, Dec 8, 2008
    #9
  10. Netx

    dorayme Guest

    In article <1ae16$493d6fb0$40cba7b7$>,
    "Jonathan N. Little" <> wrote:

    > Bergamot wrote:
    > >
    > > Jonathan N. Little wrote:
    > >> Ari Heino wrote:
    > >>> h3 + ul { margin-top: 0; }
    > >>>
    > >>> 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...

    > >
    > > 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


    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
     
    dorayme, Dec 8, 2008
    #10
  11. Netx

    dorayme Guest

    In article <>,
    Allodoxaphobia <> wrote:

    > On Mon, 8 Dec 2008 09:44:06 +0100, Netx wrote:
    > > 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.
    >


    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.

    --
    dorayme
     
    dorayme, Dec 8, 2008
    #11
  12. On Tue, 09 Dec 2008 08:16:45 +1100, dorayme wrote:
    > Allodoxaphobia wrote:
    >> On Mon, 8 Dec 2008 09:44:06 +0100, Netx wrote:
    >> > 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.
    >>

    >
    > 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
    --
    Marvin L Jones | jonz | W3DHJ | linux
    38.24N 104.55W | @ config.com | Jonesy | OS/2
    * Killfiling google & XXXXbanter.com: jonz.net/ng.htm
     
    Allodoxaphobia, Dec 8, 2008
    #12
  13. Allodoxaphobia wrote:

    >> 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>:


    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?

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Dec 8, 2008
    #13
  14. 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

    --
    Nigel Moss | http://www.nigenet.org.uk
    Email not valid. - take the dog out!
    "You're mother ate my dog!", "Not all of him..."
     
    nice.guy.nige, Dec 10, 2008
    #14
  15. Netx

    Bergamot Guest

    nice.guy.nige wrote:
    > 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?? ;-)


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

    No other font will do. ;)

    --
    Berg
     
    Bergamot, Dec 10, 2008
    #15
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. GAP and Java

    , Dec 5, 2004, in forum: Java
    Replies:
    2
    Views:
    968
    Gordon Beaton
    Dec 6, 2004
  2. crispy
    Replies:
    6
    Views:
    486
    crispy
    Jul 4, 2003
  3. Wayfarer
    Replies:
    2
    Views:
    424
    Toby A Inkster
    Sep 30, 2003
  4. chlori

    Gap in IE, no gap in FF

    chlori, Jan 19, 2006, in forum: HTML
    Replies:
    1
    Views:
    461
    kchayka
    Jan 19, 2006
  5. kiran
    Replies:
    12
    Views:
    1,128
    Scott Sauyet
    Dec 7, 2011
Loading...

Share This Page