Jump to content

Content aligns out of place when zooming


Freddi
 Share

Recommended Posts

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:Internet Explorer NormalInternet Explorer ZoomBut when doing this with any other browser, the content aligns out of original position, demonstrated with Firefox 26:Firefox NormalFirefox ZoomThis 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;}
Edited by Freddi
Link to comment
Share on other sites

It may just be the way the browser renders text. Some browser render text bigger/heavier than others and handle scaling of text slightly differently. Set specific px heights on the containers and try zooming again. If it fixes the alignment than it should tell you that it is most likely just the different text rendering.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...