|
|
Posted by Ron Brennan on 06/25/05 04:22
"mscir" <mscir@yahoo.com> wrote in message
news:uIGdnURtsbevOyHfRVn-3Q@pghconnect.com...
> 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 }
Navigation:
[Reply to this message]
|