Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > button/image moan

Reply
Thread Tools

button/image moan

 
 
Tim Streater
Guest
Posts: n/a
 
      04-20-2012
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
 
Reply With Quote
 
 
 
 
Gus Richter
Guest
Posts: n/a
 
      04-20-2012
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-USfficial&client=firefox-a>

--
Gus

 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      04-20-2012
In article <(E-Mail Removed)>,
Tim Streater <(E-Mail Removed)> 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
 
Reply With Quote
 
Tim Streater
Guest
Posts: n/a
 
      04-20-2012
In article <jms4g9$5il$(E-Mail Removed)>,
Gus Richter <(E-Mail Removed)> 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...tf-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

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
 
Reply With Quote
 
Tim Streater
Guest
Posts: n/a
 
      04-20-2012
In article <(E-Mail Removed)>,
dorayme <(E-Mail Removed)> wrote:

> In article <(E-Mail Removed)>,
> Tim Streater <(E-Mail Removed)> 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
 
Reply With Quote
 
Gene Wirchenko
Guest
Posts: n/a
 
      04-20-2012
On Fri, 20 Apr 2012 16:29:51 +0100, Tim Streater
<(E-Mail Removed)> 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
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      04-20-2012
In article <(E-Mail Removed)>,
Tim Streater <(E-Mail Removed)> wrote:

> In article <(E-Mail Removed)>,
> dorayme <(E-Mail Removed)> wrote:
>
> > In article <(E-Mail Removed)>,
> > Tim Streater <(E-Mail Removed)> 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
 
Reply With Quote
 
Gus Richter
Guest
Posts: n/a
 
      04-21-2012
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

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      04-21-2012
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Gutsy moan Lodi NZ Computing 9 11-15-2007 08:42 AM
New releases: Black Snake Moan, The Last Mimzy & Weeds: Season 2: Updated complete downloadable R1 DVD DB & info lists Doug MacLean DVD Video 0 05-08-2007 05:11 AM
Cisco 871 whine / rant / moan etc (long) fm Cisco 2 07-01-2006 09:01 PM
where's Firefox 1.5 for British-English ? ( whinge, moan, whinge) falsename Firefox 13 12-07-2005 11:58 AM
test...don't moan!! fredcromer Computer Support 5 04-29-2004 11:33 PM



Advertisments