How can I amend my code to be compatible with !doctype html

Question

I created a website that worked fine, I then added doctype HTML which has seemingly revealed some errors in my CSS.

Since adding doctype the styles for two elements have disappeared. I can find the elements using the chrome developer tool, but they have no styling. As soon as I take the Doctype off they work fine.

 .clearlogo { z-index: 1; position: absolute; opacity: 0.1; height: 800px; left: -450px; top: -40px; } .clearlogo1 { z-index: 1; position: absolute; opacity: 0.1; height: 800px; right: -450px; top: -40px; } 

 <div class="blueDiv"> <img class="clearLogo" src="images/clearlogo.png"> <img class="clearLogo1" src="images/clearlogo.png"> <div class="wrapperSmall"> <div class="centeredText white"> <h2>WHY WE ARE UNIQUE</h2> <hr> </div> <div class="container"> <div class="col"> <i class="fas fa-tv"></i> <div class="info"> <h2>Facilites</h2> <hr class="hrLong"> <p>Etiam quis elementum sem, id lacinia arcu. In eros enim, malesuada non dictum sed, aliquet sed justo.</p> </div> </div> <div class="col"> <i class="fas fa-thumbs-up"></i> <div class="info"> <h2>Range of Sectors</h2> <hr class="hrLong"> <p>Etiam quis elementum sem, id lacinia arcu. In eros enim, malesuada non dictum sed, aliquet sed justo.</p> </div> </div> </div> </div> </div> 

Answer 1

In standards mode, class names are treated as being case-sensitive. In quirks mode, they are not.

.clearlogo stops matching class="clearLogo" when you trigger standards mode.