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>

Is your css and html really mixed together like that in one file? Because that won't work like that. — dmikester1, Aug 30 '18 at 14:11
No my css is external, i'll edit my question and add more html — , Aug 30 '18 at 14:12
clearLogo and clearlogo aren’t the same class. See https://stackoverflow.com/questions/12533926/are-class-names-in-css-selectors-case-sensitive — Daniel Beck, Aug 30 '18 at 14:13
@RhysEdwards — It's intentional that you have class names which are different only in the letter case of some of their characters? That's … an odd design choice. — Quentin, Aug 30 '18 at 14:19
your `clearLogo` class names look more suited to be ID names ... — treyBake, Aug 30 '18 at 14:20
@RhysEdwards - do you ever intend to use the clearLogo/clearLogo1 class name anywhere else? I'm only seeing one instance of these class names being used, thus, it's more suited to be an ID — treyBake, Aug 30 '18 at 14:25
@RhysEdwards your codepen shows that ID's can be used on different elements - but it's extremely bad practice (not to mention it won't work in JS/jQuery). ID = Identifier, how can a Identifier be used to identify when returns a collection? — treyBake, Aug 31 '18 at 11:53

score 0 · Accepted Answer · answered Aug 30 '18 at 14:21

0

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.

answered Aug 30 '18 at 14:21

Quentin

914,110
126
1,211
1,335

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

1 Answers1