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