REALLY Basic: DIV/CSS Vertical Alignment

Discussion in 'HTML' started by Slick50, Dec 3, 2006.

  1. Slick50

    Slick50 Guest

    http://messiah.scojul.homedns.org

    Hi, I'm asking this question in the context of trying to fully comprehend
    the CSS specification. Can you explain to me why the SPAN element is hanging
    a bit below the bottom of the two IMG elements?

    And maybe suggest a preferred way to align it with the bottom of the IMG
    elements?

    Thanks.
     
    Slick50, Dec 3, 2006
    #1
    1. Advertising

  2. Slick50

    dorayme Guest

    In article <A%tch.6697$>,
    "Slick50" <> wrote:

    > http://messiah.scojul.homedns.org


    Try this as your html, unlink your css file:


    <div style="border:0;padding:0;font-size:2em;">abc...xyz
    <img style="border:0;padding:0;" src="images/square.gif">
    abc...xyz<img style="border:0;padding:0; "src="images/hands.gif">
    abc...xyz
    </div>

    Your "hands" img has white around it and, relevantly, at the
    bottom, giving the illusion causing your puzzle.

    There is much wrong with your code, apart from this.

    --
    dorayme
     
    dorayme, Dec 3, 2006
    #2
    1. Advertising

  3. Slick50

    dorayme Guest

    In article
    <>,
    dorayme <> wrote:

    > In article <A%tch.6697$>,
    > "Slick50" <> wrote:
    >
    > > http://messiah.scojul.homedns.org

    >
    > Try this as your html, unlink your css file:
    >
    >
    > <div style="border:0;padding:0;font-size:2em;">abc...xyz
    > <img style="border:0;padding:0;" src="images/square.gif">
    > abc...xyz<img style="border:0;padding:0; "src="images/hands.gif">
    > abc...xyz
    > </div>
    >
    > Your "hands" img has white around it and, relevantly, at the
    > bottom, giving the illusion causing your puzzle.
    >
    > There is much wrong with your code, apart from this.


    In case you are wondering, I should add, images have no
    descenders, some letters have, hence the going below for just
    these letters (none in your text if I recall).

    And in case you were not sure what I meant about the white space
    in the image of the hands, open it in an image editor and crop it
    closer to the bottom of the lowest blue hand.

    --
    dorayme
     
    dorayme, Dec 3, 2006
    #3
    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. Nik Coughin

    Vertical alignment in a div

    Nik Coughin, Jan 21, 2004, in forum: HTML
    Replies:
    9
    Views:
    5,331
    Nik Coughin
    Jan 28, 2004
  2. rfq
    Replies:
    3
    Views:
    535
  3. =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=

    [CSS] Div-Tag and Vertical Align

    =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=, Aug 19, 2006, in forum: HTML
    Replies:
    6
    Views:
    22,536
    dorayme
    Aug 22, 2006
  4. =?Utf-8?B?TFc=?=
    Replies:
    8
    Views:
    427
    =?Utf-8?B?TFc=?=
    Apr 25, 2007
  5. LW
    Replies:
    1
    Views:
    180
    Alexey Smirnov
    May 2, 2007
Loading...

Share This Page