Have tried to fix this on my own and so far failed.
The yellow auto-completion divs that show up as you start typing in the subject or location field appears below the other text in IE7. This is the website:
http://www.universitytutor.com
Setting a higher Z-index didn't fix it. Works in all other browsers (IE8, FF, Chrome, Safari) but not IE7. Any ideas?
You have to increase the z-index of the relative div holding it too.
IE's stacking order algorithm is messed up. You have to position the parent of the element you want on top, give it a position like relative if it doesn't already have one, and a positive z-index.
That will usually resolve it. If not, keep trying the parent of that until you get it.
This is the older IE z-indexing problem at work. You will need to work back up to the first level in the DOM tree where the interacting elements' ancestors are siblings, and at that level, the z-indexes must be set to put the parent of the search/autocomplete area higher than the parent of the content.
To make this work, you'll need to set a z-index on #homepage_search and a z-index on that first div.wrapper item after it, and the the z-index of #homepage_search needs to be higher. I suggest adding a unique class to that first .wrapper element that follows #homepage_search so you can write a CSS rule for it. In this case, if you collapse your DOM tree down (in something like firebug) it eventually looks something like what you see below, all the divs directly under "body".
+<body>
+<div id="uservoice-feedback">
+<div id="login">
+<div id="header">
+<div id="homepage">
+<div id="homepage_search"> (give z-index: 2)
+<div class="wrapper"> (give z-index: 1)
+<div class="wrapper">
+...
I hope this makes sense? You will also need to set #homepage_search to have relative or absolute positioning so it will even attempt to use the z-index. If still no luck, you may try to add that z-index of 2 to every item inside #homepage_search.