I'm trying to make this login page show/format correctly on every browser so far it only shows how I want it to work on IE9 on other browsers firefox/chrome the form section is on the left side and not in the middle. (The Username, Password, Pub key, and the log in button all have to be in the middle of the page and not move when the browser is re-sized.)
Can someone look at it and see what I'm doing wrong ?
Thanks for any help...
Here is the HTML CODE:
<script type="text/javascript">
// Return true if unable to open a new window
function popup_blocked() {
var popup = window.open('','_blank','toolbar=no,scrollbars=no','width=0,height=0');
if (!popup) {
return true;
} else {
popup.close();
return false;
}
}
if(popup_blocked()) {
alert('This page requires that you enabled popups in order to process and display content properly.');
} else {
//alert('POPUPS ARE ALLOWED! THANK YOU!');
}
</script>
<html><head><title>Login Page</title>
<style type="text/css">
.auto-style2 {
margin-right: 261px;
}
</style>
<style type="text/css">
.style1 {
vertical-align: top;
}
.auto-style4 {
text-align: center;
}
</style>
</head>
<style type="text/css">
* { margin: 0; padding: 0; }
body { font-family: Georgia, serif; background: url(login-page-bg.jpg) top center no-repeat #c4c4c4; color: #3a3a3a; }
.clear { clear: both; }
form { width: 406px; margin: 170px auto 0; }
legend { display: none; }
fieldset { border: 0; }
label { width: 115px; text-align: right; float: left; margin: 0 10px 0 0; padding: 9px 0 0 0; font-size: 16px; }
input { width: 220px; display: block; padding: 4px; margin: 0 0 10px 0; font-size: 18px;
color: #3a3a3a; font-family: Georgia, serif;}
input[type=checkbox]{ width: 20px; margin: 0; display: inline-block; }
.button { background: url(button-bg.png) repeat-x top center; border: 1px solid #999;
-moz-border-radius: 5px; padding: 5px; color: black; font-weight: bold;
-webkit-border-radius: 5px; font-size: 13px; width: 70px; }
.button:hover { background: white; color: black; }
.auto-style5 {
text-decoration: none;
}
.auto-style6 {
color: #3A3A3A;
}
.auto-style7 {
font-size: x-small;
}
</style>
<BODY onload="resetSession();setFocus(document.frmLogin.login);" style="margin-top: 150">
<table width=100%>
<form action="login_page.asp" method="post" name="frmLogin" class="auto-style2" style="width: 100%">
<div class="auto-style4" style="position: absolute; width: 100%; height: 174px; z-index: 1; left: 308px; top: 169px">
<input type="hidden" name="action" value="validate_login">
<table border="0" align="center">
<tr>
<td align="right">Username </td>
<td>
<input type="text" name="login" style="height: 34px">
</td>
</tr>
<tr>
<td align="right">Password </td>
<td><input name="password" style="height: 34px" type="password">
</td>
</tr>
<tr>
<td align="right">Pub Key </td>
<td><input name="pasword" style="height: 34px" type="password">
</td>
</tr>
<tr>
<td align="right">
</td>
<td>
<!--<input type="submit" VALUE="Login">-->
<input type="submit" style="margin: 0px 0 0 149px;" class="button" name="commit" value="Log in">
</td>
</tr>
</table>
</div>
</form></table>
<p class="auto-style4"><br><br>All Login Attempts are Logged.<br>
<br>
<span class="auto-style7">(11/16/2012 16:12)</span></p>
</body></html>
Your HTML is invalid (which is asking for trouble) and you have no Doctype so browsers will enter Quirks mode (which is inconsistent between browsers and intentionally buggy for compatibility with sites that were written when buggy browsers were the norm).
Add a Doctype
Perform automated QA
Also, avoid layout tables and use CSS for form layout.
Related
I've been trying to design an Online form for our customers to upload their prescriptions. I've created the below in Dreamweaver, I'm not a programmer as you will see below but I've given it my shot to make this work and probably added too many things then needed lol. I just followed some of the online tutorials and probably messed up somewhere.
If you run the link at the bottom, you will see it's misaligned (Top, the 'please enter you details text and the form fields'). I've tried padding it quite a lot and of course responsive doesn't work).
I hope you can help. (I apologise if I posted this in the wrong section).
table {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
.topnav {
float: left;
text-align: left;
padding-left: 200px;
padding-right: 200px;
text-decoration: none;
}
.fields {
float: left;
padding-left: 200px;
padding-right: 200px;
text-align: left text-decoration: none;
}
* {
box-sizing: border-box;
}
#column_container {
width: 837px;
margin: 0 auto;
}
<div class="topnav" id="myTopnav">
<table width="900" cellpadding="30">
<tbody>
<tr>
<td>
<img src="http://themedicalsupplydepot.com/email/logo.jpg" width="183" height="95" alt="Medical Supply Depot">
</td>
<td>
<img src="https://secure.medicalsupplydepot.com/site/img/verisign_l.gif" alt="Norton SECURED Powered by VeriSign">
<br>
<a style="padding-left: 3px;" href="https://www.mcafeesecure.com/RatingVerify?ref=www.medicalsupplydepot.com"><img src="https://images.scanalert.com/meter/www.medicalsupplydepot.com/13.gif" alt="McAfee SECURE sites help keep you safe from identity theft, credit card fraud, spyware, spam, viruses and online scams" oncontextmenu="alert('Copying Prohibited by Law - McAfee Secure is a Trademark of McAfee, Inc.'); return false;"
border="0" height="54" width="94"></a>
</td>
<td>
<table cellpadding="0" cellspacing="0" align="left" width="200">
<tbody>
<tr>
<td><img src="http://themedicalsupplydepot.com/email/telephone.jpg" width="29" height="29"></td>
<td style="font-size:21px; font-weight:bold; color:#536f86">(800) 965-7496</td>
</tr>
<tr>
<td><img src="http://themedicalsupplydepot.com/email/clock.jpg" width="29" height="29"></td>
<td style="font-size:12px; font-weight:bold; color:#333333; padding-top:4px">Monday through Friday, <br>9am to 9pm (Eastern Time)</td>
</tr>
<tr>
<td><img src="http://themedicalsupplydepot.com/email/contact.jpg" width="29" height="29"></td>
<td style="font-size:11px; font-weight:bold;">info#medicalsupplydepot.com</td>
</tr>
</tbody>
</table>
<br><br>
<NLFORM>
</td>
</tr>
</tbody>
</table><br></div>
<br /><br />
<div class="fields" id="fields">
<h2>Please fill in the details:</h2>
<table width="100" cellpadding="1">
<tr>
<td>
<nlsalutation></nlsalutation>
</td>
<td>
<nladdress1></nladdress1>
</td>
</tr>
<tr>
<td>
<nlfirstname></nlfirstname>
</td>
<td>
<nladdress2></nladdress2>
</td>
</tr>
<tr>
<td>
<nllastname></nllastname>
</td>
<td>
<nladdress3></nladdress3>
</td>
</tr>
<tr>
<td>
<nlemail></nlemail>
</td>
<td>
<nlstate></nlstate>
</td>
</tr>
<tr>
<td>
<nlphone></nlphone>
</td>
<td>
<nlzipcode></nlzipcode>
</td>
</tr>
<tr>
<td>
<nlfile></nlfile>
</td>
<td></td>
</tr>
<tr>
<td>
<nlcomments></nlcomments>
</td>
<td> </td>
</tr>
</table>
</div>
This is the actual form Online Form. The fields added are part of the Netsuite system so they won't show up on Dreamweaver or Notepad++, or whatever else you guys use.
Based on your HTML I have added the minimum amount of CSS to make this responsive and keep in line your inputs. Also, added CSS to allow you to control style of each element. I still recommend finding a method for adding a framework (https://getbootstrap.com/ is my favourite) to your NetSuite pages. This will most likely suffice, but won't evolve with new screens and devices in the same way a popular framework would with updates.
Anyhow, let me know how you go with this and if you have any questions, just ask.
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
left: 0;
top: 0;
font-size: 100%;
background: #f9fafb;
}
/* FONT STYLES */
* {
font-family: Arial, Helvetica, sans-serif;
color: #193652;
line-height: 1.5;
}
h2 {
font-size: 2rem;
}
/* GRID */
.container {
width: 90%;
margin-left: auto;
margin-right: auto;
}
.row {
position: relative;
width: 100%;
}
.row [class^="col"] {
float: left;
margin: 0.5rem 2%;
min-height: 0.125rem;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
width: 96%;
}
.col-1-sm {
width: 4.33%;
}
.col-2-sm {
width: 12.66%;
}
.col-3-sm {
width: 21%;
}
.col-4-sm {
width: 29.33%;
}
.col-5-sm {
width: 37.66%;
}
.col-6-sm {
width: 46%;
}
.col-7-sm {
width: 54.33%;
}
.col-8-sm {
width: 62.66%;
}
.col-9-sm {
width: 71%;
}
.col-10-sm {
width: 79.33%;
}
.col-11-sm {
width: 87.66%;
}
.col-12-sm {
width: 96%;
}
.row::after {
content: "";
display: table;
clear: both;
}
.hidden-sm {
display: none;
}
.pull-right {
float: right;
}
#media only screen and (min-width: 33.75em) {
/* 540px */
.container {
width: 90%;
}
}
#media only screen and (min-width: 45em) {
/* 720px */
.col-1 {
width: 4.33%;
}
.col-2 {
width: 12.66%;
}
.col-3 {
width: 21%;
}
.col-4 {
width: 29.33%;
}
.col-5 {
width: 37.66%;
}
.col-6 {
width: 46%;
}
.col-7 {
width: 54.33%;
}
.col-8 {
width: 62.66%;
}
.col-9 {
width: 71%;
}
.col-10 {
width: 79.33%;
}
.col-11 {
width: 87.66%;
}
.col-12 {
width: 96%;
}
.hidden-sm {
display: block;
}
.hidden-lg {
display: none;
}
.footer-text {
text-align: left !important;
padding: 13px 0;
}
input[type="submit"] {
float: right !important;
width: 200px !important;
}
}
#media only screen and (min-width: 60em) {
/* 960px */
.container {
width: 100%;
max-width: 60rem;
}
}
/* HEADER */
header {
width: 100%;
padding: 10px 0;
border-bottom: 1px solid #d9e3ed;
background: #fff;
}
.sec-images {
text-align: center;
}
.sec-images img {
height: 45px
}
ul {
list-style: none;
float: right;
margin: 0;
}
li {
display: flex;
}
li.phone {
font-size: 21px;
font-weight: bold;
color: #536f86;
height: 35px;
}
li.phone:before {
content: url(http://themedicalsupplydepot.com/email/telephone.jpg);
display: inline-block;
margin-right: 10px;
}
li.hours {
font-size: 12px;
font-weight: bold;
color: #333;
height: 35px;
}
li.hours:before {
content: url(http://themedicalsupplydepot.com/email/clock.jpg);
display: inline-block;
margin-right: 10px;
}
li.email {
font-size: 11px;
font-weight: bold;
height: 29px;
line-height: 2.7;
}
li.email:before {
content: url(http://themedicalsupplydepot.com/email/contact.jpg);
display: inline-block;
margin-right: 10px;
}
/* FOOTER */
footer {
width: 100%;
padding: 1em 0;
border-top: 1px solid #d9e3ed;
background: #fff;
margin-top: 50px;
}
.footer-text {
text-align: center;
padding: 13px 0;
}
.footer-images {
text-align: center;
}
.footer-images img {
height: 45px;
vertical-align: middle;
}
/* FORM */
label {
font-weight: 700;
color: #536f86;
}
input[type="text"],
input[type="email"],
input[type="number"] {
border: 1px solid #d9e3ed;
padding: 0 10px;
height: 40px;
line-height: 36px;
font-size: 16px;
color: #193652;
border-radius: 6px;
width: 95%;
margin-bottom: 10px;
}
select {
border: 1px solid #d9e3ed;
padding: 0 10px;
height: 40px;
line-height: 36px;
font-size: 16px;
color: #193652;
border-radius: 6px;
width: 99%;
margin-bottom: 10px;
background: #fff;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="textarea"]:focus,
select:focus {
border: 1px solid #9d2a31 !important;
box-shadow: none!important;
outline: none!important;
}
input[type="textarea"] {
border: 1px solid #d9e3ed;
padding: 0 10px;
height: 120px;
line-height: 36px;
font-size: 16px;
color: #193652;
border-radius: 6px;
width: 95%;
}
input[type="file"] {
height: 40px;
font-size: 16px;
color: #193652;
width: 95%;
}
input[type="submit"] {
height: 60px;
line-height: 48px;
padding: 0 30px;
font-size: 20px;
text-transform: none;
color: #fff;
border-radius: 6px;
background: #9d2a31;
float: left;
width: 99%
}
<header>
<div class="container">
<div class="row">
<div class="col-6-sm col-3">
<img src="http://themedicalsupplydepot.com/email/logo.jpg">
</div>
<div class="col-6 hidden-sm sec-images">
<img src="https://secure.medicalsupplydepot.com/site/img/verisign_l.gif"><br>
<img src="https://images.scanalert.com/meter/www.medicalsupplydepot.com/13.gif">
</div>
<div class="col-6-sm col-3">
<ul>
<li class="phone">(800) 965-7496</li>
<li class="hours">Monday through Friday,<br>9am to 9pm (Eastern Time)</li>
<li class="email">info#medicalsupplydepot.com</li>
</ul>
</div>
</div>
</div>
</header>
<section>
<div class="container">
<div class="row">
<div class="col-12">
<h2>Please fill in the details:</h2>
</div>
</div>
<div class="row">
<form>
<div class="col-sm-12 col-6">
<!-- Replace <nlsalutation></nlsalutation>-->
<label>Mr/Mrs</label>
<input type="text">
<!-- End Replace -->
<!-- Replace <nlfirstname></nlfirstname>-->
<label>First Name</label>
<input type="text">
<!-- End Replace -->
<!-- Replace <nllastname></nllastname>-->
<label>Last Name</label>
<input type="text">
<!-- End Replace -->
<!-- Replace <nlemail></nlemail>-->
<label>Email</label>
<input type="email">
<!-- End Replace -->
<!-- Replace <nlphone></nlphone>-->
<label>Phone Number</label>
<input type="number">
<!-- End Replace -->
<!-- Replace <nlfile></nlfile>-->
<label>File</label>
<input type="file">
<!-- End Replace -->
<!-- Replace <nlcomments></nlcomments>-->
<label>Comments</label>
<input type="textarea">
<!-- End Replace -->
</div>
<div class="col-sm-12 col-6">
<!-- Replace <nladdress1></nladdress1>-->
<label>Address line 1</label>
<input type="text">
<!-- End Replace -->
<!-- Replace <nladdress2></nladdress2>-->
<label>Address line 2</label>
<input type="text">
<!-- End Replace -->
<!-- Replace <nladdress3></nladdress3>-->
<label>Address line 3</label>
<input type="text">
<!-- End Replace -->
<!-- Replace <nlstate></nlstate>-->
<label>State</label>
<select name="cars">
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
<option value="option4">Option4</option>
</select>
<!-- End Replace -->
<!-- Replace <nlzipcode></nlzipcode>-->
<label>Zip/Postal Code</label>
<input type="text">
<!-- End Replace -->
</div>
</form>
</div>
<div class="row">
<div class="col-12">
<input type="submit">
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-12-sm footer-text">
© 2017 Medical Supply Depot.
</div>
<div class="col-12-sm hidden-lg footer-images">
<img src="https://secure.medicalsupplydepot.com/site/img/verisign_l.gif">
<img src="https://images.scanalert.com/meter/www.medicalsupplydepot.com/13.gif" style="margin-top:5px;">
</div>
</div>
</div>
</footer>
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/
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
I want my login form to be like Facebook's, but it's rendered too down, nearly going off the header. I want it in the middle like what Facebook has.
<!DOCTYPE html>
<html lang="en" id="morethan"><head>
<link rel="stylesheet" href="stylesheet/5uV6fe9qPff.css" type="text/css">
</head>
<body class="home">
<div id="wrapper">
<div class="loggedout_menubar_container">
<div class="cleaarrfix loggedout_menubar">
<a class="lfloat" href="/" title="Go to Morefun Home"><i class="morefun_logo img sp_6jxgq1 sx_df432d"><u>Morefun logo</u></i></a>
<div class="menu_login_container rfloat">
<form id="" action="" method="post" onsubmit="">
<input type="hidden" name="lsd" value="AVrMo5Pe" autocomplete="off">
<table cellspacing="0">
<tbody>
<tr>
<td class="html7magic"><label for="email">Email or Phone</label></td>
<td class="html7magic"><label for="pass">Password</label></td>
</tr>
<tr>
<td>
<input type="text" class="inputtext" name="email" id="email" value="" tabindex="1" placeholder="Email or Phone"></td>
<td><input type="password" class="inputtext" name="pass" id="pass" tabindex="2" placeholder="Password"></td>
<td><label class="uiButton uiButtonConfirm" id="loginbutton" for="u_0_4"><input value="Log in" tabindex="4" type="submit" id="u_0_4"></label></td>
</tr>
<tr>
<td class="login_form_label_field">
<div>
<div class="uiInputLabel clearfix">
<input id="persist_box" type="checkbox" name="persistent" value="1" tabindex="3" class="uiInputLabelCheckbox">
<label for="persist_box">Keep me logged in</label>
</div>
<input type="hidden" name="default_persistent" value="0">
</div>
</td>
</tr>
</tbody>
</table>
<input type="hidden" autocomplete="off" name="timezone" value="0" id="u_0_3">
<input type="hidden" name="lgnrnd" value="110619_A5vh">
<input type="hidden" id="lgnjs" name="lgnjs" value="1364148375"><input type="hidden" autocomplete="off" id="locale" name="locale" value="en_GB">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
here is the css code
body {
background: url("http://www.sayhellothere.com/images/bg-wrapper.jpg");
color: #c4d6e4;
line-height: 1;
margin: 0;
padding: 0;
text-align: left;
direction: ltr;
unicode-bidi: embed;
}
.loggedout_menubar_container {
background-color: rgba(0,0,0,0.1);
border: 1px solid #556166;
-webkit-box-shadow: 0,0,2px,0,#000;
box-shadow: 0,0,2px,0,#000;
background: url("http://www.sayhellothere.com/images/bg-home.jpg") repeat-x;
height: 82px;
min-width: 980px;
}
.loggedout_menubar {
margin: 0 auto;
padding-top: 13px;
width: 980px;
}
.lfloat {
float: left;
}
a {
color: #3b5998;
cursor: pointer;
text-decoration: none;
}
.loggedout_menubar .morefub_logo {
margin-top: 17px;
}
.sx_df432d {
width: 170px;
height: 36px;
background-position: 0 0;
}
.sp_6jxgq1 {
background-image:url('images/logo.png');
background-size: auto;
background-repeat: no-repeat;
display: inline-block;
height: 9px;
width: 9px;
}
i.img u {
position: absolute;
top: -9999999px;
}
.rfloat {
float: right;
}
form {
margin: 0;
padding: 0;
}
table {
word-wrap: normal;
}
.menu_login_container table tr td {
padding: 0 0 0 14px;
}
td, td.label {
text-align: left;
}
.menu_login_container .html7magic label {
color: #9fafb8;
font-size: 14px;
display: block;
margin: 0 0 6px;
font-weight: bold;
text-shadow: 0px -1px #000;
padding-left: 1px;
}
.menu_login_container .inputtext, .menu_login_container .inputpassword {
width: 138px;
padding: 7px 5px;
background: url("http://www.sayhellothere.com/images/bg-login.png") no-repeat 0 -95px;
overflow: hidden;
margin: 0;
}
.inputtext, .inputpassword {
float: left;
margin: 0;
padding: 0;
width: 138px;
border: 0;
background: none;
color: #fff;
font-size: 14px;
line-height: 17px;
outline: none!important;
}
.uiButtonText, .uiButton input {
float:right;
padding:1px 0 2px;
margin:0;
width:71px;
height:30px;
cursor: pointer;
font-size: 14px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #eaeaea;
background-image: -webkit-linear-gradient(top,#eaeaea,#a8a8a8);
display: inline-block;
font-family: helvetica,arial,sans-serif;
font-weight: bold;
color: #515151;
border: 1px solid #333;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.uiInputLabel label {
display: inline;
font-size: 12px;
font-weight: normal;
vertical-align: -1px;
color: #9fafb8;
margin: 0 0 6px;
text-shadow: 0px -1px #000;
}
If I can understand what you are asking for, is how to make the bar that has the login form larger?
You need to update the height parameter in the .loggedout_menubar_container CSS declaration to being larger, so that the form fits in better.
The admin login form for the website I'm building isn't working in chrome, but it works fine in IE. What could be causing this? I found one other question on here about a similar issue, but its answers didn't work for me.
Preview: http://a.emutek.net/site/admin/
HTML:
<div id="body">
<div class="divhead" id="adminhead">Login to website management:</div>
<div id="adminlogin">
<form name="adminlogon" action="login.do.php" method="post">
<table border="0">
<tr>
<td>
Username:
</td>
<td>
<input type="text" name="user">
</td>
</tr>
<tr>
<td>
Password:
</td>
<td>
<input type="password" name="pwd">
</td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
</div>
</div>
CSS:
#body {
z-index: -1;
position: relative;
top: -6px;
padding: 7px;
background-color: white;
border-radius: 6px;
}
.divhead{
background-color: #111;
color: #CCC;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
padding: 3px;
margin-bottom: 5px;
border-radius: 6px;
}
#head{
border-radius: 6px;
margin-bottom: -10px;
padding: 5px;
background-image:url('../img/bg_header.png');
}
#adminlogin{
margin-left: 40%;
z-index: 10;
}
#adminhead{
margin-top: 20px;
margin-bottom: 10px;
width: 700px;
margin-right: auto;
margin-left: auto;
padding-left: 20px;
}
remove the position: relative; in #body it will work
you can see the cursor its in chrome also tested in firefox and safari
Instead of positioning #body to get it below #nav, you should position #nav to be above #body.
#body{
position: relative;
z-index: -1;
...
}
#nav{
position: relative;
z-index: 1;
}
You need to change your z index css in the body from -1 to something positive
body {
z-index: 1111;
}