T test my registration page on 6 browsers.
I get 3 different layouts:
Firefox and explorer get ir right (What I wanted)
Here is what Safari gives
And here is what I get in Chrome, Opera and Edge
I searched the web for solutions,
I found explanations why this happens, and general rules how to cope with it like "Keep it simple.
What is simple? is my code complicated ?
Here is the registration form code
<?php
;
include_once 'header.php';
?><!DOCTYPE html>
<html>
<head>
<title> JavaScript </title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/css" src="js/jquery-ui.css"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script type="text/javascript">
$(document).ready(function(){
//check username availability using AJAx
$("#username").keyup(function(){
username = $("#username").val(); //Insert username input field value intu username variable
if(username.length >0){
checkUsernameAvailability(username); //This function will chack username avgailability
}
});//End check username availability using AJAx
$("#button").click(function(){
//Declare an empty array which will contain all empty fields which must be filled
var unfilled = [];
var firstname = document.getElementById('firstname');
var lastname = document.getElementById('lastname');
var email = document.getElementById('email');
var username = document.getElementById('username');
var pwd = document.getElementById('pwd');
// Reset counter
var i = 0;
if (firstname.value.length == 0)
{
unfilled[i] = 'first name'+'\n';
i++;
}
if (lastname.value.length == 0)
{
unfilled[i] = 'last name'+'\n';
i++;
}
if (email.value.length == 0)
{
unfilled[i] = 'email'+'\n';
i++;
}
if (username.value.length == 0)
{
unfilled[i] = 'username'+'\n';
i++;
}
if (pwd.value.length == 0)
{
unfilled[i] = 'password'+'\n';
i++;
}
//check if all form fields are not empty
if(unfilled.length > 0)
{
event.preventDefault();
//If not all fields are filled - stop default action - the form data processing
var message = '';
for( var i=0; i<=unfilled.length-1; i++)
{
message = message + unfilled[i];
}
if(unfilled.length == 1){
alert ('The following field must be filled :'+'\n'+message);
}else {
alert ('The following '+i+' field must be filled :'+'\n'+message);
}
}
}); //End button click
});//End ready
function checkUsernameAvailability(username){
$.ajax({
method:'POST',
url:'includes/process_data.php',
data:'username='+username,
success:function(data){
$("#status").html(data);
if(data.includes("taken")){
document.getElementById("button").disabled = true;
document.getElementById("button").style.cursor = "not-allowed";
}else{
document.getElementById("button").disabled = false;
document.getElementById("button").style.cursor = "pointer";
}
}
})
}
</script>
</script>
</head>
<body>
<section class="main-container">
<div id="" class="main-wrapper">
<h2>Sign Up</h2>
<form class="signup-form" method="post" id="form" action="includes/add_new_user.inc.php">
<input type="text" id='firstname' name="firstname" placeholder="First Name">
<input type="text" id="lastname" name="lastname" placeholder="Last Name">
<input type="email" id="email" name="email" placeholder="E-mail">
<div class="input_qm">
<input autocomplete="off" type="text" id="username" name="username" placeholder="Username" pattern="[A-Za-z0-9.-_]{5,10}"><img id="qm_usrnm" class="question_mark" src="images/question-mark.svg" width="25" height="25" alt="Username rules">
</div>
<!-- The following div will contain the data telling registrants if username is available -->
<div id="status" style="text-align: center; font-family: david;"></div>
<div id="" class="input_qm">
<input type="password" id="pwd" name="pwd" placeholder=" Password">
<img id="qm_pwd" class="question_mark" src="images/question-mark.svg" width="25" height="25" alt="Password rules">
</div>
<button type="submit" name="submit" id="button" class= "disabled">Sign Up</button>
</form>
</div>
</section>
</body>
</html>
Here is the CSS
*{margin:0; padding:0;}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
.main-wrapper {
margin :0 auto;
width: 1200px;
}
a {
text-decoration: none;
}
body {
background-color: #ccc;
}
/* Header */
header nav {
width: 100%;
height: 60px;
background-color: #ccc;
}
header nav ul {
float: left;
}
header nav ul li {
float: left;
list-style: none;
margin: 0 10px;
}
header nav ul li a {
font-family: arial;
font-size: 16px;
color: #111;
line-height: 63px;
}
header .nav-login {
float: right;
}
header .nav-login form {
float: left;
padding-top: 15px;
}
header .nav-login form input {
float: left;
width: 140px;
height: 30px;
padding: 0px 10px;
margin-right: 10px;
border: none;
background-color: #f3f3f3;
font-family: arial;
font-size: 14px;
color: #111;
line-height: 30px;
}
header .nav-login form button {
float: left;
width: 60px;
height: 30px;
margin-right: 10px;
border: none;
background-color: #f3f3f3;
font-family: arial;
font-size: 14px;
color: #111;
cursor: pointer;
}
header .nav-login form button:hover {
width: 62px;
height: 32px;
font-weight: bold;
}
.disabled{
background-color: #ccc;
cursor: not-allowed;
}
header .nav-login a {
display: block;
width: auto;
height: 30px;
float: left;
border: none;
background-color: #ccc;
font-family: arial;
font-size: 14px;
color: #111;
line-height: 63px;
cursor: pointer;
}
.main-container {
padding-top: 40px;
}
.main-container h2 {
padding-top: 40px;
font-family: arial;
font-size: 40px;
color: #111;
line-height: 50px;
text-align: center;
}
/*Sign up form*/
.signup-form {
width: 400px;
margin: 0 auto;
padding-top: 30px;
}
.signup-form input {
width: 80%;
height: 40px;
padding: 0px 5%;
margin-bottom: 5px;
border: none;
background-color: #fff;
font-family: arial;
font-size: 16px;
color: #222;
line-height: 40px;
}
.input_qm {
width: 100%;
height: 40px;
margin-bottom: 5px;
}
.question_mark {
float: right;
margin: 5px;
}
.signup-form button {
display: block;
margin: 10px auto;
width: 90px;
height: 30px;
border: none;
background-color: #222;
font-family: arial;
font-size: 16px;
color: #fff;
cursor: pointer;
}
.signup-form button:hover {
width: 94px;
height: 32px;
font-weight: bold;
}
.disabled{
cursor: not-allowed;
}
The part of resetting variables after the
*{margin:0; padding:0;}
was added as an attempt to follow suggestions,
What else can I do
Is my code complicated?
Shuold I simplify something
What should I try to change when I get these layout results ?
