You are here: Re: Button text not centered « HTML « IT news, forums, messages
Re: Button text not centered

Posted by Ron Brennan on 06/25/05 03:33

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

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

 

Navigation:

[Reply to this message]


Удаленная работа для программистов  •  Как заработать на Google AdSense  •  England, UK  •  статьи на английском  •  PHP MySQL CMS Apache Oscommerce  •  Online Business Knowledge Base  •  DVD MP3 AVI MP4 players codecs conversion help
Home  •  Search  •  Site Map  •  Set as Homepage  •  Add to Favourites

Copyright © 2005-2006 Powered by Custom PHP Programming

Сайт изготовлен в Студии Валентина Петручека
изготовление и поддержка веб-сайтов, разработка программного обеспечения, поисковая оптимизация