Help needed with css button

Re: Help needed with css button

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-ali gn

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

"http://www.w3.org/TR/html4/strict.dtd">

Let's try to make a button for you:

Re: Help needed with css button

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-ali gn
>
> 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...
>
> > "http://www.w3.org/TR/html4/strict.dtd">
>
>
>
>
>
>
>
>
>
>
>
>
>

Let's try to make a button for you:
>
>

Re: Help needed with css button

OK I'm nearly there.
Using a different stylesheets for one-line and two-line buttons I have
got to this http://priorysingers.org.uk/testingIndex_1.html
It works fine in IE, but not in Firefox or Opera.
--
Jim S
Tyneside UK
www.jimscott.co.uk

Re: Help needed with css button

Jim S wrote:
> OK I'm nearly there.
> Using a different stylesheets for one-line and two-line buttons I have
> got to this http://priorysingers.org.uk/testingIndex_1.html
> It works fine in IE, but not in Firefox or Opera.

Well I would avoid "position: absolute" if I were you, can get you into
trouble. Personally your links are in a list so I would use a list!
You just set their width and if your want the links centered vertically
you can tweak the single line links...

"http://www.w3.org/TR/html4/strict.dtd">

Re: Help needed with css button

On Tue, 25 Sep 2007 14:22:41 -0400, Jonathan N. Little wrote:

> Jim S wrote:
>> OK I'm nearly there.
>> Using a different stylesheets for one-line and two-line buttons I have
>> got to this http://priorysingers.org.uk/testingIndex_1.html
>> It works fine in IE, but not in Firefox or Opera.
>
> Well I would avoid "position: absolute" if I were you, can get you into
> trouble. Personally your links are in a list so I would use a list!
> You just set their width and if your want the links centered vertically
> you can tweak the single line links...
>
> > "http://www.w3.org/TR/html4/strict.dtd">
>
>
>
>
>
>
>
>
>
>
>

>

>

>

>

>

>

>

>

Re: Help needed with css button

Jim S wrote:
> On Tue, 25 Sep 2007 14:22:41 -0400, Jonathan N. Little wrote:
>
>> Jim S wrote:
>>> OK I'm nearly there.
>>> Using a different stylesheets for one-line and two-line buttons I have
>>> got to this http://priorysingers.org.uk/testingIndex_1.html
>>> It works fine in IE, but not in Firefox or Opera.
>> Well I would avoid "position: absolute" if I were you, can get you into
>> trouble. Personally your links are in a list so I would use a list!
>> You just set their width and if your want the links centered vertically
>> you can tweak the single line links...
>>
>> >> "http://www.w3.org/TR/html4/strict.dtd">
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>

>>

>>

>>

>>

>>

>>

>>

>>

Re: Help needed with css button

8<
>>
>> Mm. Tried that here http://priorysingers.org.uk/testingIndex.html
>> I reality I'm just back where I started,except the borders seem bevelled in
>
> Don't want the bevel then change
>
> border: 3px outset #ccc; to border: 3px solid #000;
>
>> Firefox when they didn't before.
>
> You missed an important point, in my example the class "singles"
>
> ul.buttonbar a.singles { margin-top: .65em; }
>
> was ONLY applied to the links that were one line of text.
>
> your "style1" (BTW bad name, style1 means nothing) that replaces my
> "singles" you have applied to ALL your links including the 2 line
> ones... to fix just remove from those...
>
>
>

>

>

>

>

>

>

>

>

Re: Help needed with css button

Jim S wrote:

> I still mean to get to moving buttons.

Okay I think I know what you mean. You want to make the "buttons" to
look like they depress like real buttons. Well your can*

The '*' means of course MSIE will not cooperate without some hacks...

For real modern web browsers just add:

ul.buttonbar li:active { border-style: inset; }

All this does is when you mouse down on a link the parent LI's borders
swap from outset to inset style giving the appearance of a button.

Now MSIE will not work because it does not support :hover and :active
pseudo-classes on any elements other than A elements with HREF
attributes (i.e., links). So your either need to use some JavaScript
hack or use MSIE's special "behavior" property with their special HTC
file. I fine the latter easiest. You need to add a special class for IE
for the target element. The class name is "active" relating to the
pseudo-class "active" that other browser will use. I kept the names the
same to keep the purpose clear...

/* supporting browser will use this pseudo-class rule */
ul.buttonbar li:active { border-style: inset; }

/* MSIE will use this real class rule, not the '.' not ':' */
ul.buttonbar li.active { border-style: inset; }

/* use MSIE's special behavior to attach the HTC the LI elements */
ul.buttonbar li { behavior: url(IEFixes.htc); }

Here is the code for the HTC, plain text file named "IEFixes.htc" I
modified it to streamline a bit...

//--------------------------- start cut ---------------------------

// For MSIE use JScript to attach JS functions to compensate
// for missing pseudo-class support
// from Vladdy http://www.vladdy.net/Demos/IEPseudoClassesFix.html
// updated for html4.01 jnl 3/06






//---------------------------- end cut ----------------------------

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: Help needed with css button

On Tue, 25 Sep 2007 16:21:24 -0400, Jonathan N. Little wrote:

> Jim S wrote:
>
>> I still mean to get to moving buttons.
>
> Okay I think I know what you mean. You want to make the "buttons" to
> look like they depress like real buttons. Well your can*
>
> The '*' means of course MSIE will not cooperate without some hacks...
>
> For real modern web browsers just add:
>
> ul.buttonbar li:active { border-style: inset; }
>
> All this does is when you mouse down on a link the parent LI's borders
> swap from outset to inset style giving the appearance of a button.
>
> Now MSIE will not work because it does not support :hover and :active
> pseudo-classes on any elements other than A elements with HREF
> attributes (i.e., links). So your either need to use some JavaScript
> hack or use MSIE's special "behavior" property with their special HTC
> file. I fine the latter easiest. You need to add a special class for IE
> for the target element. The class name is "active" relating to the
> pseudo-class "active" that other browser will use. I kept the names the
> same to keep the purpose clear...
>
> /* supporting browser will use this pseudo-class rule */
> ul.buttonbar li:active { border-style: inset; }
>
> /* MSIE will use this real class rule, not the '.' not ':' */
> ul.buttonbar li.active { border-style: inset; }
>
> /* use MSIE's special behavior to attach the HTC the LI elements */
> ul.buttonbar li { behavior: url(IEFixes.htc); }
>
> Here is the code for the HTC, plain text file named "IEFixes.htc" I
> modified it to streamline a bit...
>
> //--------------------------- start cut ---------------------------
>
> // For MSIE use JScript to attach JS functions to compensate
> // for missing pseudo-class support
> // from Vladdy http://www.vladdy.net/Demos/IEPseudoClassesFix.html
> // updated for html4.01 jnl 3/06
>
>
>
>
>
>
> //---------------------------- end cut ----------------------------

Thanks Jonathan.
I'm going to take a break as me head hurts :o)
I know it's just fluff, but simple folk are easily impressed and it keeps
my brain ticking over.
--
Jim S
Tyneside UK
www.jimscott.co.uk

Re: Help needed with css button

Jim S wrote:

> Sorry I DO want the bevel, but my original set-up gave me a bevel in IE,
> but not in Firefox or Opera. Your list method gave me bevels in Firefox,
> but No buttons at all in Opera - just the text.
>
> By moving buttons, what I mean is a button that APPEARS to depress when
> clicked-on as my CSS buttons do in my own website.

Well see my followup post for details but your need a bevel if your want
to simulate the button press. Your buttons on http://www.jimscott.co.uk/
have a bevel. Can make it smaller...

Don't know what your problem is, my code works for all FF MSIE and Opera
here is demo again with smaller bevels... here it is again. NOTE you
will need to create the IEFixes.htc file in notepad that you can copy
from my other post in order for MSIE support.

"http://www.w3.org/TR/html4/strict.dtd">

Re: Help needed with css button

On Tue, 25 Sep 2007 16:31:27 -0400, Jonathan N. Little wrote:

> Jim S wrote:
>
>> Sorry I DO want the bevel, but my original set-up gave me a bevel in IE,
>> but not in Firefox or Opera. Your list method gave me bevels in Firefox,
>> but No buttons at all in Opera - just the text.
>>
>> By moving buttons, what I mean is a button that APPEARS to depress when
>> clicked-on as my CSS buttons do in my own website.
>
> Well see my followup post for details but your need a bevel if your want
> to simulate the button press. Your buttons on http://www.jimscott.co.uk/
> have a bevel. Can make it smaller...
>
> Don't know what your problem is, my code works for all FF MSIE and Opera
> here is demo again with smaller bevels... here it is again. NOTE you
> will need to create the IEFixes.htc file in notepad that you can copy
> from my other post in order for MSIE support.
>
> > "http://www.w3.org/TR/html4/strict.dtd">
>
>
>
>
>
>
>
>
>
>
>

>

>

>

>

>

>

>

>

Re: Help needed with css button

Jim S wrote:

> Sorry I DO want the bevel, but my original set-up gave me a bevel in
> IE, but not in Firefox or Opera. Your list method gave me bevels in
> Firefox, but No buttons at all in Opera - just the text.
>
> By moving buttons, what I mean is a button that APPEARS to depress
> when clicked-on as my CSS buttons do in my own website.

You want buttons something like these of mine? They appear to depress
when hovered, then after going to the page, they are no longer a button,
... 'cause you're *there*!

http://freezeblock.com/

BTW, your page falls apart when I increase the text size so I can read
it (your buttons).

--
-bts
-Motorcycles defy gravity; cars just suck

Re: Help needed with css button

Beauregard T. Shagnasty wrote:
> Jim S wrote:
>
>> Sorry I DO want the bevel, but my original set-up gave me a bevel in
>> IE, but not in Firefox or Opera. Your list method gave me bevels in
>> Firefox, but No buttons at all in Opera - just the text.
>>
>> By moving buttons, what I mean is a button that APPEARS to depress
>> when clicked-on as my CSS buttons do in my own website.
>
> You want buttons something like these of mine? They appear to depress
> when hovered, then after going to the page, they are no longer a
> button, .. 'cause you're *there*!
>
> http://freezeblock.com/

Slick. Any reasonably popular/current browsers you've seen issues with,
with those?


--
Blinky RLU 297263
Killing all posts from Google Groups
The Usenet Improvement Project moved to this site August 28th:
http://improve-usenet.org

Re: Help needed with css button

Blinky the Shark wrote:

> Beauregard T. Shagnasty wrote:
>> You want buttons something like these of mine? They appear to
>> depress when hovered, then after going to the page, they are no
>> longer a button, .. 'cause you're *there*!
>>
>> http://freezeblock.com/
>
> Slick. Any reasonably popular/current browsers you've seen issues
> with, with those?

No, can't say as I have. It seems to work fine in any CSS capable
browser. Even Internet Exploder. The 'no-button' on the 'current page'
is done with a small php common function, which displays only the text,
and no .

--
-bts
-Motorcycles defy gravity; cars just suck

Beauregard T. Shagnasty wrote:
> Blinky the Shark wrote:
>
>> Beauregard T. Shagnasty wrote:
>>> You want buttons something like these of mine? They appear to
>>> depress when hovered, then after going to the page, they are no
>>> longer a button, .. 'cause you're *there*!
>>>
>>> http://freezeblock.com/
>>
>> Slick. Any reasonably popular/current browsers you've seen issues
>> with, with those?
>
> No, can't say as I have. It seems to work fine in any CSS capable
> browser. Even Internet Exploder. The 'no-button' on the 'current page'
> is done with a small php common function, which displays only the text,
> and no .

Ah! Thanks.

--
Blinky RLU 297263
Killing all posts from Google Groups
The Usenet Improvement Project moved to this site August 28th:
http://improve-usenet.org

Re: Help needed with css button

Beauregard T. Shagnasty wrote:
> Blinky the Shark wrote:
>
>> Jim S wrote:
>>> Finished for now
>>> www.priorysingers.org.uk
>>> Now to learn how to build without using tables as placeholders.
>>> Thanks for your help.
>>
>> http://blinkynet.net/stuff/comp/scott.jpg
>
> My version: http://k75s.home.att.net/show/scott.jpg

Yeah, I didn't inable FireBug or WebDev or anything. Probably
should've.

> I think it is the: