This one has me completely stumped. My CSS-based navigation here: http://studiohyperset.com/sandbox/marketsync/ renders fine in FF, Safari, and Chrome. In IE7/8, however, when a user rolls over the nav tabs, it blurs the page content. I've isolated the nav style information here: .nav { width:576px; height:44px; margin:-18px 0 18px 295px; display:block } .nav ul { margin:0px; list-style:none; padding:0px; } .nav li { display:inline; margin:0px; padding:0px; font-size:.9em; cursor:pointer; display:block } .nav a { float:left; text-decoration:none; height:34px; width:141px; padding:10px 0 0 0; margin:0 3px 0 0; background-image:url(../images/navTabDefault.png); background-repeat:no-repeat; display:block } .nav a span { text-align:center; display:block; color:#0080C3; display:block } .nav li a:hover { height:34px; float:left; text-decoration:none; background-image:url(../images/navTabSelected.png); padding:20px 0 0 0; width:141px; } #selected { height:34px; float:left; text-decoration:none; background-image:url(../images/navTabSelected.png); padding:20px 0 0 0; width:141px; } Code (markup): And here's how it's embedded in the site: <div class="nav"> <ul> <li><a href="<?php echo SITE_HOST; ?>products.php" <?php echo $menu == 'pro' ? 'id="selected"' : ''; ?>><span>Products</span></a></li> <li><a href="<?php echo SITE_HOST; ?>customers.php" <?php echo $menu == 'cus' ? 'id="selected"' : ''; ?>><span>Customers</span></a></li> <li><a href="<?php echo SITE_HOST; ?>partners.php" <?php echo $menu == 'par' ? 'id="selected"' : ''; ?>><span>Partners</span></a></li> <li><a href="<?php echo SITE_HOST; ?>company.php" <?php echo $menu == 'com' ? 'id="selected"' : ''; ?>><span>Company</span></a></li> </ul> </div> Code (markup): Does anything jump out to anyone?