Web page looks different in every browser - What can I do?

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 ?

I suspect the problem may be due to the use of float.

There are people here who know far more than I who will give you a definitive answer. But I wonder if using :after would achieve a more consistent layout?

Just to add to the confusion, this is what I get with your code on Chrome v.91.0.4472.124 on Windows


using a downloaded image that I changed to an .svg

1 Like

Do you have a link to the actual site as I don’t see the same as your screenshots with the posted code.

This is what I see in Firefox, Chrome and Safari on a mac.

(I added my own svg to get the image to show).

What browser versions are you testing on? Or were those screenshots from a browser service?

You are using old techniques such as float which if not controlled explicitly could cause problems. You are also using too many dimensions to make those elements line up. For instance you have an input at 80% width and 5% padding and then you have an image at 25px width 5px margin all around. That all has to add up to less than 100%. If instead you had used flexbox you could make the inputs fill up the available space without explicitly sizing them.

However if you can provide a link to the actual page we should be able to pinpoint your immediate problem.

If for example a user has zoomed their text size only then fixed sizes will break but a more fluid approach allows for more leeway.

1 Like

My pages are on a WAMP server at home. Not published yet

Chrome : 91.0.4472.124
Safari : 5.1.7 (7534.57.2)
Edge : 91.0.864.67
Explorer : 11.0.9660.19596 update 11.0.170
Firefox : 90.0b12
Opera : 77.0.4054.203

I would delete that from your windows machine as quickly as possible as its only use would be in installing malware/ransomware and other viruses on your computer. Safari 5 was was briefly available on Windows about 10 years ago but was discontinued shortly after that.

It does not represent modern Safari in any way and doesn’t understand any modern css or css techniques or html5. It had many bugs and strange behaviours (including floats) and is akin to trying to run a computer program on an abacus. :slight_smile:

Joking aside Safari 5 is of no use to you at all and I would be really wary of starting it up. If you need to check Safari then you will need to buy a mac and do it properly. Modern Safari is pretty good but still lags a little behind at times. However as you can see form my screenshot it renders ok on my iMac in Safari (13.1).

Ok that’s a shame.

I have now checked the code you gave me on a Windows 10 machine and IE11, Edge, Chrome and Firefox all display the same as the screenshots I posted in my first post.

Therefore I have to surmise that the issue is either with code that we don’t have privilege to you or the issue is local to you and your machine.

I also assume that you are not including your header php outside of the doctype as that will likely send the browser into quirks mode. All content should be inside the body tags.

2 Likes

It is no longer necessary to put

in your <script> tags, and putting

in a <script> tag is definitely a no-no.

2 Likes

I’m a fan of “working pages”. Put all of your HTML, CSS and JS in one file (on one page) and use full URLs to link to any outside resources (such as images) directly or through CDNs.

Test your working page using the HTML validator
https://validator.w3.org/
and the CSS validator
https://jigsaw.w3.org/css-validator/

as it is being developed and again before posting it for us to review.

1 Like