Freddi Posted December 18, 2013 Share Posted December 18, 2013 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;} Link to comment Share on other sites More sharing options...
newseed Posted December 18, 2013 Share Posted December 18, 2013 The only thing I can see is set the display:block to be display:inline-block Link to comment Share on other sites More sharing options...
Freddi Posted December 18, 2013 Author Share Posted December 18, 2013 The only thing I can see is set the display:block to be display:inline-blockI am not using display: block; anywhere. Link to comment Share on other sites More sharing options...
davej Posted December 19, 2013 Share Posted December 19, 2013 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes You probably need -webkit-flex also. Link to comment Share on other sites More sharing options...
lovewebdesign Posted December 19, 2013 Share Posted December 19, 2013 In firefox, it's ok.... Link to comment Share on other sites More sharing options...
newseed Posted December 20, 2013 Share Posted December 20, 2013 The display: block is not listed in the css you've provide but it's elsewhere in your css file. However, you have since changed the html from unordered list to using divs. Unnecessary. Also you ought to use unordered list for the top menu as well. Never the less, if you feel comfortable with what you have now and that it now works in Chrome then I'd say keep moving forward. 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