422 422 - 4 months ago 19
CSS Question

Buttons not aligned in Internet Explorer (CSS)

This is my code:

<h3 align="center">Is the mobile number above correct ?</h3>
<div class="yesno"><a href="bugme_pay.php"><div id="yes">YES</div></a>
&nbsp;&nbsp;&nbsp;<a href="#" class="nope"><div id="no">NO</div></a></div>


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;
cursor:pointer;
}

#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;
cursor:pointer;
}
.yesno
{
width:400px;
margin-left:100px;
}


This is the issue:

Buttons misaligned

I also have div switch to hide/show div. This is:

<!--show hide div logic-->
<style>
div#a { }
div#b { display:none; }
</style>
<script type="text/javascript">
$("a.nope").click(function(){
$("#a").hide();
$("#b").show();
return false;
});
</script>
<!--//end show hide div logic-->

Answer Source

You can't wrap an inline element (a) around a block element (div). Use SPAN instead of DIV as span is an inline element.

Use something like this:

<h3 align="center">Is the mobile number above correct ?</h3>
<div class="yesno">
   <span id="yes"><a href="#">YES</a></span>
   <span id="no"><a href="#" class="nope">NO</a></span>
</div>