CSS working in codePen but not in actual browser?

Question

I got a working solution here which is in Codepen.
Here it is: http://codepen.io/anon/pen/NPgege

but when I created a HTML file as follow:

<html>
<head>
<style>
.container {
    height: 100px;
    width: 100px;

  line-height: 100px;
  text-align: center;
   background-color: #ccc;
   margin: 20px;
}

 .container img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}
</style>

</head>


<body>

<div class="container">
<img src="http://dummyimage.com/100x150/000/fff" />
</div>

<div class="container">
<img src="http://dummyimage.com/400x100/000/fff" />
</div>

<div class="container">
<img src="http://dummyimage.com/100x50/000/fff" />
</div>

</body>
</html>

although having same code, its not giving the same output Help.

@j08691 or copy the tiny amount of code into your own html file and see for yourself? — Mr Pablo, Jan 26 '15 at 17:47
Pages without the doctype are sometimes rendered differently (in quirks mode) — , Jan 26 '15 at 17:52

score 3 · Answer 1 · answered Apr 27 '15 at 11:42

I had a similar issue: as @user3790069 mentioned, browsers use different CSS by default depending on whether a doctype is declared.

Code on Codepen automatically uses an HTML 5 doctype, unless your document starts with <!DOCTYPE html> you will be missing some of the styles you can see on codepen.

CSS working in codePen but not in actual browser?

1 Answers1