CODEWITHSUNDEEP
cssinternet-explorer
422
422

Reputation: 5770

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-->

Upvotes: 1

Views: 2113

Answers (4)

conceptArchitect
conceptArchitect

Reputation: 11

Or just put the buttons in a container div: 

#colcontainer {
float:left;
width:100%;

}

Take that div and wrap it around your buttons.

That should do it.

Upvotes: 1

Daveo
Daveo

Reputation: 19872

Glenn is correct you cannot have a BLOCK element like a DIV inside a INLINE element such as an A tag.

Mu is to short is also correct.

Addtioanlly you should not be including nbsp; you should be using CSS to format. You can also remove alot of unnessasary HTML tags and CSS

For example http://jsbin.com/agojo4/5/edit

This could be refined even more but this is just a 2 minute job.

Upvotes: 0

mu is too short
mu is too short

Reputation: 434615

Both #yes and #no have widths of 180px so the buttons consume 360px on their own. The containing <div class="yesno"> is 400px wide so you have 40px left over. You also have three non-breaking spaces. Everything renders fine if you take the non-breaking spaces out so I'm guessing that IE is allocating more than 40px for the non-breaking spaces.

You can either make .yesno wider to accommodate how all the various browsers will render the non-breaking spaces or you can ditch the &nbsp; kludge and let the explicit widths on #yes, #no, and .yesno take care of keeping the buttons separated.

And yes, you should use <span> here instead of <div> as GlennG noted but that's not causing the problem here.

Upvotes: 1

GlennG
GlennG

Reputation: 3000

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>

Upvotes: 4

Related Questions