I'm currently working on developing an online game with a login screen inspired by Paper.io. I have created the username input and play button, but there seems to be an issue with the width and height specified in the CSS file for the input field. Even though it's set at 216 x 30, it doesn't display correctly when I view the website. Strangely, when I paste the code into a snippet on this forum, it works fine, but not on my own computer. This is my first attempt at creating an online HTML5 game, so please bear with me!
html,
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
border: none;
overflow: hidden;
padding: 0;
font-family: 'Luckiest Guy';
font-size: 22px;
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
#game .ctx,
#ctx {
height: 100%;
width: 100%;
overflow: hidden;
position: fixed;
left: 0;
top: 0;
}
#pre_game {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #dff3f7;
}
#pre_game .dark,
#dark {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .8);
}
#pre_game .logo {
position: absolute;
top: 15px;
left: 50%;
width: 500px;
height: 160px;
margin-left: -250px;
background: url('/img/logo.png') center center no-repeat;
background-size: contain;
}
#pre_game .grow {
position: absolute;
left: 50%;
margin-left: -168px;
width: 336px;
top: 250px;
}
#pre_game .grow {
animation: leaves 2s ease-in-out infinite alternate;
-webkit-animation: leaves 2s ease-in-out infinite alternate;
}
#pre_game input,
#contact .button {
position: absolute;
left: 0px;
top: 0px;
padding: 15px 5px;
text-indent: 10px;
border: 0;
height: 30px;
width: 216px;
line-height: 30px;
font-size: 25px;
background: #ededd1;
border-bottom: 6px solid #a1a18d;
outline: none;
}
#contact .button {
text-indent: 0;
}
#pre_game .button,
#contact .button {
position: absolute;
right: 0px;
top: 2px;
padding: 15px 5px;
text-align: center;
cursor: pointer;
height: 30px;
width: 90px;
}
#pre_game .button,
#contact .button {
background: #eaec4b;
border-bottom: 6px solid #a1a130;
margin-top: -2px;
color: #888a34;
line-height: 32px;
font-size: 34px;
}
#pre_game .button:hover,
#contact .button:hover {
background: #fafc5b;
}
#pre_game .button:active,
#contact .button:active {
border: none;
border-bottom: 2px solid #a1a130;
border-top: 4px solid #333;
}
@keyframes leaves {
0% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
100% {
transform: scale(0.9);
-webkit-transform: scale(0.9);
}
}
@-webkit-keyframes leaves {
0% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
100% {
transform: scale(0.9);
-webkit-transform: scale(0.9);
}
}
#pre_game:before {
content: '';
box-shadow: inset 0 0 320px #80969e;
-webkit-box-shadow: inset 0 0 320px #80969e;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
input:not([type]),
input[type="email" i],
input[type="number" i],
input[type="password" i],
input[type="tel" i],
input[type="url" i],
input[type="text" i] {
padding: 1px 0px;
}
input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
user-select: text;
cursor: auto;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
input,
textarea,
select,
button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em 0em 0em 0em;
font: 13.3333px Arial;
}
button,
meter,
progress {
-webkit-writing-mode: horizontal-tb;
}<link href='//fonts.googleapis.com/css?family=Luckiest Guy' rel='stylesheet'>
<div id="pre_game" style="display: block;">
<div class="dark"></div>
<div class="logo"></div>
<div class="grow">
<div class="username">
<input type="text" placeholder="Your Name" style="left: 0px;">
</div>
<div class="button play" style="right: 0px;" onclick="game_start()">PLAY</div>
</div>
</div>UPDATE: I want to clarify that the code snippet provided displays as intended, but when I run the same code on my computer and open the website, it appears differently. Here are screenshots illustrating the problem. Screenshot of incorrect display The dimensions shown in this picture are incorrect (206 x 0 instead of 216 x 30). Screenshot displaying wrong dimensions
ANSWER: Surprisingly, I managed to resolve the issue although I don't fully understand why. I experimented with normalizing the CSS and tried additional lines suggested by Timber Hjellum, but it made things worse. Upon further investigation, I discovered that the padding values were subtracted from the original width and height, resulting in the unexpected dimensions. By adjusting the values (adding 10 to width and 36 to height), I was able to achieve the desired appearance. Thank you all for your assistance!