I'm working on a tee-sheet display for a golf club. While the code originates in PHP with some logic to control the display, I am having a problem that seems to originate in the CSS.
I've run it through the W3C Validator, and it doesn't identify the problem.
In the PHP code, I split the list of tee times into two tables. I expected them to be independent in their own div elements.
The code is posted below.
Viewed in Firefox everything seems normal. But in Edge or Chrome, the bottom edge and box-shadow effect of the left hand table wraps to the top of the right hand table.
I can't figure this out. Can anyone point me in the direction of what's causing this?
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEE SHEET TEST</title>
<meta charset="utf-8">
<meta http-equiv="refresh" content="60">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
:root {
--th-bg-color: #CAE1FF; /* f7f9fb #B0C4DE #5085a5 528B8B 7AC5CD CAE1FF */
}
/* ---------------------------------------------------------------------------------------------------- import fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;600;700&family=Lato&family=Roboto+Mono&family=Ubuntu:wght@300;400&display=swap');
/* ----------------------------------------------------------------------------------------- base element formatting ---------- */
div {border:0px dashed red;}
body {
margin: 0;
font-family:tahoma;
font-size: 13px;
padding:1em 3em;
background-color: #4F7942; // fern green
background-color: #018749;
background-color: #DAF7A6;
background-color: #FFFFFF;
background-color: #A9BA9D; //
}
/* ----------------------------------------------------------------------------------------------------- page layout ---------- */
#TeeSheetContainer {
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
}
.column {
border:0px dashed green;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.left-col {
margin-right:.5em;
}
.right-col {
margin-left:.5em;
}
.headerbox {
border:0px dashed blue;padding:0em;
margin-top:.5em;
margin-bottom:1em;
display: inline-block;
width:100%;
height:125px;
}
#outer-div {
width: 100%;
text-align: center;
/* background-color: #0666a3; */
}
.inner-div {
border:0px dashed teal;
display: inline-block;
margin: 0 auto;
height:100%;
/* background-color: #8ebf42; */
}
/* ------------------------------------------------------------------------------------------ table formatting ---------- */
.listtable {
border-collapse: collapse;
width:100%;
margin-top:1em;
margin:auto;
background-color: #F8F8FF;
}
.listtable th {
font-weight: bolder;
padding-top:.5em;
display:normal;
}
.listtable tr {border-left:1px solid silver;border-right:1px solid silver;}
.listtable td, th {padding:.175em .5em;border:1px solid silver;font-size:90%;text-align:left;vertical-align: middle;}
.listtable th {background-color:#CAE1FF;}
.listtable th {background-color:#8F9779;color: #F0F0F0}
.listtable th:nth-child(1) {text-align:right;padding-right:1.5em;}
.listtable td:nth-child(1) {text-align:right;}
.listtable th:nth-child(2) {text-align:center;}
.listtable td:nth-child(2) {text-align:center;}
.listtable td:nth-child(3) {width:21%;}
.listtable td:nth-child(4) {width:21%;}
.listtable td:nth-child(5) {width:21%;}
.listtable td:nth-child(6) {width:21%;}
.listtable tr:nth-child(even) {background: #F0F0F0;}
.listtable tr:nth-child(odd) {background: #E0E0E0;}
/* ------------------------------------------------------------------------------------------------------ misc ---------- */
.pagetitle {
border:0px dashed red;
padding-top:.5em;
font-weight:800;
font-family:Calibri;
font-size:500%;
font-size:500%;
color:#104E8B;
text-shadow: 2px 2px 2px #aaa;
text-shadow: 1px 1px 0px rgba(160,172,206,0.3);
}
.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.TeeTimePast {color:grey;}
.TeeTimeFuture {color:black;}
.TeeTimeNext {color:red;font-weight:700;}
/* TEST - See if CSS can be injected into the Env Canada weather widget */
#wxlink {
color:red !important;
}
</style>
<script>
setTimeout('ReloadPage()', 10000);
function ReloadPage() {
$("#TeeSheetContainer").load(location.href + " #TeeSheetContainer > *");
}
</script>
</head>
<body onload="startTime()">
<div style="">
<div id='outer-div' class='headerbox' style=''>
<img src='https://example.com/logo.png' style='height:125px;float:left;' class='inner-div' alt='Logo'>
<div class='pagetitle inner-div' style='float:right;padding-right:1rem;'>
<div id="txt"></div>
<script>
function startTime() {
// -------------------- date/time display for top of page --------------------
const today = new Date();
let y=today.getYear()
if (y < 1000)
y+=1900
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
let month=today.getMonth()
let daym=today.getDay()
let ordinal = dateOrdinal(today.getDate());
let h = today.getHours();
let m = today.getMinutes();
let s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
if (h > 12) {h = h - 12}; // Convert hour to 12h clock if necessary
document.getElementById('txt').innerHTML = dayarray[daym] + ", " + montharray[month] + " " + ordinal + " " + h + ":" + m;
setTimeout(startTime, 1000);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
function dateOrdinal(dom) {
// see https://stackoverflow.com/questions/15397372/javascript-new-date-ordinal-st-nd-rd-th
if (dom == 31 || dom == 21 || dom == 1) return dom + "st";
else if (dom == 22 || dom == 2) return dom + "nd";
else if (dom == 23 || dom == 3) return dom + "rd";
else return dom + "th";
};
</script>
</div>
</div>
<div id='TeeSheetContainer' style='column-count:2;-moz-column-count:2;-webkit-column-count:2;border:0px dashed red;'>
<div class='row'>
<div class='column left-col'>
<table class='listtable'>
<thead>
<tr><th>Time</th><th>Tee</th><th>Player 1</th><th>Player 2</th><th>Player 3</th><th>Player 4</th></tr>
</thead>
<tbody>
<tr class='TeeTimePast'><td>7:00 AM</td><td>1</td><td></td><td></td><td></td><td></td></tr>
<tr class='TeeTimePast'><td>7:09 AM</td><td>1</td><td></td><td></td><td></td><td></td></tr>
<tr class='TeeTimePast'><td>7:18 AM</td><td>1</td><td></td><td></td><td></td><td></td></tr>
<tr class='TeeTimePast'><td>7:27 AM</td><td>1</td><td></td><td></td><td></td><td></td></tr>
<tr class='TeeTimePast'><td>7:36 AM</td><td>1</td><td></td><td></td><td></td><td></td></tr>
<tr class='TeeTimePast'><td>7:45 AM</td><td>1</td><td></td><td></td><td></td><td></td></tr>
<tr class='TeeTimePast'><td>7:54 AM</td><td>1</td><td></td><td></td><td></td><td></td></tr>
<tr class='TeeTimePast'><td>8:03 AM</td><td>18-A</td><td>Barnes, Owen</td><td>Kerry, Dixon</td><td>Phil, Quinn</td><td>Rodrigo, Shea</td></tr>
<tr class='TeeTimePast'><td>8:12 AM</td><td>1</td><td>Jaxx, Hebert</td><td>Natan, Blankenship</td><td>Aj, Hall</td><td>Snyder, Elizabeth</td></tr>
<tr class='TeeTimePast'><td>8:21 AM</td><td>1</td><td>Sam, Dotson</td><td>Dolly, Rose</td><td>Andreas, Barker</td><td>Sarah-Jayne, Wilson</td></tr>
<tr class='TeeTimePast'><td>8:30 AM</td><td>1</td><td>Mark, Harvey</td><td>Katharine, Hayes</td><td>Beverly, Cervantes</td><td>Matilda, Greene</td></tr>
<tr class='TeeTimePast'><td>8:39 AM</td><td>1</td><td>Benedict, Munro</td><td>Neil, Farrington</td><td>Keagan, Miranda</td><td>Darlene, Tucker</td></tr>
<tr class='TeeTimePast'><td>8:48 AM</td><td>1</td><td>Lacie, Turner</td><td>Angus, Barlow</td><td>Dante, Wise</td><td>Irfan, Thatcher</td></tr>
<tr class='TeeTimePast'><td>8:57 AM</td><td>1</td><td>Addison, Mcknight</td><td>Flynn, Bryant</td><td></td><td></td></tr>
<tr class='TeeTimePast'><td>9:06 AM</td><td>1</td><td>Rizwan, Whyte</td><td>Mackenzie, Rankin</td><td></td><td>Larimer, Lynne</td></tr>
<tr class='TeeTimePast'><td>9:15 AM</td><td>1</td><td>Ernie, Kim</td><td>Amy-Leigh, Whittle</td><td>Lennie, Chen</td><td></td></tr>
<tr class='TeeTimePast'><td>9:24 AM</td><td>1</td><td>Kristin, Ross</td><td></td><td>Lukasz, Sykes</td><td></td></tr>
<tr class='TeeTimePast'><td>9:33 AM</td><td>1</td><td>Cherry, Nixon</td><td>Victoria, Salt</td><td></td><td></td></tr>
<tr class='TeeTimePast'><td>9:42 AM</td><td>1</td><td>Lennie, Chen</td><td>Izabella, Graves</td><td>Patricia, Goddard</td><td></td></tr>
<tr class='TeeTimePast'><td>9:51 AM</td><td>1</td><td>Lukasz, Sykes</td><td>Kadie, Brett</td><td>Lizzie, Walmsley</td><td>Auger, Paul</td></tr>
<tr class='TeeTimePast'><td>10:00 AM</td><td>1</td><td>Lana, Milne</td><td>Bradley, Donnelly</td><td>Marwan, Kramer</td><td>McCormack, Phil</td></tr>
<tr class='TeeTimePast'><td>10:09 AM</td><td>1</td><td>Eddie, Dean</td><td>Lilith, Daly</td><td>Gladys, Sampson</td><td></td></tr>
<tr class='TeeTimePast'><td>10:18 AM</td><td>1</td><td>Elaine, Parker</td><td>Kiefer, Clifford</td><td>Briony, Walter</td><td>Thrasher, Kerry</td></tr>
<tr class='TeeTimePast'><td>10:27 AM</td><td>1</td><td>Allegra, Mccoy (9)</td><td>Pollyanna, Sweet (9)</td><td>Padraig, Colley (9)</td><td>Shields, Marylyn (9)</td></tr>
<tr class='TeeTimePast'><td>10:36 AM</td><td>1</td><td></td><td>Fynn, Gordon</td><td>Shivani, Cooper</td><td>Derlin, Denise</td></tr>
<tr class='TeeTimePast'><td>10:45 AM</td><td>1</td><td>Manav, Peterson</td><td>Rikki, Gilliam</td><td>Suhail, Quintero</td><td>Cosenzo, Chris</td></tr>
<tr class='TeeTimePast'><td>10:54 AM</td><td>1</td><td>Kira, Zhang</td><td>Darryl, Moody</td><td>Mildred, Schmitt</td><td>Mason, Muriel</td></tr>
<tr class='TeeTimePast'><td>11:03 AM</td><td>1</td><td>Jaeden, Sandoval (9 Holes)</td><td>Maureen, Hulme</td><td></td><td></td></tr>
<tr class='TeeTimePast'><td>11:12 AM</td><td>1</td><td>Ritchie, Williams</td><td>Eileen, Guerrero</td><td>Wright, Mark</td><td></td></tr>
<tr class='TeeTimePast'><td>11:21 AM</td><td>1</td><td>Club EG</td><td>Club EG</td><td>Club EG</td><td></td></tr>
<tr class='TeeTimePast'><td>11:30 AM</td><td>1</td><td>Johanna, Martin</td><td>Kelly, Durham</td><td>Rizwan, Whyte</td><td>Burkitt, Phil</td></tr>
<tr class='TeeTimePast'><td>11:39 AM</td><td>1</td><td>Menachem, Wolfe</td><td>Aniyah, Barrett</td><td>Ernie, Kim</td><td>McKay, Martin</td></tr>
<tr class='TeeTimePast'><td>11:48 AM</td><td>1</td><td>Danyal, Mclaughlin</td><td>Elisabeth, Compton</td><td>Kristin, Ross</td><td></td></tr>
<tr class='TeeTimePast'><td>11:57 AM</td><td>1</td><td>Fred, Fitzgerald</td><td>Milosz, Correa</td><td>Cherry, Nixon</td><td></td></tr>
<tr class='TeeTimePast'><td>12:06 PM</td><td>1</td><td>Umer, Barnett</td><td>Zena, Jacobs</td><td>Lennie, Chen</td><td>Coyle, Gordon</td></tr>
<tr class='TeeTimePast'><td>12:15 PM</td><td>1</td><td>Trystan, Preece</td><td>Manav, Peterson</td><td>Lukasz, Sykes</td><td></td></tr>
<tr class='TeeTimePast'><td>12:24 PM</td><td>1</td><td>Mel, Cunningham</td><td>Kira, Zhang</td><td>Selena, Smyth</td><td></td></tr>
<tr class='TeeTimePast'><td>12:33 PM</td><td>1</td><td>Aysha, Rosas</td><td>Jaeden, Sandoval</td><td>Connor, Walters</td><td>Stone, Eddie</td></tr>
<tr class='TeeTimePast'><td>12:42 PM</td><td>1</td><td>Emily-Jane, Rice</td><td>Ritchie, Williams</td><td>Eileen, Hough</td><td>Barnes, Chris</td></tr>
<tr class='TeeTimePast'><td>12:51 PM</td><td>1</td><td>Logan (OCGS)</td><td>Logan (OCGS)</td><td>Logan (OCGS), Hua Lee</td><td>Logan (OCGS)</td></tr>
<tr class='TeeTimePast'><td>1:00 PM</td><td>1</td><td>Aj, Hall</td><td>Johanna, Martin</td><td>Sam, Dotson</td><td>Adrian, Larsen</td></tr>
<tr class='TeeTimeNext'><td>1:09 PM</td><td>1</td><td>Andreas, Barker</td><td>Menachem, Wolfe</td><td>Mark, Harvey</td><td>Abigail, Farley</td></tr>
</tbody>
</table>
</div>
</div>
<div class='row'>
<div class='column right-col'>
<table class='listtable'>
<thead><tr><th>Time</th><th>Tee</th><th>Player 1</th><th>Player 2</th><th>Player 3</th><th>Player 4</th></tr></thead>
<tbody>
<tr class='TeeTimeFuture'><td>1:18 PM</td><td>1</td><td>Beverly, Cervantes</td><td>Danyal, Mclaughlin</td><td>Benedict, Munro</td><td>Lacey, Rigby</td></tr>
<tr class='TeeTimeFuture'><td>1:27 PM</td><td>1</td><td>Keagan, Miranda</td><td>Fred, Fitzgerald</td><td>Lacie, Turner</td><td>Selena, Smyth</td></tr>
<tr class='TeeTimeFuture'><td>1:36 PM</td><td>1</td><td>Dante, Wise</td><td>Umer, Barnett</td><td>Addison, Mcknight</td><td>Connor, Walters</td></tr>
<tr class='TeeTimeFuture'><td>1:45 PM</td><td>1</td><td>Chanelle, Maguire</td><td>Trystan, Preece</td><td>HoneyPot</td><td></td></tr>
<tr class='TeeTimeFuture'><td>1:54 PM</td><td>1</td><td>Rodrigo, Shea</td><td>Mel, Cunningham</td><td>HoneyPot</td><td></td></tr>
<tr class='TeeTimeFuture'><td>2:03 PM</td><td>1</td><td>Elizabeth, Snyder</td><td>Aysha, Rosas</td><td>Hamilton, Reid</td><td>Casey, Todd</td></tr>
<tr class='TeeTimeFuture'><td>2:12 PM</td><td>1</td><td>Sarah-Jayne, Wilson</td><td>Emily-Jane, Rice</td><td>Valiquette, Marina</td><td>Orleans, Stephen</td></tr>
<tr class='TeeTimeFuture'><td>2:21 PM</td><td>1</td><td>Matilda, Greene</td><td>Phil, Quinn</td><td></td><td></td></tr>
<tr class='TeeTimeFuture'><td>2:30 PM</td><td>1</td><td>Darlene, Tucker</td><td>Abigail, Farley</td><td>HoneyPot</td><td></td></tr>
<tr class='TeeTimeFuture'><td>2:39 PM</td><td>1</td><td></td><td></td><td></td><td></td></tr>
<tr class='TeeTimeFuture'><td>2:48 PM</td><td>1</td><td>Josie, Suarez</td><td>Kira, Zhang</td><td>Elisabeth, Compton</td><td>Chanelle, Maguire</td></tr>
<tr class='TeeTimeFuture'><td>2:57 PM</td><td>1</td><td>Adrian, Larsen</td><td>Jaeden, Sandoval</td><td>Milosz, Correa (9)</td><td>Rodrigo, Shea (9)</td></tr>
<tr class='TeeTimeFuture'><td>3:06 PM</td><td>1</td><td>Abigail, Farley</td><td>Ritchie, Williams</td><td>Zena, Jacobs</td><td>Snyder, Elizabeth</td></tr>
<tr class='TeeTimeFuture'><td>3:15 PM</td><td>1</td><td>Lacey, Rigby (9)</td><td>Mahi, Wharton (9)</td><td>Manav, Peterson (9)</td><td>Sarah-Jayne, Wilson</td></tr>
<tr class='TeeTimeFuture'><td>3:24 PM</td><td>1</td><td>Selena, Smyth</td><td>Johanna, Martin</td><td>Kira, Zhang</td><td>Matilda, Greene</td></tr>
<tr class='TeeTimeFuture'><td>3:33 PM</td><td>1</td><td>Connor, Walters</td><td>Menachem, Wolfe</td><td>Jaeden, Sandoval</td><td>Darlene, Tucker</td></tr>
<tr class='TeeTimeFuture'><td>3:42 PM</td><td>1</td><td>Mini Ottawa</td><td>Mini Ottawa</td><td>Mini Ottawa</td><td>Irfan, Thatcher</td></tr>
<tr class='TeeTimeFuture'><td>3:51 PM</td><td>1</td><td>Terry, Lewis</td><td>Fred, Fitzgerald</td><td>Mahi, Wharton</td><td></td></tr>
<tr class='TeeTimeFuture'><td>4:00 PM</td><td>1</td><td>Halimah, Farmer</td><td>Umer, Barnett</td><td>Johanna, Martin</td><td>Gladys, Sampson</td></tr>
<tr class='TeeTimeFuture'><td>4:09 PM</td><td>1</td><td>Sally, Coates</td><td>Trystan, Preece</td><td>Menachem, Wolfe</td><td>Briony, Walter</td></tr>
<tr class='TeeTimeFuture'><td>4:18 PM</td><td>1</td><td>Raja, Wilks (9)</td><td>Mel, Cunningham (9)</td><td>Danyal, Mclaughlin (9)</td><td>Padraig, Colley</td></tr>
<tr class='TeeTimeFuture'><td>4:27 PM</td><td>1</td><td>Israr, Glenn</td><td>Aysha, Rosas</td><td>Fred, Fitzgerald</td><td>Shivani, Cooper</td></tr>
<tr class='TeeTimeFuture'><td>4:36 PM</td><td>1</td><td>Ffion, Whitmore</td><td>Emily-Jane, Rice</td><td>Umer, Barnett (9)</td><td>Suhail, Quintero (9)</td></tr>
<tr class='TeeTimeFuture'><td>4:45 PM</td><td>1</td><td>Allegra, Shields</td><td>Phil, Quinn</td><td>Trystan, Preece</td><td>Mildred, Schmitt</td></tr>
<tr class='TeeTimeFuture'><td>4:54 PM</td><td>1</td><td>Patricia, Goddard</td><td>Aj, Hall</td><td></td><td>Jagoda, Pugh</td></tr>
<tr class='TeeTimeFuture'><td>5:03 PM</td><td>1</td><td>Lizzie, Walmsley</td><td>Andreas, Barker</td><td>Connor, Walters</td><td></td></tr>
<tr class='TeeTimeFuture'><td>5:12 PM</td><td>1</td><td>Marwan, Kramer</td><td>Beverly, Cervantes</td><td>Eileen, Hough</td><td></td></tr>
<tr class='TeeTimeFuture'><td>5:21 PM</td><td>1</td><td>Magnan, Andrew</td><td>Keagan, Miranda</td><td>Terry, Lewis</td><td></td></tr>
<tr class='TeeTimeFuture'><td>5:30 PM</td><td>1</td><td>Jones, Carter</td><td>Dante, Wise</td><td>Halimah, Farmer</td><td>Jones, Steve</td></tr>
<tr class='TeeTimeFuture'><td>5:39 PM</td><td>1</td><td>Carter, Tammy</td><td>Chanelle, Maguire</td><td>Sally, Coates</td><td>Carter, Aiden</td></tr>
<tr class='TeeTimeFuture'><td>5:48 PM</td><td>1</td><td>Lynch, Phil</td><td>Rodrigo, Shea</td><td></td><td></td></tr>
<tr class='TeeTimeFuture'><td>5:57 PM</td><td>1</td><td>Carter, Jared</td><td>Snyder, Elizabeth</td><td>Coyle, Adam</td><td></td></tr>
<tr class='TeeTimeFuture'><td>6:06 PM</td><td>1</td><td>Lukasz, Sykes</td><td>Kadie, Brett</td><td>Lizzie, Walmsley</td><td>Auger, Paul</td></tr>
<tr class='TeeTimeFuture'><td>6:15 PM</td><td>1</td><td>Lana, Milne</td><td>Bradley, Donnelly</td><td>Marwan, Kramer</td><td>McCormack, Phil</td></tr>
<tr class='TeeTimeFuture'><td>6:24 PM</td><td>1</td><td>Eddie, Dean</td><td>Lilith, Daly</td><td>Gladys, Sampson</td><td></td></tr>
<tr class='TeeTimeFuture'><td>6:33 PM</td><td>1</td><td>Elaine, Parker</td><td>Kiefer, Clifford</td><td>Briony, Walter</td><td>Thrasher, Kerry</td></tr>
<tr class='TeeTimeFuture'><td>6:42 PM</td><td>1</td><td>Allegra, Mccoy (9)</td><td>Pollyanna, Sweet (9)</td><td>Padraig, Colley (9)</td><td>Shields, Marylyn (9)</td></tr>
<tr class='TeeTimeFuture'><td>6:51 PM</td><td>1</td><td></td><td></td><td></td><td></td></tr>
<tr class='TeeTimeFuture'><td>7:00 PM</td><td>1</td><td></td><td></td><td></td><td></td></tr>
<tr class='TeeTimeFuture'><td>7:09 PM</td><td>1</td><td></td><td></td><td></td><td></td></tr>
<tr class='TeeTimeFuture'><td>7:18 PM</td><td>1</td><td></td><td></td><td></td><td></td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>