tooltips not displayed correctly in IE - css

Question

If you hover the mouse over the underlined table headings on this page, a tooltip appears
However, in IE7, the tooltips appear about 300px above their intended position, and on the first table, they don't appear at all.
Also, the tooltips are not as nicely styled when shown in IE, e.g. the corners aren't rounded, and the drop shadows aren't shown. I'm not too concerned about the styling, but I would like to get the tooltips displaying in the correct position.
I'm using the YACOP JQuery plugin to display the tooltips (I've modified this plugin slightly to remove the fading effects). The CSS styles applied to each tooltip are:
.callout {
max-width: 400px;
padding: 5px;
border: 1px solid #7992B0;
background-color: #FFE8A4;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
}

Answer 1

IE < version 9 doesn't support native or vendor specific CSS3 rules like rounded corners or drop shadows.
As for the IE7 Issue, setup a targeted CSS for IE7 either using conditional comments
<!--[if IE 7]>
.callout_main
{
position: absolute;
display: none;
margin: 0px;
left: 576.5px;
top: -66px;
}
Or the CSS browser selector and reposition the callout div with CSS.
The first table's tooltip doesn't seem to appear because it is poistioned way above the top of the page, so above the browsers "render view."
Update:
In response to your question, there is: <div class="callout_main" style="..."> I'd move these inline styles to a CSS file, and for the the IE/ rules change top: 366px; to top: -66px;. I think this will help to resolve your issue :)

Answer 2

.callout {
max-width: 400px;
padding: 5px;
border: 1px solid #7992B0;
background-color: #FFE8A4;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
}
You're using Webkit and Mozilla's css attributes, the ones starting with -webkit and -moz. These won't work on IE 6,7,8 (or any previous one) because they lack CSS 3 support. One day, all browsers will, hopefully, support CSS 3, but for now, you'll have to use some workarounds (likely), or force your users to use something that's not IE (depends on your users) if you want to have a nice looking tooltop.
There exists a compatibilty master table that will inform you of what you can and cannot use on various browsers.