I'm working on a simple button-tabbing system, and try as I might I cannot get IE to properly apply the :hover effect when mousing over a portion of the element that is devoid of text (or border). I have tried setting a width manually, of course everything is display: block, and I even tried using script (jQuery). I know it can be done, I just can't seem to make it work in this case.

Source below, link to active version here. For example of desired effect, please see this link in Chrome or FF.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Item List</title>
        <style>
        body {
            margin: 0;
            padding: 0;
            position: relative;
            font-family: Tahoma, Arial, sans-serif;
        }
        #menu {
            list-style-position: inside;
            list-style-type: none;
            margin: 5px auto 15px auto;
        }

        .bartab {
            display: block;
            float: left;
            padding: 0 5px;

            width: 125px;
            height: 25px;
            line-height: 25px;

            border: 1px black solid;
            color: #FFFF01;
            margin-right: 2px;

            font-weight: bold;
            font-size: 13px;
            text-align: center;

            background-image: -moz-linear-gradient(top, #719897, #000000); /* FF3.6 */
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #719897),color-stop(1, #000000)); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#719897', endColorstr='#000000'); /* IE6,IE7 */
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#719897', endColorstr='#000000')"; /* IE8 */
        }

        .bartab:hover, .bartab.current {
            cursor: pointer;
            background-image: -moz-linear-gradient(top, #96B9BB, #333333); /* FF3.6 */
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #96B9BB),color-stop(1, #333333)); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#96B9BB', endColorstr='#333333'); /* IE6,IE7 */
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#96B9BB', endColorstr='#333333')"; /* IE8 */
            color: #CCCC01;
            border: 1px #333 inset;
        }
        </style>
    </head>
    <body>
        <div id="videoBar">
            <ul id="menu">
                <li class="bartab" id="tab1">Item 1</li>
                <li class="bartab" id="tab2">Item 2</li>
                <li class="bartab" id="tab3">Item 3</li>
                <li class="bartab" id="tab4">Item 4</li>
            </ul>
        </div>
    </body>
</html>
  • It is also worth noting that this is for an internal app, so I have zero need to support anything but IE 7 & 8 (I'd prefer to just make everyone use Chrome, but unfortunately the app uses ActiveX controls, so no dice). I will look into whatever:hover and try using anchors again. Also for reference, the items are not anchors but instead tabs for changing visible content. Dereleased over 6 years ago

5 answers

2
points

you can get the desired behaviour by adding the whatever:hover behaviour:

http://www.xs4all.nl/~peterned/csshover.html

Whatever:hover is a small script that automatically patches :hover, :active and :focus for IE6, IE7 and IE8 quirks, letting you use them like you would in any other browser. Version 3 introduces ajax support, meaning that any html that gets inserted into the document via javascript will also trigger :hover, :active and :focus styles in IE.

Answered over 6 years ago by Tony Crockford
  • That's a great resource. Thanks for adding that Tony! Gary Hepting over 6 years ago
Doug 1095
2
points

I've used the whatever:hover behavior before with good results. One caveat is that adding support for :focus is sketchy. (Please people, don't forget about poor, neglected :focus! Use it everywhere you use :hover.)

But a much, much easier way to get :hover support in IE6 is to use it on actual hyperlinks. Support is built right in! So don't reinvent the wheel.

Those are links in your "Item list", right? That's why you added hover effects and cursor:pointer, right? So what are they linking to?

If your plan is to just use javascript to add functionality, then I urge you to take a step back and think about accessibility. Your page will be unusable by people with javascript turned off and by people who prefer/need to navigate using a keyboard.

Answered over 6 years ago by Doug
  • Great additional notes. +1 Gary Hepting over 6 years ago
  • While your input is appreciated, no they are not links, and this is designed for internal usage. Adding anchor tags only complicates the matter (however trivial that complication might be thanks to the likes of event.preventDefault). Dereleased over 6 years ago
1
point

unfortunately, ie 6 does not support the css level 2 :hover pseudo selector for any elements but anchors. you can write conditional javascript that only is used for ie 6 to change css properties and values.

Sent from my Android.

Answered over 6 years ago by Gary Hepting
0
points

I have been working on the exact same problem, only getting the gradient background effect on a drop down menu of anchors in UL LI. Works great in all other browsers apart from IE8 and below - no surprises. In Internet Explorer 8 when you hover the mouse over the text portion of the LI - the actual A LINK text - the background changes to the desired gradient, however if you move the mouse a fraction off the text then it flickers between normal background and the desired gradient for the hover effect, or it does not display the gradient at all. After much scratching of head, trial and error and forum reading (solutions were no help) I discovered that if I canceled the filter gradient on the li a:hover

div.topnav ul li ul li a:hover { filter: progid:DXImageTransform.Microsoft.gradient(enabled:false);}

and only applied it to the list element

div.topnav ul li ul li:hover { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#999999, endColorstr=#000000);}

Bingo! No flicker, gradient background on hover works like other browsers.

These two lines in an IE8 Conditional Comment included CSS file have done the trick for me, hopefully they can be of help to someone else!

Answered over 4 years ago by dbolger
0
points

Unfortunately, I don't think it will be possible to get this type of behavior because of the usage of the filter to create the gradient. If one comments out the gradient declarations, even without making any other changes whatsoever to the source, then it behaves exactly as expected. However, once the gradient is added in, it stops behaving as expected and only triggers :hover selectors (and, indeed, mouseOver events) on the text-filled portion of the element.

This behavior, though I cannot honestly say I'm surprised after 9 years supporting this crappy browser, was entirely unexpected and comes out of left field. How do you even make something that, when creating a gradient, suddenly changes its mouse-detection box? I haven't the foggiest idea.

The solution, then, is to drop the gradient declarations and just use a real background image. I had wanted to avoid this so I could toy with the height without having to rebuild the image, but I suppose the gradient declaration is good enough for testing until I have a thumbs-up on the design, and then I'll bother making the background image.

Thanks for your help, everyone, but it looks like there is officially no amount of HTML, CSS and/or JavaScript that can cajole this into working.

Answered over 6 years ago by Dereleased