EDIT: I think this boils down to browsers rendering fonts differently. I reduced and reduced my code to try to figure out where the problem was, and I ended up just having a plain webpage with only <h1>Ladesoft</h1> in the body and nothing else, with nothing in my CSS file other than a global choice of font, and I noticed that Chrome and Firefox rendered the heading quite differently. Searching around online, I found this query, and basically it looks like there's unlikely to be any way of achieving my goal. So I'm going to have to resort to creating an image I think. I'll leave this post unanswered for now in case anyone comes up with a solution.
I'm having a problem where the header (h1) on my website looks completely different depending on which browser I use. I am doing something a little unusual with it, but I can't figure out how to get things to look the same. My website is http://www.ladesoft.com
I want to have the title of my site written with just the one line:
<h1>Ladesoft</h1>
I am using CSS to manipulate the text to look like this:
My CSS file can be found here: https://github.com/andylatham82/Website/blob/master/styles.css
Edit: Adding CSS code. Apologies for including it all, but I just don't know where the problem is.
html
{
height: 100%;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
body
{
height: 100%;
background-color: rgb(43, 43, 43);
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
margin-left: auto;
margin-right: auto;
}
h1
{
color: orange;
font-size: 600%;
font-weight: 100;
margin-top: 20px;
margin-bottom: -60px;
margin-left: -60px;
transform:scale(0.9,1);
text-decoration: underline;
text-decoration-color: cornflowerblue;
overflow: hidden;
position:relative;
z-index: -1;
}
h1::first-letter
{
color: cornflowerblue;
font-size: 300%;
margin-right: -20px;
float: left;
margin-top: -125px;
margin-right: -106px;
position: relative;
}
h2
{
color: cornflowerblue;
text-align: center;
font-weight: 50;
margin-top: 20px;
margin-bottom: 20px;
}
p
{
color: rgb(228, 226, 179);
}
table
{
margin-left: auto;
margin-right: auto;
padding: 0;
border-spacing:0;
}
td
{
color: rgb(228, 226, 179);
width: auto;
text-align: left;
border-spacing: 0;
padding: 2px;
padding-left: 10px;
padding-right: 10px;
}
a
{
color: cornflowerblue;
}
ul
{
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: orange;
}
li
{
float: left;
}
li a
{
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover
{
background-color: red;
}
hr
{
margin-top: 0px;
border-color: cornflowerblue;
align: left;
size: 4;
border-style: solid;
}
iframe
{
height: 650px;
width: 405px;
border: none;
overflow: hidden;
justify-content: center;
}
.gamelink
{
margin-left: 20px;
}
.date
{
color: orange;
}
.wrapper {
margin: 0px;
padding: 0px;
height: 128px;
display: flex;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
padding-bottom: 400px;
justify-content: center;
}
canvas {
border: 0px;
width: 512px;
height: 512px;
background: black;
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor;
}
#centered
{
text-align: center;
margin-left: auto;
margin-right: auto;
}
One of my HTML files can be found here: https://github.com/andylatham82/Website/blob/master/pages/games.html
Edit: Adding HTML code:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<meta name="keywords" content="Game, Video, Videogame, C++, C#, Monogame, Pico-8, Pico8, Arduboy, Lua, CSS, Ladesoft, Andy, Latham">
<meta name="description" content="Video games made by Andy Latham">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Andy Latham">
<link rel="stylesheet" href="../styles.css">
<TITLE>Ladesoft: Games</TITLE>
</head>
<body>
<h1>Ladesoft</h1>
<ul>
<li><a href="games.html">Games</a></li>
<li><a href="experiments.html">Software & Experiments</a></li>
<li><a href="about.html">About</a></li>
</ul>
<hr style="margin-left: 55px; width: 48px">
<h2>Games</h2>
<p>I love making games. Here's a selection of my output. The purpose of any game is to be played, so I'd love to <a href=about.html>hear</a> from anyone who plays any of these!</p>
<br>
<table>
<tr>
<td>
<a href="games/textadventure.html"><img src="../images/thumbnails/textadventurethumb.png" title="Text Adventure" alt="Text Adventure" style="float:left;"></a></td>
<td><span class="date">[2020]</span> A work-in-progress text adventure.</td>
</tr>
<tr>
<td>
<a href="games/pointandclickadventure.html"><img src="../images/thumbnails/pointandclickthumb.png" title="Point-and-Click Adventure" alt="Point-and-Click Adventure" style="float:left;"></a></td>
<td><span class="date">[2020]</span> A work-in-progress 'point-and-click' adventure.</td>
</tr>
<tr>
<td>
<a href="games/babydump.html"><img src="../images/thumbnails/babydumpthumb.png" title="Text Adventure" alt="Text Adventure" style="float:left;"></a></td>
<td><span class="date">[September 2020]</span> Earn money by having (and abandoning) babies.</td>
</tr>
<tr>
<td>
<a href="games/blackdeath.html"><img src="../images/thumbnails/blackdeaththumb.png" title="Black Death" alt="Black Death" style="float:left;"></a></td>
<td><span class="date">[August 2019]</span> Play as bubonic plague and try to wipe out the villagers.</td>
</tr>
<tr>
<td>
<a href="games/thecrawl.html"><img src="../images/thumbnails/thecrawlthumb.png" title="The Crawl" alt="The Crawl" style="float:left;"></a></td>
<td><span class="date">[March 2019]</span> A mini dungeon crawling platform game.</td>
</tr>
</table>
<br>
<br>
<p id="centered">
<a href="http://www.ladesoft.com">-Ladesoft-</a>
</p>
<br>
</body>
</html>
With Chrome on Linux, things look correct:
but with Firefox on Linux, this is what I see:
With Chrome on Windows, it's this:
and with Firefox on Windows, it's this:
And just for good measure, with Edge on Windows, it's this:
Would anyone be kind enough to help me work out what's going on? I understand that different browsers render things differently, but is there any way of achieving my goal of having this logo look the same everywhere without resorting to using an image?
