Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript AJAX Basics (retiring) Programming AJAX Processing JSON Data

Posted by Cody Fisher
Cody Fisher
12,309 Points

CSS is not displaying

Hi all,

I have the below code for my widget.js file and it seems to be displaying the data, but I do not see it formatted the same as in Dave's video. I do not see the inoffice status and my list is at the bottom of the webpage in small print. To me it seems like it's landing in the footer somehow or the .bulleted .in class is not getting its css applied.

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4) {
        const employees = JSON.parse(xhr.responseText);
        let statusHTML = '<ul class="bulleted">';
        for (let i = 0; i < employees.length; i++) {
            if (employees[i].inoffice === true) {
                statusHTML += '<li class="in">';
            } else {
                statusHTML += '<li class="out">';
            }
            statusHTML += employees[i].name;
            statusHTML += '</li>';
        }
        statusHTML += '</ul>';
        document.getElementById('employeeList').innerHTML = statusHTML;
  }
};
xhr.open('GET', 'data/employees.json');
xhr.send();
Cheo R
Cheo R
37,150 Points
Cheo R
Cheo R
37,150 Points

Can you post your css?

Cody Fisher
Cody Fisher
12,309 Points 
@charset "UTF-8";

.grid-container:before,
.grid-container:after {
  content: ".";
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.grid-container:after {
  clear: both;
}

.grid-container {
  max-width: 1080px;
  position: relative;
}

.grid-30,
.grid-70,
.grid-100 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
}

body {
  min-width: 320px;
}

@media screen {
  .grid-container:before,
  .grid-container:after {
    content: ".";
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
  }

  .grid-container:after {
    clear: both;
  }

  .grid-container {
    max-width: 1080px;
    position: relative;
  }

  .grid-30,
  .grid-70,
  .grid-100 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
  }

  body {
    min-width: 320px;
  }
}

@media screen and (min-width: 1080px) {
  .grid-container:before,
  .grid-100:before,
  .grid-container:after,
  .grid-100:after {
    content: ".";
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
  }

  .grid-container:after,
  .grid-100:after {
    clear: both;
  }

  .grid-container {
    max-width: 1080px;
    position: relative;
  }

  .grid-30,
  .grid-70,
  .grid-100 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
  }

  .grid-30 {
    float: left;
    width: 30%;
  }

  .grid-70 {
    float: left;
    width: 70%;
  }

  .grid-100 {
    clear: both;
    width: 100%;
  }
}

@media screen and (max-width: 400px) {
  @-ms-viewport {
    width: 320px;
  }
}

@media screen and (max-width: 680px) {
  .grid-container:before,
  .grid-container:after {
    content: ".";
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
  }

  .grid-container:after {
    clear: both;
  }

  .grid-container {
    max-width: 1080px;
    position: relative;
  }

  .grid-30,
  .grid-70,
  .grid-100 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media screen and (min-width: 680px) and (max-width: 1080px) {
  .grid-container:before,
  .grid-container:after {
    content: ".";
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
  }

  .grid-container:after {
    clear: both;
  }

  .grid-container {
    max-width: 1080px;
    position: relative;
  }

  .grid-30,
  .grid-70,
  .grid-100 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
  }
}

.grid-container:before,
.grid-container:after {
  content: ".";
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.grid-container:after {
  clear: both;
}

.grid-container {
  max-width: 1080px;
  position: relative;
}

.grid-30,
.grid-70,
.grid-100 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
}

html,
body,
div,
h1,
h2,
p,
ul,
li,
aside,
footer,
section {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ul {
  list-style: none;
}

aside,
footer,
section {
  display: block;
}

body {
  background: #edeff0;
  padding: 50px 0 0;
  font-family: "Varela Round", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 62.5%;
}

.centered {
  margin: 0 auto;
}

.contained {
  background: white;
  padding: 30px 15px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
}

.heading {
  margin-bottom: 20px;
}

h1,
h2 {
  font-size: 2.4em;
  font-weight: 500;
  margin-bottom: 8px;
  color: #384047;
  line-height: 1.2;
}

h2 {
  font-size: 1.8em;
}

aside h2 {
  margin-bottom: 15px;
}

p {
  color: #8d9aa5;
  font-size: 1.4em;
  margin-bottom: 15px;
  line-height: 1.4;
}

ul li {
  margin: 15px 0 0;
  font-size: 1.6em;
  color: #8d9aa5;
  position: relative;
}

ul.rooms {
  margin-bottom: 30px;
}

ul.rooms li {
  font-size: 1em;
  display: inline-block;
  width: 10%;
  padding: 3px 2px 2px;
  border-radius: 2px;
  margin: 0 3px 3px 3px;
  color: white;
    text-align: center;
}

ul.rooms li.empty {
  background-color: #5fcf80;
}
ul.rooms li.full {
  background-color: #ed5a5a;
}

ul.bulleted {
  margin-bottom: 20px;
}

ul.bulleted li {
  padding-left: 40px;
}
ul.bulleted li:before {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  font-size: .5em;
  padding: 3px 2px 2px;
  border-radius: 2px;
  text-align:center;
  width: 25px;
}

ul.bulleted .in {
  color: #5A6772;
}
ul.bulleted .in:before {
  content: "IN";
  background-color: #5fcf80;
}
ul.bulleted .out {
  color: #A7B4BF;
}
ul.bulleted .out:before {
  content: "OUT";
  background-color: #ed5a5a;
}

footer p {
  color: #b2bac2;
  font-size: 1.15em;
  margin: 0;
}

1 Answer

Cody Fisher
Cody Fisher
12,309 Points
Cody Fisher
Cody Fisher
12,309 Points

Looks like it is browser specific. Chrome does not display the styling for .bulleted .in or .bulleted .out li tags. Not sure why, but it displays properly in Edge and IE.

Anastasios Poursaitedes
Anastasios Poursaitedes
10,491 Points

Hey Cody, the list goes to the bottom or the footer because the site is responsive, so when you make the browser window smaller the list goes below the text. As for the css I'm not sure. I would try to replace the :before and :after with ::before and ::after (double colons). As it seems it's browser specific.