DOCTYPE breaks nth-child background colors
Question
My CSS is validated, but still breaks when adding <!DOCTYPE html> . What am I doing wrong? I have search the forums and the common response seems to be [add height: 100% to the body, html tags. Did that, but no luck.
Without DOCTYPE: http://www.babeweiser.com/rockhistory/ With DOCTYPE: http://www.babeweiser.com/rockhistory/test.php
CSS
html, body
{
height: 100%;
width: 100%;
background: #333333;
}
div.Container
{
margin: auto;
width: 90%;
background: #5e6d3d;
padding: 10px;
}
p
{
font-family: sans-serif;
}
.Table
{
display: Table;
}
.Title
{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
background: #c6d4a8;
}
.Heading
{
display: table-row;
font-weight: bold;
text-align: center;
}
.Row
{
display: table-row;
height: 100%; width: 100%;
}
div.row:nth-child(odd)
{
background: #daedb2;
}
div.row:nth-child(even)
{
background: #c6d4a8;
}
.Cell
{
display: table-cell;
padding: 15px;
}
select:required:invalid
{
color: #999;
}
option {
color: #000;
}
test.php:
<!DOCTYPE html>
<html>
<head>
<title>Today in Rock History</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<link rel="stylesheet" type="text/css" href="rockhistory2.css">
<script>
$(function() {
$.ajax({
type: "POST",
url: "pull_history2.php",
data: "" + status,
success: function(data){
document.getElementById("demo").innerHTML = data;
}
});
});
</script>
<script>
$(document).ready(function()
{
$(document).on('submit', '#reg-form', function()
{
var data = $(this).serialize();
$.ajax({
type : 'POST',
url : 'pull_history2.php',
data : data,
success : function(data)
{
document.getElementById("demo").innerHTML = data;
}
});
return false;
});
});
</script>
</head>
<body>
<div class="Container">
<form id="reg-form" name="reg-form" method="post">
<select name="month" required id="month" size="1">
<option value="" disabled selected>Month</option>
<?php
$mo = 1;
while($mo <= 12) {
echo '<option value= "' . $mo . '">' . date("F", mktime(0, 0, 0, $mo+1, 0, 0)) . '</option>';
echo "\n";
$mo++;
}
?>
</select>
<select name="day" required id="day" size="1">
<option value="" disabled selected>Day</option>
<?php
$da = 1;
while($da <= 31) {
echo '<option value= "' . $da . '">' . date("j", mktime(0, 0, 0, 0, $da, 0)) . '</option>';
echo "\n";
$da++;
}
?>
</select>
<button type="submit" >Go</button>
</form>
<p id="demo"></p>
</div>
</body>
</html>
pull_history2.php:
<?php
if($_POST) {
$month= $_POST['month'];
$day= $_POST['day'];
} else {
$month = date('n');
$day = date('j');
}
$tdate=date("F j", mktime(0, 0, 0, $month, $day, 0));
?>
<div class="Table">
<div class="Title">
<p><? echo "This Day in Rock History for $tdate" ?></p>
</div>
<div class-"heading">
</div>
<?php
$db = mysql_connect("localhost","xxx", "xxx");
mysql_select_db("babewe5_wlup",$db);
$result = mysql_query("SELECT * FROM RockHistory081512 WHERE month=$month AND day=$day ORDER BY year",$db);
if (!$result) { echo("ERROR: " . mysql_error() . "\n$SQL\n"); }
while ($row = mysql_fetch_array ($result)) {
?>
<div class="Row">
<div class="Cell">
<p><? echo $row["year"] ?></p>
</div>
<div class="Cell">
<p><? echo $row["history"] ?></p>
</div>
</div>
<?
}
mysql_free_result ($result);
?>
<div class="Row">
<div class="Cell">
</div>
<div class="Cell">
<p><small>Copyright © <? echo date("Y"); ?> Tim Spencer</p>
</div>
</div>
2 answers
solution1
2 ACCPTED 2015-10-28 17:31:44
You are using .Row and .row in your CSS. One is initial caps and the other is not. Change div.row:nth-child to div.Row:nth-child .
Applying the doctype enforces a set of rules on your document. Without the doctype the two are treated the same.
solution2
0 2015-10-28 17:36:24
It is the case sensitivity. either modify classname to "row" (lowercase letters). or change the relevant styles in stylesheet.
div.Row:nth-child(even) -> (R as uppercase).. div.Row:nth-child(odd)
You better check the browser compatibilities of n-th selectors.. It is supported in IE 9 and higher versions.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.