Question

Check this page. On either firefox, chrome, or IE9 / 10 the tabs on the header display uniform and hover correctly. However on IE8 The tabs step down and disappear off of the header. Anyone familiar with this problem?

http://www.seanprovost.com/frah_dev/newclients.php

$(document).ready( function() {
$("#nav1").animate({
    marginTop: "50px"
}, 'slow');
$("#nav2").animate({
    marginTop: "50px"
}, 'slow');
$("#nav3").animate({
    marginTop: "50px"
}, 'slow');
$("#nav4").animate({
    marginTop: "50px"
}, 'slow');
$("#nav5").animate({
    marginTop: "50px"
}, 'slow');

//Animal Care Animation
$("#link_ac").hover( function() {
    $("#nav1").animate({ marginTop: "0px" }, 'slow');
}, function() {
    $("#nav1").animate({ marginTop: "50px" }, 'slow');
});
//Animal Care Rollover
$("#link_ac").hover( function() {
    $("#nav1").css({"background-image" : "url('i/nav_ac_o.png')" });
}, function() {
    $("#nav1").css({"background-image" : "url('i/nav_ac.png')" });
});
//Our Team Animation
$("#link_ot").hover( function() {
    $("#nav2").animate({ marginTop: "0px" }, 'slow');
}, function() {
    $("#nav2").animate({ marginTop: "50px" }, 'slow');
});
//Our Team Rollover
$("#link_ot").hover( function() {
    $("#nav2").css({"background-image" : "url('i/nav_ot_o.png')" });
}, function() {
    $("#nav2").css({"background-image" : "url('i/nav_ot.png')" });
});
//Boarding Animation
$("#link_b").hover( function() {
    $("#nav3").animate({ marginTop: "0px" }, 'slow');
}, function() {
    $("#nav3").animate({ marginTop: "50px" }, 'slow');
});
//Boarding Rollover
$("#link_b").hover( function() {
    $("#nav3").css({"background-image" : "url('i/nav_b_o.png')" });
}, function() {
    $("#nav3").css({"background-image" : "url('i/nav_b.png')" });
});
//New Clients Animation
$("#link_nc").hover( function() {
    $("#nav4").animate({ marginTop: "0px" }, 'slow');
}, function() {
    $("#nav4").animate({ marginTop: "50px" }, 'slow');
});
//New Clients Rollover
$("#link_nc").hover( function() {
    $("#nav4").css({"background-image" : "url('i/nav_nc_o.png')" });
}, function() {
    $("#nav4").css({"background-image" : "url('i/nav_nc.png')" });
});
//Grooming Animation
$("#link_g").hover( function() {
    $("#nav5").animate({ marginTop: "0px" }, 'slow');
}, function() {
    $("#nav5").animate({ marginTop: "50px" }, 'slow');
});
//Grooming Rollover
$("#link_g").hover( function() {
    $("#nav5").css({"background-image" : "url('i/nav_g_o.png')" });
}, function() {
    $("#nav5").css({"background-image" : "url('i/nav_g.png')" });
});

Answer 1

Your css for the nav elements needs some work. Use a console to inspect the LI and <a> tags etc will see that IE is seeing the positioning of them differently due to lack of css structure on the main elements and floats within those elements.

Also validator is showing broken tags in page. Beef up the css on nav, fix broken tags and you should be better off cross browser

EDIT: disable javascript and will see that jQuery is not the culprit