A Parker A Parker - 4 months ago 17
HTML Question

Why are these two buttons not the same size?

I have two buttons on two pages, and they are supposed to look exactly the same, but they do not. They also have the same CSS styling. I believe one of the buttons is being compacted by the objects around it, but I cannot identify what part is causing this. If you could help me either find a solution with an extra bit of CSS, or explain to me what part I should remove?

EDIT: Sorry, I didn't exactly clarify. The sizing of these buttons is different. This has nothing to do with the margins of the buttons, but for argument's sake I will delete those parts inline. The buttons are two different sizes, which is what my issue is.

This button looks correct:



.submitbutton {
display: block;
/* inline for text and button */
border: 0.1em;
border-radius: 0.5em;
background-color: #e6e5e5;
width: 14em;
height: 3.5em;
outline-color: #C0C0C0;
text-align: center;
text-decoration: none;
color: #84A0B1;
font-size: 0.7em;
}

<div style="display: -webkit-flex; -webkit-align-items: center; display: flex; align-items: center;">
<div style="-webkit-flex: 1; flex: 1; display: block; margin-left: 1.5em; min-width: 13em">
<h3 class="locations" style="display: block" ">dana point</h3>
<p class="locations " style = "display: block ">34241 E. Pacific Coast Hwy, Ste. 201 <br> Dana Point, CA 92629 </p>
</div>
<button type="button " class="locations submitbutton " name="danaPoint " id = "dana point "><span class = "buttonText ">select</span></button>
</div>





This button is formatted incorrectly:


.submitbutton{

display: block; /* inline for text and button */

border: 0.1em;
border-radius: 0.5em;
background-color: #e6e5e5;
width: 14em;
height: 3.5em;
outline-color: #C0C0C0;


text-align: center;
text-decoration: none;
color: #84A0B1;
font-size: 0.7em;
}

<div style = "margin-left: 1em; font-size: 0.8em; margin-right: 2em; display: -webkit-flex; -webkit-align-items: center; display: flex; align-items: center;">
<i style = "margin: 0.5em" class="fa fa-credit-card" aria-hidden="true"></i><p style = "margin: 0.9em">$49 </p>
<i style = "margin: 0.5em" class="fa fa-clock-o" aria-hidden="true"></i><p style = "margin: 0.5em; min-width: 4em"> 20m</p>
<button type="button" class="sugars submitbutton hidden" name="brazilian" ><span class = "buttonText">find a time</span></button>
</div>





Also please let me know if there is any way I can make this question better, as I have previously dealt with issues asking questions correctly and I tried to follow the guidelines better this time.

Thank you!

Answer

.submitbutton{
   
    display: block;  /* inline for text and button */
    
    border: 0.1em; 
    border-radius: 0.5em;
    background-color: #e6e5e5; 
    width: 14em; 
    height: 3.5em;
    outline-color: #C0C0C0;
    
    
    text-align: center;
    text-decoration: none;
    color: #84A0B1;
    font-size: 0.7em;
}
<!-- The buttons were showing differently because of the inline-styles within the html are different-->
<!-- I change the inline styles so the buttons show as the same-->

<div id="first-btn">
 
   <div style = "margin-left: 1em; <!--font-size: 0.8em;--> margin-right: 2em; display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
           		        <i style = "margin: 0.5em" class="fa fa-credit-card" aria-hidden="true"></i><p style = "margin: 0.9em">$49 </p>
                        <i style = "margin: 0.5em" class="fa fa-clock-o" aria-hidden="true"></i><p style = "margin: 0.5em; min-width: 4em"> 20m</p>
                        <button type="button" class="sugars submitbutton hidden" name="brazilian" style = " width: 10em; margin-right: 2em; margin-left: auto" ><span class = "buttonText">find a time</span></button>
                    </div>
</div><!--/ #first-btn -->

<div id="second-btn">
  <div style="display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
  <div style="-webkit-flex: 1;  flex: 1; display: block; margin-left: 1.5em; min-width: 13em">
    <h3 class="locations" style="display: block" ">dana point</h3>
                            <p class="locations " style = "display: block ">34241 E. Pacific Coast Hwy, Ste. 201 <br> Dana Point, CA 92629 </p>
                        </div>
                        <button type="button " style = "width: 10em; margin-right: 2em " class="locations submitbutton " name="danaPoint " id = "dana point "><span class = "buttonText ">select</span></button>   
          	  	    </div>
</div><!--/ #second-btn-->