Re: Annoying Blank Line

Discussion in 'HTML' started by David Egan, Jun 4, 2004.

  1. David Egan

    David Egan Guest

    The following two line are contained in an externally linked css file



    <style>

    p.question {font: bold 9pt arial, verdana, helvetica, sans-serif; color:
    #000000;}

    p.answer {font: normal 9pt arial, verdana, helvetica, sans-serif; color:
    #421CCE;}

    </style>



    Now in my web page I am creating a FAQ section the question is presented in
    bold 9pt arial and the answer I want directly beneath the question with no
    blank line between the question and answer. Again the answer will be in 9pt
    arial normal The syntax in my web page is as follows:



    <p class="question">01. Is the unit buried below ground?</p>

    <p class="answer">Yes, the unit is normally finished at ground level, except
    for the electrical control box (11.5 inches high).Enviropak do not consider
    having electrics below ground to be good practice.</p>



    When the above html is displayed in the browser a blank line appears between
    the question and answer



    Any help appreciated.



    Regards



    David
    David Egan, Jun 4, 2004
    #1
    1. Advertising

  2. David Egan

    rf Guest

    "David Egan" <> wrote in message
    news:c9pr28$s25$...
    > The following two line are contained in an externally linked css file


    > p.question {font: bold 9pt arial, verdana, helvetica, sans-serif; color:
    > #000000;}


    Never specify font size in points, it triggers a bug in the most used
    browser that precludes your viewer from changing her font size. Plus, never
    use Verdana, its not a web friendly font.
    >
    > p.answer {font: normal 9pt arial, verdana, helvetica, sans-serif; color:
    > #421CCE;}


    Why repeat the font specifications? Specify them once in the body rule and
    be done with it.

    > Now in my web page I am creating a FAQ section the question is presented

    in
    > bold 9pt arial and the answer I want directly beneath the question with no
    > blank line between the question and answer. Again the answer will be in

    9pt
    > arial normal The syntax in my web page is as follows:


    <snip paragraphs>

    > When the above html is displayed in the browser a blank line appears

    between
    > the question and answer


    Yep. That is what the paragraph element does. In your case you should look
    into margin-top and/or margin-bottom for your question and/or answer rules.

    Cheers
    Richard.
    rf, Jun 4, 2004
    #2
    1. Advertising

  3. David Egan

    Neal Guest

    On Fri, 4 Jun 2004 13:38:46 +0100, David Egan <>
    wrote:

    > The following two line are contained in an externally linked css file
    >
    >
    >
    > <style>
    >
    > p.question {font: bold 9pt arial, verdana, helvetica, sans-serif; color:
    > #000000;}
    >
    > p.answer {font: normal 9pt arial, verdana, helvetica, sans-serif; color:
    > #421CCE;}
    >
    > </style>
    > When the above html is displayed in the browser a blank line appears
    > between
    > the question and answer


    Previous reply is right on. Point is for paper, and put that font
    declaration higher up the hierarchy rather than repeat it over and over.

    Browsers generally space p elements apart by default. Generally this is
    done with margin-bottom, and some browsers also set margin-top. Set both
    so they collapse properly in all browsers.

    body {font: 100% arial, verdana, helvetica, sans-serif; color: #000000}
    p.question, p.answer {font-weight: bold}
    p.answer {color: #421CCE; margin-top: 0.25em}
    p.question {margin-bottom: 0.25em}
    Neal, Jun 4, 2004
    #3
  4. David Egan

    Mabden Guest

    "Neal" <> wrote in message
    news:eek:...
    > On Fri, 4 Jun 2004 13:38:46 +0100, David Egan <>
    > wrote:
    >
    > > The following two line are contained in an externally linked css file
    > >
    > >
    > >
    > > <style>
    > >
    > > p.question {font: bold 9pt arial, verdana, helvetica, sans-serif;

    color:
    > > #000000;}
    > >
    > > p.answer {font: normal 9pt arial, verdana, helvetica, sans-serif;

    color:
    > > #421CCE;}
    > >
    > > </style>
    > > When the above html is displayed in the browser a blank line appears
    > > between
    > > the question and answer

    >
    > Previous reply is right on. Point is for paper, and put that font
    > declaration higher up the hierarchy rather than repeat it over and over.
    >
    > Browsers generally space p elements apart by default. Generally this is
    > done with margin-bottom, and some browsers also set margin-top. Set both
    > so they collapse properly in all browsers.
    >
    > body {font: 100% arial, verdana, helvetica, sans-serif; color: #000000}
    > p.question, p.answer {font-weight: bold}
    > p.answer {color: #421CCE; margin-top: 0.25em}
    > p.question {margin-bottom: 0.25em}



    I'm not sure how this syntax works:
    p.question, p.answer {...}

    But the "answer" seems to be desired as normal, not bold, so I assume this
    would work better (untested):

    body {font: 100% arial, helvetica, sans-serif; color: #000000}
    p.answer {color: #421CCE; margin-top: 0.25em}
    p.question {font-weight: bold; margin-bottom: 0.25em}

    I also removed the veranda, as it renders badly on some browsers.

    --
    Mabden
    Mabden, Jun 4, 2004
    #4
  5. David Egan

    Neal Guest

    On Fri, 04 Jun 2004 20:57:14 GMT, Mabden <> wrote:

    > I'm not sure how this syntax works:
    > p.question, p.answer {...}


    Sets identical styles for more than one selector. If two selectors are
    identically styled except for say one thing, set them both the same, and
    then change the one to what it should be.

    Like:

    ..hot, .important {font-size: 105%; color: red; background: transparent;
    font-weight: bold;}
    ..hot {font-weight: normal}

    > But the "answer" seems to be desired as normal, not bold,


    I missed that, you're absolutely right.
    Neal, Jun 5, 2004
    #5
  6. Quoth the raven Mabden:

    > I also removed the veranda, as it renders badly on some browsers.


    Why? Your wireless laptop would have worked well on the veranda. ;-)

    --
    -bts
    -This space intentionally couldn't resist.
    Beauregard T. Shagnasty, Jun 5, 2004
    #6
    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. Alan Connor
    Replies:
    0
    Views:
    3,045
    Alan Connor
    May 7, 2005
  2. Hugo
    Replies:
    10
    Views:
    1,307
    Matt Humphrey
    Oct 18, 2004
  3. kaushikshome
    Replies:
    4
    Views:
    763
    kaushikshome
    Sep 10, 2006
  4. scad
    Replies:
    23
    Views:
    1,163
    Alf P. Steinbach
    May 17, 2009
  5. Marek Stepanek
    Replies:
    12
    Views:
    412
    Peter J. Holzer
    Sep 2, 2006
Loading...

Share This Page