Fixed position / hover strangeness in IE7+

Have a look at http://bddgp.org.au/test, you’ll see the word ‘feedback’ on the far right.

When you hover over it, a form pops into view. In IE 7 or 8 (not worried about 6 right now), however, as soon as you click and hover the mouse over the drop down list, the form vanishes again. Firefox, Opera & Chrome handle this ok.

It’s done only with HTML & CSS, using fixed positioning and the :hover pseudo-class.

Can anyone suggest a solution? I’d prefer to avoid JS if possible, as my JS skills aren’t so hot… :frowning:

Thanks

Hi, the problem is that IE (upon looking at hte options ina selct) doesn’t recognize that #feedback is still being hovered upon, so of course it moves back over to -19em (instead of the -1) and by a result of that the dropdown vanishes.

I don’t know great way to avoid this without JS unfortunately :). There probably is a way but my mind has been mush today.

Hi,

I couldn’t see a solution either apart from changing it to a list type select.
e.g.


<div id="feedback"> <img src="http://bddgp.org.au/images/feedback.png" alt="feedback" />
        <form action="" method="post">
         [B]   <select size="4">[/B]
                <option value="searching">I'm looking for info about&hellip;</option>
                <option value="suggestion">This site would be better if&hellip;</option>
                <option value="thanks">Thanks! This site helped me&hellip;</option>
                <option value="other">Other&hellip;</option>
            </select>
            <textarea>&hellip; (Don't use this feedback form, it doesn't work yet)</textarea>
            <input type="submit" value="Send" />
        </form>
    </div>

That seems to work but of course displays all options.

What about different combos of…

#feedback:hover + select (or option) {
yada
}

The problem is that once the mouse is over the options then #feedback is no longer hovered. The select element can be hovered ok but once you open it and move the mouse down then all is lost.

I couldn’t see a way around it with CSS (but that’s not to say that there isn’t an answer :)).

I’m glad my mind isn’t too mushy since Paul couldn’t find a solution…

@Eric, IE6 is also a problem so theoretically if that WOULD work then we would need IE6 support.

He could style a regular <ul><li> to look like a select (a thread a month or so ago had JS which made it seem exactly like a <select>)

I really wish google would help me out here :(.

Ok, have come up with a compromise solution, you can see it at http://bddgp.org.au/test.

Firefox, Safari, Chrome and Opera all get the pure CSS solution. Safari isn’t quite behaving, but it will do for now.

IE7+ gets a little bit of javascript that forces the feedback box out onto the page and leaves it there. IE7+ users also get a ‘hide’ button so they can move it out of the way again.

IE6 users get a plain feedback box at the bottom of the page, and it can’t be hidden.

I’m pretty happy with this solution. Now I just need to make it actually work!