|
|
Posted by Jim S on 09/25/07 15:33
On Tue, 25 Sep 2007 11:02:17 -0400, Jonathan N. Little wrote:
> Jim S wrote:
>> On Mon, 24 Sep 2007 22:23:27 -0400, Jonathan N. Little wrote:
>
>>>
>>> This might help you in your further exploration:
>>> http://www.w3.org/TR/CSS21/propidx.html
>>
>> Thanks AND vertical-align: middle; too.
>> BUT although the horizontal one works in IE, the vertical one does not :o(
>
> If you look at the link I provided your will see that vertical-align:
> applies to inline-level and 'table-cell' elements
>
> http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align
>
> of which DIV are not a member. Now you could apply display: table-cell;
> to the DIV or A, *but* (did you guess correctly?) don't expect MSIE to
> accommodate. If your texts it only only line then setting the block's
> height=line-height will do what you wish...
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
> <html>
> <head>
> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
> <meta http-equiv="content-language" content="en-us">
>
> <title>vertical center</title>
>
> <style type="text/css">
>
> a.fauxbutton {
>
> /* convert the inline element */
> display: block;
>
> /* color and style it like a button */
> color: #000; background-color: #aaa;
> border: 3px outset #aaa;
> font-family: sans-serif; text-decoration: none;
>
> /* make the width in relative em's to hold your text */
> width: 15em;
>
> /* center your text horizonatally */
> text-align: center;
>
> /* now to center vertically make height=line-height */
> height: 2em; line-height: 2em;
> }
>
> a:hover { background-color: #ccc; }
>
> </style>
>
> </head>
> <body>
>
> <p>Let's try to make a button for you:
> <a href="http://www.example.com" class="fauxbutton">A fake Button</a>
> </p>
> </body>
> </html>
Thanks Jonathan
I can do all that, but of course when I do, the one word buttons are only
the height of the word and two longer words are twice as high.
If I make the button 48px high then the single word stays at the top in IE
regardless of the vertical-align: middle; command.
To make matters even worse Firefox totally disregards the dimensions
altogether and displays the button in a single line or varying length.
What I am after is a button version of the grey boxes in
www.priorysingers.org.uk
--
Jim S
Tyneside UK
www.jimscott.co.uk
Navigation:
[Reply to this message]
|