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>
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>
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!
If you want to center the div with class='normal' you can try this. If you don't wish to add many lines, you can just use the option 2.
Option 1:
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);
}<!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 style="
display: flex;
flex-direction: column;
height: 100%;
">
<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" style="
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
">
<h1>oops! nothing here!</h1><br>
<h2>dw it's probably my fault that you're here</h2>
</div>
</div>
</body>
</html>
</html>Option 2:
Just add
position: absolute to the class normal. The will act itself as a relative parent.
.normal {
color: #ffffff;
font-family: 'Times New Roman', serif;
display: table-cell;
position:absolute
}