|
|
Posted by mscir on 06/25/05 03:32
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>
Navigation:
[Reply to this message]
|