so i’m trying my hand at making a neocities, and i’m making a 404 page and i wanna add a note that the gif background is broken on firefox. however, when i try to add new text to appear in the top left corner, the text in the centre becomes decentered.
here’s the code for the css file
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
body {
display: table
}
.my-block {
text-align: center;
display: table-cell;
vertical-align: middle;
color: #4c00b0;
font-family: utcomicsans;
}
.normal {
color: #ffffff;
font-family: 'Times New Roman', serif;
display: table-cell;
}
body {
background-color: #000000;
}
body{
background-image: url(starstwinkle.gif);
background-size: cover;
height: 100vh;
padding:0;
margin:0;
}
@font-face {
font-family: utcomicsans;
src: url(comic-sans-ut.ttf);
}
and here’s the code and screenshot for the page with and without the note
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Found</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div class="my-block">
<h1>oops! nothing here!</h1><br />
<h2>dw it's probably my fault that you're here</h2>
</div>
</body>
</html>
404 page without the note
and here it is with the note
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Found</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div class="normal">for some reason the background doesn't work on firefox, you have to click constantly for the to animate. idk why and i can't be bothered to fix it, sowwy :(</div>
<div class="my-block">
<h1>oops! nothing here!</h1><br />
<h2>dw it's probably my fault that you're here</h2>
</div>
</body>
</html>
404 page with the note
i tried like removing certain parts to see what they did and if they were maybe causing the problem (i didn’t write the code that centres the text) but that did nothing and just messed it up more. i also tried switching to a different centering method but it didn’t even work without the note. so yeah i’m kinda lost. any help would be appreciated!
Ender is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.