Button text not centered

R

Ron Brennan

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
 
S

Sid Ismail

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


<button> </button> valid HTML?

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

Sid
 
M

mscir

Ron said:
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
Click to expand...

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

Ron Brennan

mscir said:
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>
Click to expand...

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
 
R

Ron Brennan

mscir said:
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>
Click to expand...

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

Ron Brennan

mscir said:
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>
Click to expand...

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 }
 
M

mscir

Ron Brennan wrote:
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
Click to expand...

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

mscir

mscir said:
Ron Brennan wrote:
Click to expand...

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
 
M

Mitja

<button> </button> valid HTML?
Click to expand...

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

Sid Ismail

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

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
<Button ...> display is fine, except for two things 1
How to position the *tooltip* comment on these buttons? 9
Help me sort out this script 1
Shift Button from Left to right, coding help 1
Div placement 2
Show text on-click with transition 2
Need help with code on website (noob) 2

Members online

Total: 95 (members: 1, guests: 94)
Robots: 230

Forum statistics

Threads
473,766
Messages
2,569,569
Members
45,042
Latest member
icassiem

Latest Threads

Top