Search code examples
htmlcssdoctypequirks-mode

Article container expands to show all content in standard mode, works fine in quirks mode. Only part wrong

EDIT: Ran HTML through validator, just placed error and warning free HTML code.

ANOTHER EDIT: Okay, I think we're getting somewhere. Thank you everybody for pointing everything out. Seems I can get the page to work now with the validated version, got a bit of messing with the CSS to do, but it is going much smoother now.

Here is a sample page from the website, I tried picking the smallest one. When there is no DOCTYPE specified, the page runs correctly; once I add a doctype, it breaks the page.

The article section is expanding to fit all the contents, not hiding content and scrolling. The easiest way I know to show the problem is to provide the complete CSS and HTML for you guys to view. Add '!DOCTYPE html' to the top and see the difference with how it reads the article section. Everything else is fine! It's expanding to include all the content instead of hiding it and allowing users to use the scrollbar on the side of the article container. I'm frustrated because I must fix this before changing the variables for the mobile version.

How can I fix this to display correctly in standard mode because I've heard running in quirks mode is bad. I'm sorry to post the whole CSS code and HTML code, but it's the only way I knew how to illustrate the problem, I'm not very good at this.

HTML in quirks mode, add doctype to see the incorrect display.

<html lang="en">
<head>
<title>
CDD Research
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" href="style.css" rel="stylesheet">
</head>
<body>
<header>
<img class="mobile" alt="mobile logo" src="img/bestlogo.png" width="212" height="84">
<nav class="desktop">
<img alt="cdd research" src="img/bestlogo.png" width="283" height="112"><a href="index.html">Home</a> | <a href="cdd.html">CDD</a> | <a href="founder.html">Founder</a> | <a href="charityauction.html">Art for Charity</a> | <a href="donate.html">Donate</a> | <a href="resources.html">Resources</a> | <a href="http://gaanjo.com/">Gaanj&#x014D;!</a> 
</nav>
<nav class="mobile">
<div class="dropdown">
<button class="dropbtn">Navigation</button>
<div class="dropdown-content">
<a href="index.html">Home</a>
<a href="cdd.html">CDD</a>
<a href="founder.html">Founder</a>
<a href="charityauction.html">Art for Charity</a>
<a href="donate.html">Donate</a>
<a href="resources.html">Resources</a>
<a href="www.gaanjo!.com">Gaanj&#x014D;!</a>
</div>
</div>
</nav>
</header>
<article>
<h1>Childhood Disintegrative Disorder Research is a 501(c)(3)nonprofit
</h1>
<img class="mobile" alt="snow child" src="img/snowchild.png" width="250" height="250">
<div class="cddleft">
<h3>
What is CDD?
</h3>
<p>
Childhood disintegration disorder robs children of their ability to interact with others in a most horrible way. Children with CDD begin life as any other child would, rapidly acquiring skills and exhibiting all the usual behaviors. Then without warning and for currently unknown reasons, the child regresses and loses critical acquired skills such as toilet training and the ability to speak coherently. Even with rapid onset, the child may tearfully beg caregivers for an explanation before losing the ability to speak. 
</p>
<br>
<h3>How can you help?
</h3>
<p>
Through donations, charity auctions, sales, and promotional material, CDD Research puts the power in your hands to make the world a better place for children affected by this harrowing disease. Please take some time to browse CDD Research for resources and options to contribute to our cause.
</p>
<br>
<h3>How can we help?
</h3>
<p>
Our mission at CDD Research is to facilitate a complete understanding of childhood disintegration disorder by aiding researchers currently studying CDD as well as initiating new research projects. CDD Research endeavors to 
facilitate the rapid development of promising new therapies and treatments for those affected by childhood disintegration disorder. CDD Research seeks sufficient understanding of childhood disintegration disorder through active recruitment of new participants for research programs, assistance with funding of full genomic sequencing for CDD-affected families, support of the MSSNG database, and the creation of innovative ways to compile new data.
</p>
</div>
<div class="cddright">
<img class="large" alt="snow child" src="img/snowchild.png" width="500" height="500">
<br>
<table class="social">
<tr>
<td>
<a href="http://www.facebook.com"><img class="social" alt="fb" src="img/fb.png" width="100" height="100"></a>
</td>
<td>
<a href="http://www.medium.com"><img class="social" alt="medium" src="img/mds.png" width="100" height="100"></a>
</td>
<td>
<a href="http://www.twitter.com"><img class="social" alt="medium" src="img/tw.png" width="100" height="100"></a>
</td>
</tr>
</table>
</div>
</article>
<footer>
<p>Copyright information <a href="mailto:fakeaddress@fake.com">fakeaddress@fake.com</a>
</p>
</footer>
</body>
</html>

And the CSS code.

html {
  background-color: #000000;
  font-family: helvetica, verdana, arial;
  text-align: left;
  font-size: 1em;
  width: 100%;
  height: 100%;
  min-width: 995px;
  margin: 0px;
  padding: 0px;
}

header {
  color: #FCD5EE;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  width: 100%;
  height: 20%;
}

nav.desktop {
  display: block;
}

nav.mobile {
  display: none;
}

article {
  background-color: #FFFFFF;
  width: 95%;
  height: 70%;
  border: .5em solid #9AF4FB;
  border-radius: 1.125em;
  overflow-x: hidden;
  overflow-y: scroll;
  margin-left: auto;
  margin-right: auto;
  clear: auto;
}

footer {
  color: #FCD5EE;
  text-align: center;
  font-weight: bold;
  width: 100%;
  height: 5%;
}

a {
  color: #FCD5EE;
  text-decoration: none;
}

a:hover {
  color: #9AF4FB;
}

a.plain {
  color: #000000;
  font-weight: bold;
}

a.resource {
  color: #000000;
  font-size: 1.125em
}

a.resource:hover {
  color: #000000;
}

a.item {
  color: #000000;
}

p {
  margin: 0px;
}

p.item {
  font-weight: bold;
}

p.center {
  text-align: center;
}

p.store {
  font-size: 1.125em;
  text-align: center;
}

h1 {
  background-color: #FCD5EE;
  font-size: 2em;
  text-align: center;
  font-weight: normal;
  border: .25em solid #FCD5EE;
  border-radius: 2em;
  margin-top: 25px;
}

h2 {
  font-size: 1.125em;
  text-align: center;
  font-weight: normal;
}

h3 {
  background-color: #9AF4FB;
  font-size: 1.5em;
  text-align: center;
  font-weight: normal;
  border: .25em solid #9AF4FB;
  border-radius: 1.5em;
  margin-top: 0px;
}

h4 {
  background-color: #FCD5EE;
  font-size: 1.125em;
  text-align: center;
  font-style: italic;
  width: 430px;
  border: .25em solid #FCD5EE;
  border-radius: 1.125em;
  font-weight: normal;
  margin-left: auto;
  margin-right: auto;
}

ol {
  background-color: #FCD5EE;
  list-style-type: none;
  border: .25em solid #FCD5EE;
  border-radius: 1.5em;
  padding: 0px;
}

ol.cdd {
  font-size: 1.125em;
  text-align: center;
  font-weight: bold;
}

ol.address {
  max-width: 350px;
  font-size: 1.125em;
  text-align: center;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto;
}

img.mobile {
  display: none;
  margin-left: auto;
  margin-right: auto;
}

img.item {
  display: inline-block;
}

img.resource {
  display: block;
  position: absolute;
  margin-top: 25px;
}

img.large {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

div.left3 {
  width: 50%;
  float: left;
}

div.right3 {
  width: 48%;
  float: right;
}

div.left2 {
  width: 45%;
  float: left;
}

div.right2 {
  width: 55%;
  float: right;
}

div.cddright {
  width: 55%;
  float: right;
}

div.cddleft {
  width: 45%;
  float: left;
}

div.dropdown {
  position: relative;
  display: inline-block;
}

div.dropdown-content {
  display: none;
  position: absolute;
  background-color: #000000;
  text-align: center;
  width: 300px;
}

div.dropdown-content a {
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
}

div.dropdown:hover div.dropdown-content {
  display: block;
}

div.mobile {
  display: none;
  margin-left: auto;
  margin-right: auto;
}

button.dropbtn {
  background-color: #000000;
  color: #FCD5EE;
  font-size: 1em;
  font-family: helvetica, verdana, arial;
  text-transform: uppercase;
  font-weight: bold;
  width: 300px;
  border: none;
}

table {
  background-color: #9af4fb;
  border: .25em solid #9af4fb;
  border-radius: 1.125em;
  margin-left: auto;
  margin-right: auto;
}

table.desktop {
  display: block;
  background-color: #FFFFFF;
  border: none;
  margin-left: auto;
  margin-right: auto;
}

table.social {
  background-color: #FFFFFF;
  border: none;
  width: 75%;
  text-align: center;
}
Solution

  • all your page's content should go inside the <body>. your <header> and <footer> are both outside the <body>.

    <!DOCTYPE html>
<html>
<head>
<title>
CDD Research: Donate Now
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" href="style.css" rel="stylesheet">
</head>

<body>
<header>
<img class="mobile" alt="mobile logo" src="img/bestlogo.png" width="212.25px" height="84px">
<nav class="desktop">
<img alt="cdd research" src="img/bestlogo.png" width="283px" height="112px"><a href="index.html">Home</a> | <a href="cdd.html">CDD</a> | <a href="founder.html">Founder</a> | <a href="charityauction.html">Art for Charity</a> | <a href="donate.html">Donate</a> | <a href="resources.html">Resources</a> | <a href="http://gaanjo.com/">Gaanj&#x014D!</a> 
</nav>
<nav class="mobile">
<div class="dropdown">
<button class="dropbtn">Navigation</button>
<div class="dropdown-content">
<a href="index.html">Home</a>
<a href="cdd.html">CDD</a>
<a href="founder.html">Founder</a>
<a href="charityauction.html">Art for Charity</a>
<a href="donate.html">Donate</a>
<a href="resources.html">Resources</a>
<a href="www.gaanjo!.com">Gaanj&#x014D!</a>
</div>
</div>
</nav>
</header>
<article>
<h1>Item Name</h1>
<table class="desktop">
<tr>
<td>
<img alt="item image" width="300px" height="300px">
</td>
<td>
<p>Detailed description of item goes here. Clicking the 'donate' link below will redirect you to Paypal's secure server.
<br>
<br>
Shipping and handling included with mandatory donation amount, delivery will take an estimated 2-3 weeks. 100% of profits from all items bought in CDD Research's store go to charity. For customers living outside the contiguoius 48 United States and international customers, please send an email via <a class="plain" href="mailto:fakeaddress@fake.com">fakeemail@fake.com</a> to recieve pricing for your location.
</p>
<h2>Price - $#.##</h2>
<img class="center" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif">
</td>
</tr>
</table>
<div class="mobile">
<img alt="item image" width="300px" height="300px">
<br>
<p>
Detailed description of item goes here. Clicking the 'donate' link below will redirect you to Paypal's secure server.
<br>
<br>
Shipping and handling included with mandatory donation amount, delivery will take an estimated 2-3 weeks. 100% of profits from all items bought in CDD Research's store go to charity. For customers living outside the contiguoius 48 United States and international customers, please send an email via <a class="plain" href="mailto:fakeaddress@fake.com">fakeemail@fake.com</a> to recieve pricing for your location.
</p>
<h2>Price - $#.##</h2>
<img class="center" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif">
</div>
<a class="item" href="donate.html">
<br>
<h3><a class="item" href="donate.html">Go Back</a></h3>
</article>
<footer>
<p>Copyright information <a href="mailto:fakeaddress@fake.com">fakeaddress@fake.com</a>
</p>
</footer>
</body>
</html>