I'm building a simple Web UI for an embedded system.
I have a couple of buttons to upload a file to the server, the code of the buttons is the following
.button {
background-color: #009999;
border: 0.5px solid #F0F0F0;
border-radius: 0px;
color: white;
display: inline-block;
font-family: Open Sans, Helvetica, Arial;
font-size: 14px;
font-weight: bold;
width: 100%;
padding: 4px 4px;
text-decoration: none;
text-shadow: 0px 1px 0px #197276;
text-align: left;
}
<td style="width: 20%; vertical-align:top; background-color:#FFFFFF;">
<form action="cgi-bin/upload.cgi" method="post" enctype="multipart/form-data">
<input class="button" type="file" name="file">
<input class="button" type="submit" name="Submit" value="Upload">
</form>
</td>
The problem that I noticed is that the file buttons is always slightly bigger than the submit button.
Is there a way to align them? What am I doing wrong?
Thanks!
EDIT:
After trying Yasaman Mansouri (thanks) suggestion (overflow: hidden) i get the follwing output (on the right).
It's much better but still not aligned with the other button.
you can hide your form overflow
.button {
background-color:#009999;
border:0.5px solid #F0F0F0;
border-radius:0px;
color:white;
display:inline-block;
font-family:Open Sans, Helvetica, Arial;
font-size:14px;
font-weight:bold;
width:100%;
padding:4px 4px;
text-decoration:none;
text-shadow:0px 1px 0px #197276;
text-align:left;
}
form{
width: 200px;
overflow: hidden;
}
<td style="width: 20%; vertical-align:top; background-color:#FFFFFF;">
<form action="cgi-bin/upload.cgi" method="post" enctype="multipart/form-data">
<input class="button" type="file" name="file" >
<input class="button" type="submit" name="Submit" value="Upload">
</p>
</form>
</td>
We got it answered on Reddit, by adding "box-sizing:border-box;" to the button css
the alignment is OK.
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
.button {
background-color: #009999;
border: 0.5px solid #F0F0F0;
border-radius: 0px;
box-sizing:border-box;
color: white;
display: inline-block;
font-family: Open Sans, Helvetica, Arial;
font-size: 14px;
font-weight: bold;
width: 100%;
padding: 4px 4px;
text-decoration: none;
text-shadow: 0px 1px 0px #197276;
text-align: left;
}
Thanks!
Related
I have a login form with labels and input, i can not get the labels to go on the left and input on the right. Currently they are sitting on top of each other.
Here is the HTML:
<div class="login">
<form name="login" action="submit" method="get" accept- charset="utf-8">
<label for="usermail">Username</label>
<input type="email" name="usermail" placeholder="yourname#email.com" required>
<label for="password">Password</label>
<input type="password" name="password" placeholder="password" required>
<input type="submit" value="Login">
</form>
</div>
Here is the CSS:
form {
margin:auto;
position:relative;
width:375px;
height:250px;
font-family: Lucida Sans, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 24px;
font-weight: bold;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:10px;
border: 1px solid #999;
border: inset 1px solid #333;
}
input { float:right;
width:350px;
display:block;
border: 1px solid #999;
height: 25px;
}
Here is the JSFiddle https://jsfiddle.net/ojz87d0x/
On input, change display:block; to display:inline-block;, and add the following:
label {
display: inline-block;
float:left;
clear:both;
}
input[type="submit"] {
clear: both;
}
You'll also need to make sure that the width of the input and the width of the form are different enough to allow space for the label. In this example [in the fiddle]. I set input to 275px and form to 375px.
Here's a newer update to your fiddle.
First of all, the inputs are too wide for both the labels and inputs to be next to each other inside the form. So either widen the form or shorten the inputs.
Next, add float: left to the labels.
form {
margin: auto;
position: relative;
width: 375px;
height: 250px;
font-family: Lucida Sans, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 24px;
font-weight: bold;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 10px;
border: 1px solid #999;
border: inset 1px solid #333;
}
input {
float: right;
width: 300px; /*smaller width*/
display: block;
border: 1px solid #999;
height: 25px;
}
label {
float: left;
margin-top: 3px;
<div class="login">
<form name="login" action="submit" method="get" accept- charset="utf-8">
<label for="usermail">Username</label>
<input type="email" name="usermail" placeholder="yourname#email.com" required>
<label for="password">Password</label>
<input type="password" name="password" placeholder="password" required>
<input type="submit" value="Login">
</form>
</div>
ok so im working on a website for a friend and she is wanting a login that when they login and if the information is correct it will redirect them to that page and only members could see that page. so far this is the what i have.
<div style="text-align: center;">
<div style="box-sizing: border-box; display: inline-block; width: auto; max-width: 480px; background-color: #FFFFFF; border: 2px solid #0361A8; border- radius: 5px; box-shadow: 0px 0px 8px #0361A8; margin: 50px auto auto;">
<div style="background: #0361A8; border-radius: 5px 5px 0px 0px; padding: 15px;"><span style="font-family: verdana,arial; color: #D4D4D4; font-size: 1.00em; font-weight:bold;">Login to Members Section</span></div>
<div style="background: ; padding: 15px">
<style type="text/css" scoped="">
td { text-align:left; font-family: verdana,arial; color: #064073; font-size: 1.00em; }
input { border: 1px solid #CCCCCC; border-radius: 5px; color: #666666; display: inline-block; font-size: 1.00em; padding: 5px; width: 100%; }
input[type="button"], input[type="reset"], input[type="submit"] { height: auto; width: auto; cursor: pointer; box-shadow: 0px 0px 5px #0361A8; float: right; text-align:right; margin-top: 10px; margin-left:7px;}
table.center { margin-left:auto; margin-right:auto; }
.error { font-family: verdana,arial; color: #D41313; font-size: 1.00em; }
</style>
<form method="post" action="http://www.authpro.com/auth/deluxe/" name="aform" target="_top">
<input type="hidden" name="action" value="login">
<input type="hidden" name="hide" value="">
<table class='center'>
<tr><td>Login:</td><td><input type="text" name="login"></td></tr>
<tr><td>Password:</td><td><input type="password" name="password"></td> </tr>
<tr><td> </td><td><input type="submit" value="Login"></td></tr>
<tr><td colspan="2"> </td></tr>
<tr><td colspan="2">Lost your username or password? Find it here!</td></tr>
<tr><td colspan="2">Not member yet? Click here to register. </td></tr>
</table>
</form>
</div></div></div>
every thing is working like it should. The script that is run when you press the login but is what will redirect you
This is the code i have written in html/css in eclipse(kepler) by making the dynamic web application.The error i get is in line:
<style type="text/css" scoped>
error name-invalid location of tag.
<div style="text-align: center;">
<div style="box-sizing: border-box; display: inline-block; width: auto; max-width: 480px; background-color: #FFFFFF; border: 2px solid #D4D4D4; border-radius: 5px; box-shadow: 0px 0px 8px #D4D4D4; margin: 50px auto auto;">
<div style="background: #D4D4D4; border-radius: 5px 5px 0px 0px; padding: 15px;"><span style="font-family: verdana,arial; color: #D4D4D4; font-size: 1.00em; font-weight:bold;">HEY REGISTER NOW!</span></div>
<div style="background: ; padding: 15px">
<style type="text/css" scoped>
td { text-align:left; font-family: verdana,arial; color: #000000; font-size: 1.00em; }
input { border: 1px solid #CCCCCC; border-radius: 5px; color: #666666; display: inline-block; font-size: 1.00em; padding: 5px; width: 100%; }
input[type="button"], input[type="reset"], input[type="submit"] { height: auto; width: auto; cursor: pointer; box-shadow: 0px 0px 5px #D4D4D4; float: right; margin-top: 10px; }
table.center { margin-left:auto; margin-right:auto; }
.error { font-family: verdana,arial; color: #000000; font-size: 1.00em; }
</style>
<form method="post" action="crf.html" name="aform" target="_top">
<input type="hidden" name="action" value="login">
<input type="hidden" name="hide" value="">
<table class='center'>
<tr><td>Username:</td><td><input type="text" name="login"></td></tr>
<tr><td>Password:</td><td><input type="password" name="password"></td></tr>
<tr><td> </td><td><input type="submit" value="Submit"></td></tr>
<tr><td colspan=2> </td></tr>
</table>
</form>
</div></div></div>
Please help me with an appropriate solution.
Use this format
<!DOCTYPE HTML>
<html>
<head>
<title>Sample Application</title>
<style type="text/css" scoped>
td {
text-align: left;
font-family: verdana, arial;
color: #000000;
font-size: 1.00em;
}
input {
border: 1px solid #CCCCCC;
border-radius: 5px;
color: #666666;
display: inline-block;
font-size: 1.00em;
padding: 5px;
width: 100%;
}
input[type="button"],input[type="reset"],input[type="submit"] {
height: auto;
width: auto;
cursor: pointer;
box-shadow: 0px 0px 5px #D4D4D4;
float: right;
margin-top: 10px;
}
table.center {
margin-left: auto;
margin-right: auto;
}
.error {
font-family: verdana, arial;
color: #000000;
font-size: 1.00em;
}
</style>
</head>
<body>
<div style="text-align: center;">
<div
style="box-sizing: border-box; display: inline-block; width: auto; max-width: 480px; background-color: #FFFFFF; border: 2px solid #D4D4D4; border-radius: 5px; box-shadow: 0px 0px 8px #D4D4D4; margin: 50px auto auto;">
<div
style="background: #D4D4D4; border-radius: 5px 5px 0px 0px; padding: 15px;">
<span
style="font-family: verdana, arial; color: #D4D4D4; font-size: 1.00em; font-weight: bold;">HEY
REGISTER NOW!</span>
</div>
<div style="background:; padding: 15px">
<form method="post" action="crf.html" name="aform" target="_top">
<input type="hidden" name="action" value="login"> <input
type="hidden" name="hide" value="">
<table class='center'>
<tr>
<td>Username:</td>
<td><input type="text" name="login"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Submit"></td>
</tr>
<tr>
<td colspan=2> </td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
You need to put the style tag within the head tags, not the body.
Also, this line:
<div style="background: ; padding: 15px">
Should be:
<div style="padding: 15px">
Or give it a background.
All your styles should go in a separate .css file, rather than inline/same file.
It looks fine here: JSFiddle
In:
HTML 4 and Earlier
XHTML 1.x
HTML 5
The <style> element can only appear in the <head>
In:
The WHATWG Living Standard for HTML
HTML 5.1
The <style> element can appear in the <body> as well, but only if it has a scoped attribute and (IIRC) one or two other conditions are met.
Whatever tool you are using to test your markup with, is testing it against one of the languages in the first group (where it is not allowed) and not in the second group (where it is).
Given browser support for it, I would advise against using the scoped attribute at the moment.
scoped isn't a widely supported attribute (believe it's oly natively available in Firefox at the moment), also you will need to specify the DOCTYPE as HTML5 for it to work. You have two choices, use a JavaScript library to get the tag working: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin
Or use conventional styling with classes, id's and appropriate CSS selectors.
More info here: http://html5doctor.com/the-scoped-attribute/
I am creating an e-mail form and would like the text box and submit button to be directly next to each other. They should be touching so that it looks like one continuous rectangle.
However, when I get them touching and set a height the submit button doesn't listen! It doesn't stay the same height. If I increase the submit button height alone by a lot the two boxes are not aligned!
HTML:
<div id="form">
<input type="text" class="text-input" name="address" id="address" value="" size="23" maxlegnth="30" />
<input type="submit" value="BUTTON" id="btn-submit" />
</div>
CSS:
#form input{
border: solid 2px #989898;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
outline:none;
background: #d8d8d8;
font-weight:bold;
color: #525252;
position: relative;
height: 25px;
}
#address{
text-align: right;
margin: 0 30 0 auto;
}
#btn-submit{
margin-left: -7px;
width: 44px;
text-align: center;
}
The key is to float:left the inputs and then set a height for them. Live example: http://jsfiddle.net/NweS6/
#form input{
border: solid 2px #989898;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
outline: none;
background: #d8d8d8;
font-weight: bold;
text-align: right;
color: #525252;
float: left;
height: 25px;
}
#form #btn-submit{
margin-left: -2px;
width: 44px;
text-align: center;
height: 29px;
}
The reason the submit needs a figure 4px higher than the input is because for some reason it does not take into the account the border on the button, which top and bottom adds up to 4px.
Float the submit button and the layout will look as expected.
http://jsfiddle.net/4HcWy/9/
This is how you write an HTML form:
<form method="POST" action"/page/to_post_to" >
<input type="text" class="text-input" name="address" id="address" value="" size="23" maxlegnth="30" />
<input type="submit" value="BUTTON" id="btn-submit" />
</form>
Then the elements inside it know it is a form, not just another div.
EDIT: Sorry I misread your question. I thought listening meant it was behaving wrong instead of displaying wrong.
Did you want it to look like the followin? http://jsfiddle.net/4HcWy/6/
form input
{
border:2px solid #989898;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
outline:none;
background: #d8d8d8;
font-weight:bold;
color: #525252;
position:relative;
height: 25px;
box-sizing: border-box;
}
#address{
text-align:right;
margin:0 30 0 auto;
border-right: none;
}
#btn-submit{
margin-left: -7px;
width:44px;
text-align:center;
border-left: none;
}
(Also, since I had used a form element I had to change #form input to form input.)*
It seems that 2 pixels can't work on the input and button but with 1 pixel borders, it's OK.
Look: http://jsfiddle.net/qwLV7/
Update
This seems to work, but I had to hack the height of the button to be higher than the input,
http://jsfiddle.net/qwLV7/1/
Update 2
How's that now?
http://jsfiddle.net/qwLV7/2/
CSS
#form1
{
border:solid 2px #989898;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
background: #d8d8d8;
font-weight:bold;
color: #525252;
position:relative;
width:194px;
}
input{
height:25px;
border:0px;
}
#address{
text-align:right;
margin:0 30 0 auto;
float:left;
width:150px;
}
#btn-submit{
width:44px;
text-align:center;
float:left;
}
HTML
<div id="form1">
<input type="text" class="text-input" name="address" id="address" value="" size="23" maxlegnth="30" />
<input type="submit" value="BUTTON" id="btn-submit" />
<div style="clear:both"></div>
</div>
So i'm trying to make a login box with 2 fields and a submit button. The submit button position itself differently in EVERY browser. In Firefox it works as expected but in IE8 and Safari the vertical alignment gets screwed up. Any ideas to resolve this problem?
Here's a screendump of the issue: http://gefuhlkunder.dk/bla.jpg
<form action="">
<div>
<input type="text" name="brugernavn" class="login-input" value="Brugernavn" />
<input type="text" name="brugernavn" class="login-input" value="password" />
<input class="login-submit" type="submit" value="login" />
</div>
</form>
.login-input{
border:1px solid #bebebe;
font-family: 'FlamaBook', sans-serif;
font-size:10px;
letter-spacing:-0.4px;
text-transform:uppercase;
color:#464646;
font-size-adjust: 0.5;
height:18px;
line-height:18px;
text-align:center;
width:69px;
margin:0 3px 0 0;
}
.login-submit{
border:1px solid #bebebe;
font-family: 'FlamaBook', sans-serif;
font-size:10px;
letter-spacing:-0.4px;
text-transform:uppercase;
color:#464646;
font-size-adjust: 0.5;
text-align:left;
position:absolute;
padding: 0px 0px 0 3px;
width:59px;
height:20px;
line-height:20px;
background:#fff url(images/submit_bg.png);
cursor:pointer;
}
Try these
.login {
font-family: sans-serif;
font-size:10px;
border:1px solid #bebebe;
text-transform:uppercase;
text-align:center;
color:#464646;
cursor:pointer;
padding:3px;
margin-right:3px;
}
.login-submit {
margin-top:3px;
}
and
<form action="">
<div>
<input type="text" name="brugernavn" class="login login-input" value="Brugernavn" />
<input type="text" name="brugernavn" class="login login-input" value="password" />
<input class="login login-submit" type="submit" value="login" />
</div>
This is the best I could do so far using tables (checked on Firefox, Chrome and IE8). You can however notice a small discrepancy in IE8.
If you use this code, u need to put a background image in your button. Any text would mess up the layout. Can't believe it is so tricky to even try do such a simple things.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="firstTd">
<div class="styleOne">
<input id="searchEntry" value="" title="Search" size="41" type="text" name="searchEntry"/>
</div>
</td>
<td>
<div>
<button value="Search" class="buttonStyle" type="submit" name="myButton">
<span></span>
</button>
</div>
</td>
</tr>
</table>
table {
width: 342px;
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
position: relative;
border-bottom: 1px solid transparent;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
td, th {
display: table-cell;
vertical-align: inherit;
}
td.firstTd{
width: 281px;
}
div.styleOne {
background-color: #fff;
border: 1px solid #d9d9d9;
border-top-color: #c0c0c0;
height: 27px;
display: block;
width: 281px;
}
input#searchEntry{
font-size: 20px;
width: 278px;
}
button.buttonStyle{
padding: 12px 22px;
}
Try with:
height:18px;
margin: 3px 0 0;