CODEWITHSUNDEEP
htmlcssinternet-explorer-8css-selectors
Native Dev
Native Dev

Reputation: 7372

:active does not work in IE8

The :active code works in all browsers, except IE8 (not 9). I've looked at other similar questions to this and have tried different methods. This is the code:

HTML:

<div id="main" style="color:white;font-family:Georgia">
   <div id="button" onmouseup="someFunction()"></div>
   <!-- other things -->
</div>

CSS:

#button
{
  position: relative;
  width: 241px;
  height: 41px;
  background-image:url("images/buttonStatic.png");
  display: none;
}

#button:hover
{
  background-image:url("images/buttonHover.png");
}

#button:active
{
  background-image:url("images/buttonActive.png");
}

The button displays proper, changes to the second button when I hover over it properly, but doesn't change to the third button when I click on it.

Upvotes: 0

Views: 2409

Answers (2)

Brendan
Brendan

Reputation: 1883

I just tried this out in IE8 and it works fine. Make sure your DOCTYPE specification is declared correctly <!doctype html> and maybe try putting in the IE compatibility meta tag which is something like <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>.

On a side note, you shouldn't be using a <DIV> element as a button like that. You should use <button> or <a> with suppressed behaviour.

Edit

Here's my code...

<!doctype html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
        <title>Active Button</title>
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.5.0/build/cssreset/cssreset-min.css&3.5.0/build/cssfonts/cssfonts-min.css"/>
        <style type="text/css">
            .button {
                padding: 4px 12px;
                border: solid #555 1px;
                background-color: #ddd;
                }
            .button:hover {
                background-color: #eee;
                }
            .button:active {
                background-color: #09c;
                color: #fff;
                }

            .frame {
                padding: 2em;
                }
        </style>
    </head>
    <body>
        <div class="frame">
            <button class="button">I'm a Button</button>
        </div>
    </body>
</html>

Upvotes: 1

VLTII
VLTII

Reputation: 338

Your code is fine, it's a known bug (sorry, discrepancy) in IE8.

Upvotes: 0

Related Questions