Posted by Jonathan N. Little on 09/25/07 20:21

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 ---------------------------
<public:component>
// 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
<public:attach event="onmouseover" onevent="DoHover()">
<public:attach event="onmouseout" onevent="RestoreHover()">
<public:attach event="onmousedown" onevent="DoActive()">
<public:attach event="onmouseup" onevent="RestoreActive()">
<script type="text/jscript">
function DoHover(){
element.className += ' hover';
}
function DoActive(){
element.className += ' active';
}
function RestoreHover(){
element.className = element.className.replace(/\shover\b/,'');
}
function RestoreActive(){
element.className = element.className.replace(/\sactive\b/,'');
}
</script>
</public:component>
//---------------------------- end cut ----------------------------

--
Take care,

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

[Back to original message]