Button text not centered

Discussion in 'HTML' started by Ron Brennan, Jun 25, 2005.

  1. Ron Brennan

    Ron Brennan Guest

    Good evening.

    In at least IE 5.0. When I create a button with no border, the text on the
    button is no longer centered vertically - the borders do disappear but there
    is more space under the button text than above it. I've tried all the
    options I can find with no success. It's as though the bottom border is
    still present but is the same color as the button background. Is this a bug
    in the browser?

    In a linked stylesheet:

    ..localbutton { font-size: 10pt; border-style: none }

    In my html page:

    <button type=button class=localbutton id=raiseButton>MoveUp</button>

    Many thanks,
    Ron
     
    Ron Brennan, Jun 25, 2005
    #1
    1. Advertising

  2. Ron Brennan

    Sid Ismail Guest

    On Fri, 24 Jun 2005 19:42:18 -0400, "Ron Brennan" <>
    wrote:

    : <button type=button class=localbutton id=raiseButton>MoveUp</button>


    <button> </button> valid HTML?

    You meant <div> or <p> or <H2> or even <span>

    Sid
     
    Sid Ismail, Jun 25, 2005
    #2
    1. Advertising

  3. Ron Brennan

    mscir Guest

    Ron Brennan wrote:

    > Good evening.
    >
    > In at least IE 5.0. When I create a button with no border, the text on the
    > button is no longer centered vertically - the borders do disappear but there
    > is more space under the button text than above it. I've tried all the
    > options I can find with no success. It's as though the bottom border is
    > still present but is the same color as the button background. Is this a bug
    > in the browser?
    >
    > In a linked stylesheet:
    >
    > .localbutton { font-size: 10pt; border-style: none }
    >
    > In my html page:
    >
    > <button type=button class=localbutton id=raiseButton>MoveUp</button>
    >
    > Many thanks,
    > Ron


    Hi Ron,

    I can center button text by experimenting with combinations of padding
    and line-height. This works in my IE 6, Netscape 7.2, Mozilla 1.7.5,
    Firefox 1.0.3. Unfortunately I don't have IE5 so I can't test that.

    Does this work on your browser too?

    Mike

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    <html>

    <head>
    <title>Untitled</title>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
    <style type="text/css">
    ..button {
    width: 150px;
    font-size: 14px;
    padding: 14px 8px 14px 8px;
    line-height: 45px;
    border-top: 1px solid white;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 1px solid white;
    text-align: center;
    display: inline;
    background-color: #FFAABB;
    }
    </style>
    </head>

    <body>
    <a href="#"><p valign="center" class="button">CSS Button 1</p></a>
    <a href="#"><p valign="center" class="button">CSS Button 2</p></a>
    <a href="#"><p valign="center" class="button">CSS Button 3</p></a>
    <a href="#"><p valign="center" class="button">CSS Button 4</p></a>
    <a href="#"><p valign="center" class="button">CSS Button 5</p></a>
    </body>
    </html>
     
    mscir, Jun 25, 2005
    #3
  4. Ron Brennan

    Ron Brennan Guest

    "mscir" <> wrote in message
    news:...
    > Ron Brennan wrote:
    >
    > > Good evening.
    > >
    > > In at least IE 5.0. When I create a button with no border, the text on

    the
    > > button is no longer centered vertically - the borders do disappear but

    there
    > > is more space under the button text than above it. I've tried all the
    > > options I can find with no success. It's as though the bottom border is
    > > still present but is the same color as the button background. Is this a

    bug
    > > in the browser?
    > >
    > > In a linked stylesheet:
    > >
    > > .localbutton { font-size: 10pt; border-style: none }
    > >
    > > In my html page:
    > >
    > > <button type=button class=localbutton id=raiseButton>MoveUp</button>
    > >
    > > Many thanks,
    > > Ron

    >
    > Hi Ron,
    >
    > I can center button text by experimenting with combinations of padding
    > and line-height. This works in my IE 6, Netscape 7.2, Mozilla 1.7.5,
    > Firefox 1.0.3. Unfortunately I don't have IE5 so I can't test that.
    >
    > Does this work on your browser too?
    >
    > Mike
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    >
    > <html>
    >
    > <head>
    > <title>Untitled</title>
    > <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
    > <style type="text/css">
    > .button {
    > width: 150px;
    > font-size: 14px;
    > padding: 14px 8px 14px 8px;
    > line-height: 45px;
    > border-top: 1px solid white;
    > border-right: 1px solid black;
    > border-bottom: 1px solid black;
    > border-left: 1px solid white;
    > text-align: center;
    > display: inline;
    > background-color: #FFAABB;
    > }
    > </style>
    > </head>
    >
    > <body>
    > <a href="#"><p valign="center" class="button">CSS Button 1</p></a>
    > <a href="#"><p valign="center" class="button">CSS Button 2</p></a>
    > <a href="#"><p valign="center" class="button">CSS Button 3</p></a>
    > <a href="#"><p valign="center" class="button">CSS Button 4</p></a>
    > <a href="#"><p valign="center" class="button">CSS Button 5</p></a>
    > </body>
    > </html>


    Yes, <button type=button...> is valid. I'll try Mike's suggestion of
    experimenting with the various settings, but it seems that this shouldn't be
    necessary.

    Ron
     
    Ron Brennan, Jun 25, 2005
    #4
  5. Ron Brennan

    Ron Brennan Guest

    "mscir" <> wrote in message
    news:...
    > Ron Brennan wrote:
    >
    > > Good evening.
    > >
    > > In at least IE 5.0. When I create a button with no border, the text on

    the
    > > button is no longer centered vertically - the borders do disappear but

    there
    > > is more space under the button text than above it. I've tried all the
    > > options I can find with no success. It's as though the bottom border is
    > > still present but is the same color as the button background. Is this a

    bug
    > > in the browser?
    > >
    > > In a linked stylesheet:
    > >
    > > .localbutton { font-size: 10pt; border-style: none }
    > >
    > > In my html page:
    > >
    > > <button type=button class=localbutton id=raiseButton>MoveUp</button>
    > >
    > > Many thanks,
    > > Ron

    >
    > Hi Ron,
    >
    > I can center button text by experimenting with combinations of padding
    > and line-height. This works in my IE 6, Netscape 7.2, Mozilla 1.7.5,
    > Firefox 1.0.3. Unfortunately I don't have IE5 so I can't test that.
    >
    > Does this work on your browser too?
    >
    > Mike
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    >
    > <html>
    >
    > <head>
    > <title>Untitled</title>
    > <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
    > <style type="text/css">
    > .button {
    > width: 150px;
    > font-size: 14px;
    > padding: 14px 8px 14px 8px;
    > line-height: 45px;
    > border-top: 1px solid white;
    > border-right: 1px solid black;
    > border-bottom: 1px solid black;
    > border-left: 1px solid white;
    > text-align: center;
    > display: inline;
    > background-color: #FFAABB;
    > }
    > </style>
    > </head>
    >
    > <body>
    > <a href="#"><p valign="center" class="button">CSS Button 1</p></a>
    > <a href="#"><p valign="center" class="button">CSS Button 2</p></a>
    > <a href="#"><p valign="center" class="button">CSS Button 3</p></a>
    > <a href="#"><p valign="center" class="button">CSS Button 4</p></a>
    > <a href="#"><p valign="center" class="button">CSS Button 5</p></a>
    > </body>
    > </html>


    I don't have any problem when I have border, it's when I remove the border
    that I'm having the trouble. I'll play around with some of Mike's settings
    though.
     
    Ron Brennan, Jun 25, 2005
    #5
  6. Ron Brennan

    Ron Brennan Guest

    That worked

    "mscir" <> wrote in message
    news:...
    > Ron Brennan wrote:
    >
    > > Good evening.
    > >
    > > In at least IE 5.0. When I create a button with no border, the text on

    the
    > > button is no longer centered vertically - the borders do disappear but

    there
    > > is more space under the button text than above it. I've tried all the
    > > options I can find with no success. It's as though the bottom border is
    > > still present but is the same color as the button background. Is this a

    bug
    > > in the browser?
    > >
    > > In a linked stylesheet:
    > >
    > > .localbutton { font-size: 10pt; border-style: none }
    > >
    > > In my html page:
    > >
    > > <button type=button class=localbutton id=raiseButton>MoveUp</button>
    > >
    > > Many thanks,
    > > Ron

    >
    > Hi Ron,
    >
    > I can center button text by experimenting with combinations of padding
    > and line-height. This works in my IE 6, Netscape 7.2, Mozilla 1.7.5,
    > Firefox 1.0.3. Unfortunately I don't have IE5 so I can't test that.
    >
    > Does this work on your browser too?
    >
    > Mike
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    >
    > <html>
    >
    > <head>
    > <title>Untitled</title>
    > <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
    > <style type="text/css">
    > .button {
    > width: 150px;
    > font-size: 14px;
    > padding: 14px 8px 14px 8px;
    > line-height: 45px;
    > border-top: 1px solid white;
    > border-right: 1px solid black;
    > border-bottom: 1px solid black;
    > border-left: 1px solid white;
    > text-align: center;
    > display: inline;
    > background-color: #FFAABB;
    > }
    > </style>
    > </head>
    >
    > <body>
    > <a href="#"><p valign="center" class="button">CSS Button 1</p></a>
    > <a href="#"><p valign="center" class="button">CSS Button 2</p></a>
    > <a href="#"><p valign="center" class="button">CSS Button 3</p></a>
    > <a href="#"><p valign="center" class="button">CSS Button 4</p></a>
    > <a href="#"><p valign="center" class="button">CSS Button 5</p></a>
    > </body>
    > </html>


    Mike's approach, although seemingly to me unnecessary, worked.

    I varied the height explicitly (and to equal the height of another automatic
    button) and the button label centered vertically.

    ..localbutton
    { font-size: 10pt;
    width: 70px;
    height: 18px;
    border-width: 0;
    font-family:Tahoma }
     
    Ron Brennan, Jun 25, 2005
    #6
  7. Ron Brennan

    mscir Guest

    Ron Brennan wrote:
    <snip>
    > Yes, <button type=button...> is valid. I'll try Mike's suggestion of
    > experimenting with the various settings, but it seems that this shouldn't be
    > necessary.
    >
    > Ron


    Padding might be all that you need, maybe something like the code below.
    Strangely I found that IE6 treats these buttons like buttons, that is
    they graphically 'depress' (the text moves) when they are clicked. But
    Firefox 1.0.3, Netscape 7.2, and Mozilla 1.7.5 don't show the clicking
    graphic action, nothing happens when they are clicked!? They work fine
    with borders in all 4 browsers. Do you see this also? I have no clue
    about this behavior.

    Mike

    ..localbutton {
    font-size: 10pt;
    padding: 5px 8px 7px 8px;
    /* line-height: 22px; */
    margin: 3px;
    border: none;
    }

    <button type='button' class='localbutton'
    id='raiseButton1'>MoveUp</button><br>
    <button type='button' class='localbutton'
    id='raiseButton2'>MoveRight</button><br>
    <button type='button' class='localbutton'
    id='raiseButton3'>MoveDown</button><br>
    <button type='button' class='localbutton'
    id='raiseButton4'>MoveLeft</button><br>
    </body>
    </html>
     
    mscir, Jun 25, 2005
    #7
  8. Ron Brennan

    mscir Guest

    mscir wrote:

    > Ron Brennan wrote:
    > <snip>
    >
    >> Yes, <button type=button...> is valid. I'll try Mike's suggestion of
    >> experimenting with the various settings, but it seems that this
    >> shouldn't be
    >> necessary.
    >> Ron


    One way to avoid it would be to make the button background-color and
    border color the same. I think that would make the text vertically
    center normally, but it still doesn't show the 'depressed when clicked'
    look in my 3 non-IE browsers.

    background-color: #somecolor;
    border: 1px solid #somecolor;

    Mike
     
    mscir, Jun 25, 2005
    #8
  9. Ron Brennan

    Mitja Guest

    On Sat, 25 Jun 2005 02:20:28 +0200, Sid Ismail <> wrote:


    > <button> </button> valid HTML?


    Yep. Not supported exactly as well as the <input> variants, but perfectly
    valid and very flexible (see specs - can include just about anything, e.g.
    <button><table>...</table><img ...></button>).
     
    Mitja, Jun 25, 2005
    #9
  10. Ron Brennan

    Sid Ismail Guest

    On Sat, 25 Jun 2005 09:56:48 +0200, Mitja <> wrote:

    : On Sat, 25 Jun 2005 02:20:28 +0200, Sid Ismail <> wrote:
    :
    :
    : > <button> </button> valid HTML?
    :
    : Yep. Not supported exactly as well as the <input> variants, but perfectly
    : valid and very flexible (see specs - can include just about anything, e.g.
    : <button><table>...</table><img ...></button>).


    Thanks! will read up specs...

    Sid
     
    Sid Ismail, Jun 25, 2005
    #10
    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. Andrew Emberson

    centered page width for text

    Andrew Emberson, Oct 9, 2003, in forum: HTML
    Replies:
    1
    Views:
    408
    bengee
    Oct 10, 2003
  2. Replies:
    2
    Views:
    342
  3. joes
    Replies:
    2
    Views:
    450
    Neredbojias
    Sep 2, 2007
  4. AAaron123
    Replies:
    1
    Views:
    356
    AAaron123
    Jul 21, 2008
  5. Gunther Gunt
    Replies:
    0
    Views:
    96
    Gunther Gunt
    Aug 1, 2008
Loading...

Share This Page