Playground view vs. Browser View

Hello, does anyone know why the code run in the playground section being directed there from "Try it myself" looks as a page differently in playground than in a regular browser? E.g., there are turquise lines around "My blog" in the Playground view but not when viewed in Safari. Thanks a lot for an answer Leonardo

html

18th May 2019, 6:09 PM

Leonardo

4 ответов

+ 2

Without looking at the code, the only explanation that I can give you is that the turquoise lines are not compatible with Safari. I would not be able to give any answer but browser compatibility issue

19th May 2019, 2:45 AM

PacoB

Same goes for Firefox and Chrome. The Code is the Code from "HTML Fundamentals" <!DOCTYPE html> <html> <head> <title>My Blog</title> <link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet"> </head> <body>  <div class="section"> <h1><span>About Me</span></h1> <p> Hey! I'm <strong>Alex</strong>. Coding has changed my world. It's not just about apps. Learning to code gave me <i>problem-solving skills</i> and a way to communicate with others on a technical level. I can also develop websites and use my coding skills to get a better job. And I learned it all at <strong>SoloLearn</strong> where they build your self-esteem and keep you motivated. Join me in this rewarding journey. You'll have fun, get help, and learn along the way! </p> <p class="quote">"Declare variables, not war"</p> </div>  </body> </html> This looks tortally different in the Sololearn Playground then in any other mentioned Browser.

19th May 2019, 2:56 AM

Leonardo

I think it has to do with the "CSS". <head> <title>My Blog</title> <link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet"> </head> For some reasons it works in the "Playground" but not when displayed in a browser. In the Playground is a CSS tab. I copied that code to create a styles.css in my home directory where the index.html is as well. Still not working i changed the link in the head to: <head> <title>My first Project</title> <link href="styles.css" rel="stylesheet"> </head> works. Then i put a Style section in the header with the css code from the playground tab. works as well. So am just wondering why the this <link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet"> doesn´t work. Any idea? .

19th May 2019, 4:27 PM

Leonardo

I figured out the end of a div-tag was missing. Now it works.

19th May 2019, 4:41 PM

Leonardo