Jump to content
Freddi

Content aligns out of place when zooming

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

Share this post


Link to post
Share on other sites

It looks fine to me?

What do you mean It's not aligned properly? I can't see a difference except from the size.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...