IE. extra margin/padding

1

CSS:

#banner{
	margin:0px;
	padding:0px;
	background-color:#c4d868;
}

.nav{
	background-color: #c4d868;
	width: 100%;
	height: 35px;
}
.nav table{
	width:100%;
	height:35px;
	border-width:0px;
	padding:0px;
	margin:0px;
}
.nav table td{
	border-width:0px;
}
.nav a{
	text-decoration: none;
	color: #6F7C2C;
	font-family: verdana, sans-serif;
	font-size: 100%;
	font-weight: normal;
	width:100%;
}
.nav a#rollOver{
	color:#c4d868;
	background-color: #97a653;
}
.nav a#rollOut{

	color:#6F7C2C;
	background-color: #c4d868;
}
.nav a:hover, .nav a.active {

	text-decoration: none;
	color: #c4d868;
}

banner.php:

<div class="nav">
    <table border="0" cellpadding="0" cellspacing="0">
    	<tr>
            <td id="1"><a href="philosophy.php" onMouseOver="rollOver(1);" onMouseOut="rollOut(1);">Investment Philosophy</a></td>
			<td id="2"><a href="process.php" onMouseOver="rollOver(2);" onMouseOut="rollOut(2);">Investment Process</a></td>
			<td id="3"><a href="products.php" onMouseOver="rollOver(3);" onMouseOut="rollOut(3);">Investment Products</a></td>
			<td id="4"><a href="businessmgt.php" onMouseOver="rollOver(4);" onMouseOut="rollOut(4);">Business Mgt Grp</a></td>
			<td id="5"><a href="bios_investmentProfessionals.php" onMouseOver="rollOver(5);" onMouseOut="rollOut(5);">Bios</a></td>
			<td id="6"><a href="directions.php" onMouseOver="rollOver(6);" onMouseOut="rollOut(6);">Directions</a></td>
			<td id="7"><a href="contact.php" onMouseOver="rollOver(7);" onMouseOut="rollOut(7);">Contact</a></td>
        </tr>
   </table>
   <a id="rollOver"></a> <a id="rollOut"></a><!-- used for JS -->
</div>


<script type="text/javascript">

var activeID = <?php if($activeID){echo($activeID);}else{echo(0);}; ?>

//----------------------------------------------------------------------------------------------
//---- get background color for rollover and rollout ----

var element_rollOver = document.getElementById("rollOver");
var element_rollOut = document.getElementById("rollOut");

if(element_rollOver.currentStyle){
	var bgColor_rollOver = element_rollOver.currentStyle["backgroundColor"];
	var bgColor_rollOut = element_rollOut.currentStyle["backgroundColor"];
	
	var color_rollOver = element_rollOver.currentStyle["color"];
	var color_rollOut = element_rollOut.currentStyle["color"];
}else{
	var bgColor_rollOver = document.defaultView.getComputedStyle(element_rollOver, null).getPropertyValue("background-color");
	var bgColor_rollOut = document.defaultView.getComputedStyle(element_rollOut, null).getPropertyValue("background-color");
	
	var color_rollOver = document.defaultView.getComputedStyle(element_rollOver, null).getPropertyValue("color");
	var color_rollOut = document.defaultView.getComputedStyle(element_rollOut, null).getPropertyValue("color");
}

//----------------------------------------------------------------------------------------------
document.getElementById(activeID).style.backgroundColor = bgColor_rollOver;
document.getElementById(activeID).firstChild.style.color = color_rollOver;

//----------------------------------------------------------------------------------------------
//---- rollover and rollout state - background colors ----
function rollOver(cellNum){
	if(cellNum != activeID){
		document.getElementById(cellNum).style.backgroundColor = bgColor_rollOver;
	}
}
function rollOut(cellNum){
	if(cellNum != activeID){
		document.getElementById(cellNum).style.backgroundColor = bgColor_rollOut;
	}
}
</script>

In IE 7-8 I get a margin of a 1-2 pixels, works fine in firefox… Any thoughts?

2

margin around what? the table or the page?

3

IE Rollover:

Firefox and other browsers:

The IE version is incorrect

4

Found “solution”:

I added “margin-top:-3px;” to the .nav

5

^cool also if this affects other browsers try using a conditional statement to make sure Ie loads your solution and not another browser