button/image moan

[Tim Streater]

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?

 

[Gus Richter]

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=imag...s=org.mozilla:en-US:official&client=firefox-a>

 

[dorayme]

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:

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

 

[Tim Streater]

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-USfficial&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 Streater]

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


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?

 

[Gene Wirchenko]

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

 

[dorayme]

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>

 

[Gus Richter]

Who is Shirley?

I just had to include this (LOL):

<

>

 

[Jonathan N. Little]

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