Freddi
-
Posts
3 -
Joined
-
Last visited
Freddi's Achievements
Newbie (1/7)
0
Reputation
-
Chrome and Opera highlight the entire line when selecting text
Freddi replied to Freddi's topic in HTML/XHTML
I am not using display: block; anywhere. -
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;}
-
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;}
