When zooming out, the content on the page will not always align with the background as it should. Only Internet Explorer seems to maintain perfect alignment when zooming.
Internet Explorer 11:
But when doing this with any other browser, the content aligns out of original position, demonstrated with Firefox 26:
This is a minor issue, as I do not expect anyone to ever zoom out this far. However, I like to respect browser zoom compatibility, and provide support for every zoom level that it provides.
I would really just like to figure out what exactly is causing this. Am I using wrong code? Is the font not composed properly?
index.html
<!doctype html>
<html lang="en-gb">
<head>
<link href="styles/home.css" rel="stylesheet">
<link href="styles/main.css" rel="stylesheet">
<meta charset="utf-8">
<title>Just Cats</title>
</head>
<body>
<div id="side-space">
<div id="main">
<div class="box header">
</div>
<ul id="menu">
<li class="box">Home</li>
<li class="box">Ranks</li>
<li class="box">Bans</li>
<li class="box">Donate</li>
<li class="box">Group</li>
</ul>
<div id="content-area">
<div class="box content">
Server Features:
<ul>
<li>Additional Anti-Cheat</li>
<li>Dead Chat</li>
<li>No Advertisment</li>
<li>No Forced Team</li>
<li>Player Ranks</li>
<li>Round End Scramble</li>
<li>Voting:
<ul>
<li>Change Level</li>
<li>Kick (1 Day Ban)</li>
<li>Restart Game</li>
<li>Scramble Teams</li>
</ul>
</li>
</ul>
</div>
<div class="box content">
News:
<ul>
<li>Group News Item #1</li>
<li>Group News Item #2</li>
<li>Group News Item #3</li>
<li>Group News Item #4</li>
<li>Group News Item #5</li>
<li>Group News Item #6</li>
<li>Group News Item #7</li>
<li>Group News Item #8</li>
<li>Group News Item #9</li>
<li>Group News Item #A</li>
<li>Group News Item #B</li>
</ul>
</div>
</div>
<div id="server-area">
<div class="box server">
All Maps<br>
cp_dustbowl ~ 16 / 24
</div>
<div class="box server">
Donate to make a<br>
second server happen!
</div>
</div>
</div>
</div>
</body>
</html>
home.css
#content-area {
display: flex;
margin-top: 2em;
}
#server-area {
display: flex;
margin-top: 2em;
text-align: center;
}
#side-space {
margin: 2em auto;
width: 40em;
}
.content {
margin-left: 2em;
width: 100%;
}
.content:first-child {
margin-left: 0;
}
.server {
margin-left: 2em;
width: 100%;
}
.server:first-child {
margin-left: 0;
}
main.css
body {
background-color: #000;
background-image: url(../images/operation-room.png);
background-position: center top;
background-repeat: no-repeat;
color: #ddd;
font-family: tf2build-webfont;
font-size: 1em;
margin-left: 0;
}
ul {
margin-bottom: 0;
}
ul#menu {
display: flex;
list-style-type: none;
margin-top: 2em;
padding-left: 0;
text-align: center;
}
@font-face {
font-family: tf2build-webfont;
src: url(../fonts/tf2build-webfont.woff);
}
#main {
margin: auto;
width: 36em;
}
#menu li {
line-height: 1em;
margin-left: 1em;
width: 100%;
}
#menu li:first-child {
margin-left: 0;
}
.box {
background-color: rgba(0, 0, 0, 0.9);
border: 1px solid rgba(1, 1, 1, 0.9);
border-radius: 3px;
box-shadow: 0 0 3px 1px #000;
padding: 10px;
}
.header {
background-image: url(../images/header.png);
background-repeat: no-repeat;
background-size: 100%;
height: 5em;
}