I made a simple HTML webpage recently, and everything works perfectly, except for on the webpage you can scroll to the right and there’s a strange space where there aren’t any elements and that the background doesn’t cover. I’ve gone over my code many times, but I just can’t figure out what it is.
Screenshot of the problem:
As for the code, here it is:
JavaScript
x
161
161
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="utf-8">5
<meta name="description" content="Multiline to Singleline JS Converter">6
<meta name="author" content="Nomadical">7
<meta name="keywords" content="Multiline to Singleline,JS,Multiline to Singleline JS, Multiline to Singleline Converter, Nomadical" >8
<meta name="viewport" content="width=device-width, initial-scale=1">9
<link rel="shortcut icon" type="icon/ico" href="javascripticon.ico"/>10
<title>Multiline to Singleline JS</title>11
12
</head>13
<style>14
#header {15
background-color: white;16
padding-top: 0px;17
padding-bottom: 0px;18
padding: 0px;19
width: 95%;20
margin-top: 0px;21
top: 0;22
font-family: Verdana, Geneva, Tahoma, sans-serif;23
border-bottom-left-radius: 25px;24
border-bottom-right-radius: 25px;25
}26
27
#headercontainer{28
padding-left: 5%;29
}30
31
#body {32
background-image: url(background.png);33
background-size: cover; 34
background-repeat: no-repeat;35
background-color: #464444;36
}37
38
#tablerow {39
width: 45%; 40
}41
</style>42
<body id="body">43
<div id="headercontainer">44
<div id="header">45
<h1 style="text-align: center; margin: 0px; padding-top: 30px; padding-bottom: 5px;">46
Multiline to Singleline JS Converter47
</h1>48
<h4 style="text-align: center; margin: 0px; padding-top: 5px; padding-bottom: 30px;">49
The tool for converting all your complicated JS code into something that can be run in a browser bookmark50
</h4>51
</div>52
</div>53
<div style="padding-top: 0px; padding-left: 10%; width: 100%; position: relative;">54
<table style="width: 80%;"> <!-- Style for testing: border: 1px solid white; -->55
<tr>56
<th id="tablerow">57
<h1 style="color: white; width: 100%; text-align: center;"> <!-- Input In -->58
Paste your singleline code here59
</h1>60
</th>61
<th style="width: 10%;"></th>62
<th id="tablerow"> <!-- Input Out -->63
<h1 style="color: white; width: 100%; text-align: center;">64
Copy your singleline code from here65
</h1>66
</th>67
</tr>68
<tr>69
<th id="tablerow"> <!-- Input In -->70
<textarea id="input" style="width: 100%; height: 500px; font-family: 'Courier New', Courier, monospace;"></textarea>71
</th>72
<th style="width: 10%;"></th>73
<th id="tablerow"> <!-- Input Out -->74
<textarea id="output" readonly style="width: 100%; height: 500px; font-family: 'Courier New', Courier, monospace;"></textarea>75
<!--<input type="text" id="output2" style="width: 100%; height: 500px; font-family: 'Courier New', Courier, monospace;"></textarea>-->76
</th>77
</tr>78
<tr style="height: 20px;"></tr>79
<tr>80
<th id="tablerow">81
<button type="button" id="submit" style="color: green; width: 200px; height: 50px; font-size: 25px;">Convert</button> 82
</th>83
<th style="width: 10%;"></th>84
<th id="tablerow">85
<button onclick="copy()" id="copy" type="button" style="color: green; width: 200px; height: 50px; font-size: 25px;">Copy Text</button> 86
</th>87
</tr>88
</table>89
</div>90
<script>91
function copy() {92
const copy = document.getElementById("copy");93
copyText = document.getElementById('output').innerHTML;94
navigator.clipboard.writeText(copyText);95
copy.innerText = "Copied!";96
setTimeout(() => {copy.innerText = "Copy Text";}, 2000);97
}98
99
document.getElementById('submit').onclick = function() {100
document.getElementById('output').innerHTML = "";101
output = "javascript: ";102
input = "";103
cache = "";104
comment = false;105
var textbox = document.getElementById("input").value;106
//var input = $('textbox').val().split('n');107
//document.getElementById('output2').value= textbox;108
//var input = textbox.value.split("n");109
for(var i = 0;i < textbox.length;i++){110
line = textbox[i]111
if (line == "/" && textbox[i + 1] == "/") {112
comment = true;113
i++114
}115
if (comment == false) {116
if (line.indexOf('n') > -1) {117
if (line.indexOf(';') < 0 && cache != ";" && cache != "}" && cache != "{")118
{119
//if (textbox[i + 1] == "}") {120
// line = ""121
//}122
if (line == "n" && textbox[i - 1] != "{" && textbox[i + 1] != "}") {123
line = "; "124
}125
else {126
line = ""127
}128
}129
if (cache == ";") {130
line = " "131
}132
if (cache == "{" || cache == "}") {133
line = ""134
}135
}136
if (line != " ") {137
output += line138
}139
if (cache != " ")140
{141
if (line == " " && textbox[i - 1] != "n") {142
output += line143
}144
}145
cache = line146
}147
if (comment == true) {148
if (line != "n") {149
line = ""150
}151
else {152
comment = false;153
}154
}155
156
}157
document.getElementById('output').innerHTML = output;158
};159
</script>160
</body>161
</html>This code doesn’t have the background image in it, so if you want to view that, you can download it here: Click here
Advertisement
Answer
Add this to your css style:
JavaScript
1
4
1
* {2
box-sizing: border-box;3
}4
For some reason this is not a default value. This will make all elements width calculated with padding included. Otherwise padding is added to width. Margin is still added on top of width. There is no solution for that.