CODEWITHSUNDEEP
htmlcss
MortenMoulder
MortenMoulder

Reputation: 6648

Experiencing different CSS results on different sites?

I am trying to vertically align a span-tag inside a DIV. I have a working example on JSFiddle but the EXACT same CSS and HTML will not work on my own site.

#drop_zone {
    width: 500px;
    outline: 1px solid #E1E1E1;
    margin: 0 auto;
    height: 200px;
    line-height: 200px;
}

#drop_zone span {
    display: inline-block;
    line-height: 19px;
    vertical-align: middle;
}
<div id="drop_zone"><span>Drag file here.<br />Your file will <strong>not</strong> be uploaded!</span></div>

Now, it works on JSFiddle and on Stackoverflow, but why does it not work on my own site? You can check out the results here: http://snorlax.org/stackoverflow.html

If you check the source code, you can see it's the exact same code. What on earh is going on?

Upvotes: 0

Views: 31

Answers (1)

Quentin
Quentin

Reputation: 943527

Your document is missing the Doctype, so you are triggering Quirks mode. The feature you are trying to use only works correctly in Standards mode. Add a Doctype. Use a validator.

Upvotes: 3

Related Questions