From: David Laakso <da...@chelseacreekstudio.com>:
Not sure what you mean unless are taking about IE/6.0?
> If so, see:
> <http://www.twinhelix.com/css/iepngfix/>
>
Eric's page uses the :active pseudo-class on an INPUT element. IE7 doesn't
support this. I'm not sure about IE8.
So, in IE7 at least, Eric's page does not have the same visual effect on
mousedown/mouseup that it has in other browsers.
From: Gabriele Romanato <gabriele.roman...@gmail.com>:
IE has notorious problems with pseudo-classes attached to classes. If
> you want to achieve this effect:
>
> function emulateActive() {
> var inputs = document.getElementsByTagName('input');
> for(var i=0; i < inputs.length; i++) {
> var input = inputs[i];
> if(input.className == 'button') {
> input.onclick = function() {
> var img = 'url(button.png)';
> this.style.backgroundImage = img;
> this.style.backgroundPosition = '0 -30px';
> }
> }
> }
> }
>
> Test this script with conditional comments in IE and see if it works.
> let me know. bye
>
Unfortunately, that script has multiple problems.
* The necessary behavior has to be attached to the mousedown and mouseup
events, not the click event.
* It does an == test on the className attribute, which will fail if you use
any additional classes on the element.
* It duplicates CSS styles (e.g. '0 -30px') in CSS and JavaScript, making
the code fragile.
* Because it is hand-rolled DOM code, it is rather complicated.
* You need to actually call that function somewhere or it won't do anything.
A better solution is to:
* Use jQuery for simpler code.
* Use the mousedown and mouseup events.
* Add and remove a class instead of directly setting CSS styles.
To implement this solution, do the following:
1) Change this selector in your CSS:
input.button:active { ... }
to:
input.button:active, input.buttonActive { ... }
2) Add these script tags (no IE conditionals needed):
<script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";>',
</script>
<script type="text/javascript">
$(function() {
$('input.button')
.mousedown( function() {
$(this).addClass( 'buttonActive' );
})
.mouseup( function() {
$(this).removeClass( 'buttonActive' );
});
});
</script>
I tested this in IE7/8 and it works fine.
-Mike
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
