buttons not aligned in Internet Explorer ( CSS )

[Yeah]

This is my code:\[code\]<h3 align="center">Is the mobile number above correct ?</h3> <div class="yesno"><a href="http://stackoverflow.com/questions/4486223/bugme_pay.php"><div id="yes">YES</div></a> &nbsp;&nbsp;&nbsp;<a href="http://stackoverflow.com/questions/4486223/#" class="nope"><div id="no">NO</div></a></div>\[/code\]This is my CSS:/* yes and no buttons */#yes{ float:left; display:inline; width:180px; background: #999999; font-size: 26px; font-weight: bold; text-align: center; color: #FFF; padding-top: 10px;padding-bottom: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin-bottom: 0.4em; margin-top: 0.4em;}#yes a:visited,#yes a:link{color: #fff;}#yes:hover {background-color: #9fd106;cursorointer;}#no{ float:right; display:inline; width:180px; background: #999999; font-size: 26px; font-weight: bold; text-align: center; color: #FFF; padding-top: 10px;padding-bottom: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin-bottom: 0.4em; margin-top: 0.4em;}#no a:visited,#no a:link{color: #fff;}#no:hover {background-color: #f20909;cursorointer;}.yesno{width:400px;margin-left:100px;}This is the issue:

Meant to add:Also have div switch to hide show div which is: div#a { }div#b { display:none; }$("a.nope").click(function(){ $("#a").hide(); $("#b").show(); return false; });