button/image moan

Discussion in 'HTML' started by Tim Streater, Apr 20, 2012.

  1. Tim Streater

    Tim Streater Guest

    Here's another one - I have a button with a small image in it thus:

    <button id="plusbut" type='button'><img src='iLetter-Icons/plusbut.png'
    style="padding-top: 2px;"></button>

    I added the padding-top as it seemed the only way to have the image
    properly centred vertically in the button shape. I've checked the image
    by blowing it up in Preview, and it's a plus-sign 18 x 18 pixels with
    the image dead-centre in the 18 by 18. But unless I add the padding-top,
    it sits a little high in the button. The padding makes the button
    fractionally taller and thus centres the image.

    But this must be a hack, shirley. What should I be doing?

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Apr 20, 2012
    #1
    1. Advertising

  2. Tim Streater

    Gus Richter Guest

    On 4/20/2012 11:29 AM, Tim Streater wrote:
    > Here's another one - I have a button with a small image in it thus:
    >
    > <button id="plusbut" type='button'><img src='iLetter-Icons/plusbut.png'
    > style="padding-top: 2px;"></button>
    >
    > I added the padding-top as it seemed the only way to have the image
    > properly centred vertically in the button shape. I've checked the image
    > by blowing it up in Preview, and it's a plus-sign 18 x 18 pixels with
    > the image dead-centre in the 18 by 18. But unless I add the padding-top,
    > it sits a little high in the button. The padding makes the button
    > fractionally taller and thus centres the image.
    >
    > But this must be a hack, shirley. What should I be doing?



    Who is Shirley?

    Add display:block; or vertical-align:bottom; to the img in order to
    remove the bottom space.
    For why, see the following:
    <https://www.google.ca/search?q=image+bottom+space&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:eek:fficial&client=firefox-a>

    --
    Gus
     
    Gus Richter, Apr 20, 2012
    #2
    1. Advertising

  3. Tim Streater

    dorayme Guest

    In article <>,
    Tim Streater <> wrote:

    > Here's another one - I have a button with a small image in it thus:
    >
    > <button id="plusbut" type='button'><img src='iLetter-Icons/plusbut.png'
    > style="padding-top: 2px;"></button>
    >
    > I added the padding-top as it seemed the only way to have the image
    > properly centred vertically in the button shape.


    A slight downside as a strategy when the user ups his or her text size
    with Zoom Text Only. Read on.

    > I've checked the image
    > by blowing it up in Preview, and it's a plus-sign 18 x 18 pixels with
    > the image dead-centre in the 18 by 18. But unless I add the padding-top,
    > it sits a little high in the button.


    The reason it sits high is that an img element is by default an inline
    element, it acts like a big character, leaving room for descender
    space.

    I have various things on this scattered about, I notice this is still
    on my server:

    <http://dorayme.netweaver.com.au/alt/inlinePicWithDescenderSpace.html>

    > The padding makes the button
    > fractionally taller and thus centres the image.
    >
    > But this must be a hack, shirley. What should I be doing?


    Try 'display: block' on the img element.

    Hope this helps,

    Shirley

    --
    dorayme
     
    dorayme, Apr 20, 2012
    #3
  4. Tim Streater

    Tim Streater Guest

    In article <jms4g9$5il$>,
    Gus Richter <> wrote:

    > On 4/20/2012 11:29 AM, Tim Streater wrote:
    > > Here's another one - I have a button with a small image in it thus:
    > >
    > > <button id="plusbut" type='button'><img src='iLetter-Icons/plusbut.png'
    > > style="padding-top: 2px;"></button>
    > >
    > > I added the padding-top as it seemed the only way to have the image
    > > properly centred vertically in the button shape. I've checked the image
    > > by blowing it up in Preview, and it's a plus-sign 18 x 18 pixels with
    > > the image dead-centre in the 18 by 18. But unless I add the padding-top,
    > > it sits a little high in the button. The padding makes the button
    > > fractionally taller and thus centres the image.
    > >
    > > But this must be a hack, shirley. What should I be doing?


    > Who is Shirley?


    Lost in the mists of time.

    > Add display:block; or vertical-align:bottom; to the img in order to
    > remove the bottom space.
    > For why, see the following:
    > <https://www.google.ca/search?q=image bottom space&ie=utf-8&oe=utf-8&aq=t&rls=
    > org.mozilla:en-US:eek:fficial&client=firefox-a>


    Odd, I thought I'd tried vertical-align:bottom; to the img to no avail.
    Anyway, display:block improves matters, so thanks for that. And the link
    did provide an explanation, which is always useful.

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Apr 20, 2012
    #4
  5. Tim Streater

    Tim Streater Guest

    In article <>,
    dorayme <> wrote:

    > In article <>,
    > Tim Streater <> wrote:
    >
    > > Here's another one - I have a button with a small image in it thus:
    > >
    > > <button id="plusbut" type='button'><img src='iLetter-Icons/plusbut.png'
    > > style="padding-top: 2px;"></button>
    > >
    > > I added the padding-top as it seemed the only way to have the image
    > > properly centred vertically in the button shape.

    >
    > A slight downside as a strategy when the user ups his or her text size
    > with Zoom Text Only. Read on.
    >
    > > I've checked the image
    > > by blowing it up in Preview, and it's a plus-sign 18 x 18 pixels with
    > > the image dead-centre in the 18 by 18. But unless I add the padding-top,
    > > it sits a little high in the button.

    >
    > The reason it sits high is that an img element is by default an inline
    > element, it acts like a big character, leaving room for descender
    > space.
    >
    > I have various things on this scattered about, I notice this is still
    > on my server:


    Scattered about? Shirley not! Hint, hint, eh?

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Apr 20, 2012
    #5
  6. On Fri, 20 Apr 2012 16:29:51 +0100, Tim Streater
    <> wrote:

    >Here's another one - I have a button with a small image in it thus:

    ^^^^^
    ><button id="plusbut" type='button'><img src='iLetter-Icons/plusbut.png'
    >style="padding-top: 2px;"></button>
    >
    >I added the padding-top as it seemed the only way to have the image
    >properly centred vertically in the button shape. I've checked the image
    >by blowing it up in Preview, and it's a plus-sign 18 x 18 pixels with
    >the image dead-centre in the 18 by 18. But unless I add the padding-top,
    >it sits a little high in the button. The padding makes the button
    >fractionally taller and thus centres the image.
    >
    >But this must be a hack, shirley. What should I be doing?


    Use a larger image of Shirley? Something from a horror film if
    you want a hack.

    Sincerely,

    Gene Wirchenko
     
    Gene Wirchenko, Apr 20, 2012
    #6
  7. Tim Streater

    dorayme Guest

    In article <>,
    Tim Streater <> wrote:

    > In article <>,
    > dorayme <> wrote:
    >
    > > In article <>,
    > > Tim Streater <> wrote:
    > >
    > > > Here's another one - I have a button with a small image in it thus:
    > > >
    > > > <button id="plusbut" type='button'><img src='iLetter-Icons/plusbut.png'
    > > > style="padding-top: 2px;"></button>
    > > >
    > > > I added the padding-top as it seemed the only way to have the image
    > > > properly centred vertically in the button shape.

    > >
    > > A slight downside as a strategy when the user ups his or her text size
    > > with Zoom Text Only. Read on.
    > >
    > > > I've checked the image
    > > > by blowing it up in Preview, and it's a plus-sign 18 x 18 pixels with
    > > > the image dead-centre in the 18 by 18. But unless I add the padding-top,
    > > > it sits a little high in the button.

    > >
    > > The reason it sits high is that an img element is by default an inline
    > > element, it acts like a big character, leaving room for descender
    > > space.
    > >
    > > I have various things on this scattered about, I notice this is still
    > > on my server:

    >
    > Scattered about? Shirley not! Hint, hint, eh?


    Yeah righto, it's on my to-do list! As is to experiment with software
    kindly sent to me! <g>

    --
    dorayme
     
    dorayme, Apr 21, 2012
    #7
  8. Tim Streater

    Gus Richter Guest

    On 4/20/2012 12:56 PM, Gus Richter wrote:
    > Who is Shirley?


    I just had to include this (LOL):

    <http://www.youtube.com/watch?v=CsrfovOPcjk>

    --
    Gus
     
    Gus Richter, Apr 21, 2012
    #8
  9. Hot-Text wrote:
    > <input type="button" src="iLetter-Icons/plusbut.png"
    > style="padding-top: 2px;" id="plusbut"/>


    Do you ever research *before* you post "solutions"? Or at least test
    your code?

    Of course you don't. If you lookup the INPUT element

    <http://www.w3.org/TR/html401/interact/forms.html#edef-INPUT>

    Yes there is an input of type "button" but the "src" attribute, well
    let's post the W3's words:

    "src = uri [CT]
    When the type attribute has the value "image", this attribute
    specifies the location of the image to be used to decorate the graphical
    submit button."


    So the choice for the OP is either to use "INPUT TYPE=IMAGE" or use
    BUTTON element with an IMG, but style the IMG from the default inline to
    block to remove the descender reserved space for inline elements...


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Apr 21, 2012
    #9
    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. Purvi T
    Replies:
    0
    Views:
    882
    Purvi T
    Oct 19, 2004
  2. Russell
    Replies:
    3
    Views:
    6,948
    Lau Lei Cheong
    Jun 24, 2004
  3. James Storey via JavaKB.com
    Replies:
    7
    Views:
    11,510
  4. Gus Richter

    Re: float moan

    Gus Richter, Apr 20, 2012, in forum: HTML
    Replies:
    5
    Views:
    672
    dorayme
    Apr 21, 2012
  5. dorayme

    Re: float moan

    dorayme, Apr 20, 2012, in forum: HTML
    Replies:
    9
    Views:
    1,678
    dorayme
    Apr 22, 2012
Loading...

Share This Page