PerryCS PerryCS - 5 months ago 9
CSS Question

How can I align <label>,<input>, text, input fields, a real button, and a "<a> link button" properly and with the same font?

MY PROBLEM (brief):
I would like the text Username, the text you type for the Username, the Real Button Text the "or" and the Link Button Text to be exactly the same size and on the same "line" - they don't line up smoothly...

HAVE I TRIED FIXING THIS MYSELF? OTHER PROBLEMS WITH ZOOMING
I've spent considerable time trying to get this aligned as close to perfect as I can get however, with my knowledge I can never get it lined up to satisfaction. I gave up for many months while I worked on other parts of the website but it's a thorn in my mind that it SHOULD be possible. I also had problems when I used scaling - in some zooms it looked so close to perfect I figured "That's as good as I can get it!".

I cut this out of my website to make the code as small as possible. If you look at the result - the Username (the username you type), the "Real Button" and the "or" and the "Link Button" are all different heights... it doesn't seem to flow nicely.

Also, if you put the 2 buttons on top of each other the word SIGN is different widths. If I'm using the same font, same size, same everything, why would 1 be wider than the other? Different letter spacing?

While I did give up on this, recently I saw another fiddle from Stack that kinda solved the problem but without labels and without lining everything up. THIS code is based on that code. I figure, if this can be fixed, I'll re-work it into my website with all the responsive design etc...

PREVIOUS PARTIAL SOLUTIONS:
In the past I used tables and things seemed to line up better but I was trying not to use tables for this as you shouldn't have to create a table for such a short simple line of HTML.

JSFIDDLE:
I created a JSFiddle so you can see.

http://jsfiddle.net/PerryCS/7zc2vjmx/2/

HTML CODE:

<form id="loginForm1" name="loginForm1?callingPage=validateForm" method="post" action="index.php" accept-charset="utf-8">

<h5 class="text-center">In order to access some areas of the website, save estimates.</h5>

<div class="mydiv">
<label for="username">Username</label>
<input type="text" id="username" name="username">
</div>
<div class="mydiv">
<label for="pword">Password</label>
<input type="password" id="pword" name="pword">
</div>
<div class="mydiv">
<input class="button" type="button" name="buttonSignIn" value="SIGN IN"> or
<a class="button" href="#">SIGN UP</a>
</div>
</form>


CSS CODE

body {
font-size: 1em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

input.button {
height: 28px;
font-size: 1em;
color: white;
font-weight: normal;
font-style: normal;
background: #4D28B2;
border: 1px solid gray;
vertical-align: middle;
padding: 0px 5px;
}

a.button {
display: inline-block;
height: 28px;
font-size: 1em;
color: white;
text-decoration: none;
font-weight: normal;
font-style: normal;
text-align: left;
background-color: #4D28B2;
border: 1px solid gray;
vertical-align: middle;
line-height: 28px;
padding: 0px 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
}

input {
height: 28px;
font-size: 1em;
text-decoration: none;
font-weight: normal;
font-style: normal;
text-align: left;
background-color: #4D28B2;
border: 1px solid gray;
vertical-align: middle;
line-height: 28px;
padding: 0px 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
}

.mydiv {
display: inline-block;
}


MY THANKS FOR YOUR TIME
I thank you in advance for your time in helping me grow these past few years. You guys/gals have helped me solve some problems and your help is much appreciated. :)

Answer

create a CSS rule for all these elements with identical settings and also add vertical-align: baseline. This should line up all text at the same baseline, and if the font-family, font-size, font-weight, font-variation etc. are the same, it should look as you want it.

For my fork of your fiddle I just added this (affecting all elements inside .mydiv):

.mydiv * {
  display: inline-block;
  vertical-align: baseline;
  font-family: Arial sans-serif !important;
  font-size: 1em !important;
}

Here's the link to the fiddle: http://jsfiddle.net/f03jvuqb/