Freddi Posted December 18, 2013 Share Posted December 18, 2013 (edited) 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 December 18, 2013 by Freddi Link to comment Share on other sites More sharing options...
MarkT Posted December 20, 2013 Share Posted December 20, 2013 It looks fine to me? What do you mean It's not aligned properly? I can't see a difference except from the size. Link to comment Share on other sites More sharing options...
Day Posted December 21, 2013 Share Posted December 21, 2013 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now