div:active not working in IE

[Atli]

Hi.

I have this CSS:

div.FolderContainer
{
    background: #AFBFAF;
    float: left;
    width: 250px;
    height: 74px;
    border: solid 1px #556555;
    margin: 3px;
    overflow: auto;
}
div.FolderContainer:hover
{
    background: #BFCFBF;
}
div.FolderContainer:active
{
    background: #DFFFDF;
}
 

It's pretty simple, is just supposed to highlight the div on hover and flash it when it is clicked.

This works perfectly in Mozilla, but the :active part wont work in IE. It just stays the same as the :hover part.

Anybody know a way arround this?

[drhowarddrfine]

:hover does not work on anything but <a> in IE6 while modern browsers can handle anything. There are workarounds using javascript and other workarounds involving placing the <a> element around contents inside the div but it's specific to your application.

[Atli]

:hover does not work on anything but <a> in IE6 while modern browsers can handle anything. There are workarounds using javascript and other workarounds involving placing the <a> element around contents inside the div but it's specific to your application.

Ahh, ok.
Weird that :active doesn't work in IE7 tho. I would have thought they'd have fixed it while they were fixing :hover.

Guess I'm gona have to mix in some javascript :(

Thanks for the help tho.

[Atli]

Just thought I'd post my solution.
There are many solutions, but this way I wont have to put any part of my styles in the html markup.
And it works in IE5 and never :D (I've tested)

.TileContainer
{
    background: #AFBFAF;
    float: left;
    width: 250px;
    height: 74px;
    border: solid 1px #556555;
    margin: 3px;
    margin-left: 10px;    
    cursor: pointer;
}
.TileContainerHover
{
    background: #BFCFBF;
    float: left;
    width: 250px;
    height: 74px;
    border: solid 1px #556555;
    margin: 3px;
    margin-left: 10px;    
    cursor: pointer;
}
.TileContainerActive
{
    background: #DFFFDF;
    float: left;
    width: 250px;
    height: 74px;
    border: solid 1px #556555;
    margin: 3px;
    margin-left: 10px;    
    cursor: pointer;
}
 

<div class="TileContainer" 
    onmouseover="this.className='TileContainerHover'"
    onmouseout="this.className='TileContainer'"
    onmousedown="this.className='TileContainerActive'"
    onmouseup="this.className='TileContainerHover'"
>
</div>
 

[drhowarddrfine]

Didn't look at the code because I'm cooking supper but :hover was fixed in IE7. I'll look at the rest in a minute.

Does anyone still use IE5?

[Atli]

Does anyone still use IE5?

Yea, his name is Kalaallit and he lives in a lighthouse on a small isle outside of Greenland. He uses his lighthouse to morse the HTML markup from the mainland. Currently hi's IE6 download is at 53%, ETA Jan 2009.

[dootzky]

first of all -> solution works GREAT, even for fuc*ing IE..
i really HATE ie. if you hate it to, go here:

http://ie.jemjabella.com/

seriously.

and hacking your own code, just for sakes of stupid IE - is moronic.
but when you have to.. this is the good solution.

and the post above mine is very funny, ch33rzs :) :) :) :)
ETA 2009, eh? LOL!