15px is not same for image, text, submit, span

Discussion in 'HTML' started by Disc Magnet, May 29, 2010.

  1. Disc Magnet

    Disc Magnet Guest

    I created an image, a text box, a submit button and a text all of
    height 15px. But they all appear to be of different heights in Firefox
    as well as Chrome, on Linux as well as Windows.

    Here is the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>Test</title>
    </head>
    <body>
    <form action="/">
    <div style="border: 1px solid gray">
    <img src="http://www1.free-clipart.net/gallery2/icons/Alphabet/a/
    38.gif" height="15px" width="15px" style="border: 1px solid yellow"
    alt="">
    <input type="text" style="height: 15px; border: 1px solid red">
    <input type="submit" style="height: 15px; border: 1px solid
    green">
    <span style="height: 15px; border: 1px solid blue">foo</span>
    </div>
    </form>
    </body>
    </html>

    Here is an online paste for trial and experimentation (warning: the
    following link is not permanent):

    http://www.webdevout.net/test?0O

    I want all of them to be of the same size and aligned properly. Could
    anyone please help me understand the issue here and a way to fix it?
    Disc Magnet, May 29, 2010
    #1
    1. Advertising

  2. Disc Magnet

    dorayme Guest

    In article
    <
    m>,
    Disc Magnet <> wrote:

    > I created an image, a text box, a submit button and a text all of
    > height 15px. But they all appear to be of different heights in Firefox
    > as well as Chrome, on Linux as well as Windows.


    Creating text to be 15px high is like trying to creating a volume
    size balloon for an atmosphere whose pressure you have no idea
    about.

    --
    dorayme
    dorayme, May 29, 2010
    #2
    1. Advertising

  3. Disc Magnet

    freemont Guest

    On Sun, 30 May 2010 07:47:07 +1000, dorayme writ:

    > Creating text to be 15px high is like trying to creating a volume size
    > balloon for an atmosphere whose pressure you have no idea about.


    Bleh, that analogy is OLD already, heard it a million times...
    --
    â‚ "Because all you of Earth are idiots!"
    ¯`·.¸¸.·´¯`·-> ※freemont※ <-·´¯`·.¸¸.·´¯
    freemont, May 29, 2010
    #3
  4. Disc Magnet

    Disc Magnet Guest

    On May 30, 2:47 am, dorayme <> wrote:
    > In article
    > <
    > m>,
    >  Disc Magnet <> wrote:
    >
    > > I created an image, a text box, a submit button and a text all of
    > > height 15px. But they all appear to be of different heights in Firefox
    > > as well as Chrome, on Linux as well as Windows.

    >
    > Creating text to be 15px high is like trying to creating a volume
    > size balloon for an atmosphere whose pressure you have no idea
    > about.
    >
    > --
    > dorayme


    Ok, if we leave apart the text, how to fix the issue for the other
    three elements?
    Disc Magnet, May 30, 2010
    #4
  5. Disc Magnet

    dorayme Guest

    In article
    <
    >,

    Disc Magnet <> wrote:

    > On May 30, 2:47 am, dorayme <> wrote:
    > > In article
    > > <
    > > m>,
    > >  Disc Magnet <> wrote:
    > >
    > > > I created an image, a text box, a submit button and a text all of
    > > > height 15px. But they all appear to be of different heights in Firefox
    > > > as well as Chrome, on Linux as well as Windows.

    > >
    > > Creating text to be 15px high is like trying to creating a volume
    > > size balloon for an atmosphere whose pressure you have no idea
    > > about.
    > >
    > > --
    > > dorayme

    >
    > Ok, if we leave apart the text, how to fix the issue for the other
    > three elements?


    OK, the text will simply be as high as it needs to be for any
    particular user text size setting. But remember, we have here
    *four* inline elements inside a div: an img and a span and couple
    of input elements. Browsers make descender and ascender space
    provisions for inline elements so you will see space above all
    the content of the div, both above and below them.

    <http://dorayme.netweaver.com.au/discM.html>

    For a similar reason that it is a bad idea to set a pixel height
    on a span that holds the text, it is a bad idea to set a height
    on a text box; after all, where is the text to fit if the box
    provided for it, be it a span or an input box, is vertically
    inadequate. The way to work with these things is to let the text
    determine the height, don't try to fight this. And, personally, I
    would say to leave the submit button to be the recognisably
    styled thing it naturally is, bordering it changes its character

    Now, your question: if we do the right thing, what *is* the
    question? The four elements above do "line up" as best as they
    possibly can. The image top can hardly line up with the top of
    the F because it is simply taller and acts like a really big
    capital letter.

    We can make it shorter by a height adjustment in the img element
    but that would be a Pyrrhic victory, soon as a user changes the
    font size, the image would then be shorter or taller in
    comparison depending on the direction of the change. Or we can
    specify its height in em units as in the third of the examples in
    the url above. That will get the text and image to sit on the
    same base line throughout user text changes in good browsers.

    As for the bottoms... well, you cannot expect a y to line up like
    a K and if you think of it this way, perhaps you might rethink
    quite what you want to do. The submit and text inputs are
    particular objects with their own characteristics, they tend to
    be like strange capital letters but with a descending bit instead
    of the stand tall look of capitals. I can't go into it now as it
    is a long story but something happened to submit buttons a long
    time ago and they were badly humiliated and so they stand low.

    I have taken liberties with the example. Notice how much nicer
    and more familiar are the second and third inputs from the first.

    --
    dorayme
    dorayme, May 30, 2010
    #5
  6. Disc Magnet

    Paul Guest

    Disc Magnet schreef:
    > On May 30, 2:47 am, dorayme <> wrote:
    >> In article
    >> <
    >> m>,
    >> Disc Magnet <> wrote:
    >>
    >>> I created an image, a text box, a submit button and a text all of
    >>> height 15px. But they all appear to be of different heights in Firefox
    >>> as well as Chrome, on Linux as well as Windows.

    >> Creating text to be 15px high is like trying to creating a volume
    >> size balloon for an atmosphere whose pressure you have no idea
    >> about.
    >>
    >> --
    >> dorayme

    >
    > Ok, if we leave apart the text, how to fix the issue for the other
    > three elements?


    According to my documentation there is a box with, from outside to inside:
    outer edge,
    margin,
    border,
    padding,
    inner edge,
    and finaly height.

    I suppose you have to experiment giving each of these a explicit value.
    If you do so, share the results with us!

    greetings, Paul
    Paul, May 30, 2010
    #6
  7. Disc Magnet

    richard Guest

    On Sat, 29 May 2010 13:06:42 -0700 (PDT), Disc Magnet wrote:

    > I created an image, a text box, a submit button and a text all of
    > height 15px. But they all appear to be of different heights in Firefox
    > as well as Chrome, on Linux as well as Windows.
    >
    > Here is the code:
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    > TR/html4/strict.dtd">
    > <html lang="en">
    > <head>
    > <title>Test</title>
    > </head>
    > <body>
    > <form action="/">
    > <div style="border: 1px solid gray">
    > <img src="http://www1.free-clipart.net/gallery2/icons/Alphabet/a/
    > 38.gif" height="15px" width="15px" style="border: 1px solid yellow"
    > alt="">
    > <input type="text" style="height: 15px; border: 1px solid red">
    > <input type="submit" style="height: 15px; border: 1px solid
    > green">
    > <span style="height: 15px; border: 1px solid blue">foo</span>
    > </div>
    > </form>
    > </body>
    > </html>
    >
    > Here is an online paste for trial and experimentation (warning: the
    > following link is not permanent):
    >
    > http://www.webdevout.net/test?0O
    >
    > I want all of them to be of the same size and aligned properly. Could
    > anyone please help me understand the issue here and a way to fix it?


    I might suggest putting each item into a container and setting the
    container height as needed.

    A pixel is used for sizing images. A font is not necessarily sized by
    pixels. You would have to define the height of a font by a "point".
    e.g. font-size:10pt .

    If you're trying to create a look across any browser, bear in mind, the
    user may not have the font you want to use. Or the user may have his
    browser set to use a totally different font.




    --
    I learned my lesson well. You can't please everyone, so you got to please
    yourself.
    - Ricky Nelson from "Garden Party"
    richard, May 30, 2010
    #7
  8. richard wrote:

    > You would have to define the height of a font by a "point".
    > e.g. font-size:10pt .


    No, you wouldn't. Pt (points) are for printing.
    Use percentages or ems instead.

    font-size: 100%;

    --
    -bts
    -Four wheels carry the body; two wheels move the soul
    Beauregard T. Shagnasty, May 30, 2010
    #8
  9. Disc Magnet

    richard Guest

    On Sun, 30 May 2010 07:21:36 -0400, Beauregard T. Shagnasty wrote:

    > richard wrote:
    >
    >> You would have to define the height of a font by a "point".
    >> e.g. font-size:10pt .

    >
    > No, you wouldn't. Pt (points) are for printing.
    > Use percentages or ems instead.
    >
    > font-size: 100%;


    Explain this to me then. When you change your browser's setting to show a
    different font and size, do they ask what size em or point do you want to
    be in?

    As I've said before, the screen before you is virtually the same thing as a
    printed piece of paper.

    If I wanted to vary the size of a container, then I would use em's. If I
    want to change the actual text size, I use points.


    --
    I learned my lesson well. You can't please everyone, so you got to please
    yourself.
    - Ricky Nelson from "Garden Party"
    richard, May 30, 2010
    #9
  10. richard wrote:

    > Beauregard T. Shagnasty wrote:
    >> richard wrote:
    >>> You would have to define the height of a font by a "point".
    >>> e.g. font-size:10pt .

    >>
    >> No, you wouldn't. Pt (points) are for printing.
    >> Use percentages or ems instead.
    >>
    >> font-size: 100%;

    >
    > Explain this to me then. When you change your browser's setting to
    > show a different font and size, do they ask what size em or point do
    > you want to be in?


    No, my browsers simply offer a dropdown of nothing but numbers. So what?

    > As I've said before, the screen before you is virtually the same thing
    > as a printed piece of paper.


    I believe sherm has adequately answered that for you. I agree with him.

    > If I wanted to vary the size of a container, then I would use em's.
    > If I want to change the actual text size, I use points.


    Then you would be not operating in the best interests of your visitors.
    If you want do write web pages for only yourself, feel free to bung it
    up.
    http://tekrider.net/html/fontsize.php

    --
    -bts
    -Four wheels carry the body; two wheels move the soul
    Beauregard T. Shagnasty, May 30, 2010
    #10
  11. Disc Magnet

    rf Guest

    "richard" <> wrote in message
    news:16mwblc08ajls$.albahdch1df7$...
    > On Sat, 29 May 2010 13:06:42 -0700 (PDT), Disc Magnet wrote:


    > I might suggest putting each item into a container and setting the
    > container height as needed.


    And just why would that help, given that the offending items are *already*
    inside "containers"?

    > A pixel is used for sizing images. A font is not necessarily sized by
    > pixels. You would have to define the height of a font by a "point".
    > e.g. font-size:10pt .


    Absolute Bullshit RtS.
    rf, May 30, 2010
    #11
    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. tshad
    Replies:
    21
    Views:
    1,155
    kchayka
    May 22, 2005
  2. Fulio Open

    Can span include span?

    Fulio Open, Jun 26, 2009, in forum: HTML
    Replies:
    5
    Views:
    534
    dorayme
    Jun 26, 2009
  3. Stéphane Klein
    Replies:
    2
    Views:
    1,734
    John Nagle
    Mar 30, 2010
  4. Stefan Behnel
    Replies:
    0
    Views:
    474
    Stefan Behnel
    Mar 29, 2010
  5. Wang, Jay
    Replies:
    5
    Views:
    454
    Wang, Jay
    May 25, 2004
Loading...

Share This Page