Jump to content

Freddi

Members
  • Content Count

    3
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Freddi

  • Rank
    Newbie

Profile Information

  • Gender
    Female
  1. 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;}
  2. A temporary development location of the website can be found here:Just CatsFirefox 26 and Internet Explorer 11 highlight the text as expected:But Chrome 31 and Opera 18 select the entire line of the page:Did I do something wrong in the code? Or is this an issue with the browser? 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">Donate</li><li class="box">Group</li></ul><div id="content-area"><div class="box content">Server Features:<ul><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>Next Level</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: 37em;}.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: 0;padding: 0;white-space: nowrap;}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: 33em;}#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;}
×
×
  • Create New...