Question about why container div isn't visible?

1

Why isn’t the container div visible as the background?

<head>
  <title>Styling in React</title>
  <script src="https://unpkg.com/[email protected]/dist/react.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
 
  <style>
    #container {
      padding: 40px;
      background-color: #111;
      border: solid blue 3px;
      width: 500px;
      height: 600px;
    }
  </style>
</head>
 
<body>
  <div id="container"></div>
 
<script type="text/babel">
 
  var Letter = React.createClass({
    render: function() {
	var letterStyle = {
        padding: 50,
        margin: 10,
        backgroundColor: this.props.bgcolor,
        color: "#333",
        display: "inline-block",
        fontFamily: "monospace",
        fontSize: "32",
        textAlign: "center"
      };
        return (
          <div style={letterStyle}>
            {this.props.children}
          </div>
        );
      }
  });
 
  var destination = document.querySelector("#container");
 
  ReactDOM.render(
    <div>
      <Letter bgcolor="#58B3FF">A</Letter>
	  <Letter bgcolor="#FF605F">E</Letter>
	  <Letter bgcolor="#FFD52E">I</Letter>
	  <Letter bgcolor="#49DD8E">O</Letter>
	  <Letter bgcolor="#AE99FF">U</Letter>
    </div>,
    destination
  );
   
</script>
</body>
 
</html>
3

The container div appears when I try out your code. It shows up with the #111 background and a blue border. Are you seeing something different?

:smile:

4

Wow, this is weird. No, but what I do see varies significantly by browser: (btw, my env is MS Surface Book with Win10), and in no case do I see the background div. I’m just opening directly from a file on my hard drive. Ideas? Thanks!

Chrome:

Looks like I’ll have to upload Firefox and Edge separately.

5

Firefox:

6

Edge:

7

That is really strange! Below is what I see when I preview in Chrome on Windows 10.

Here is a zip of the HTML file. Does this look like what you have?

test.zip (20.6 KB)

8

Actually please re-zip… the only thing in the zip is the image file. Thanks.

9

works for me, mac ff/chrome/safari

https://jsfiddle.net/9q6oc68j/

10

OK - dohhh… what happened was I copy/pasted from your lecture… and hidden gibberish characters got inserted during that process… ouch… learned that the hard way…
anyway… i deleted the css, and manually retyped it… all is well… thanks.

2 Likes