My
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
is no good? I grabbed it from w3.org. Meanwhile . . .
Below I’ve made some minor adjustments to Paul’s latest CodePen PAUL-O-LATOR_94.html (you know you’re being honored when you’ve been brewed with one of my percolator labels) (ronpat, that’s you too hee hee). I probably should have mentioned in my lead post that everything spacial should be 30px (note. the border is now 30px).
The three columns should display 30px of white padding between the lyrics and the border; and the center column should have no more than 30px of padding on its left and right sides. We’re getting deep here, so I’ve produced another graphic displaying the excess white space. The 3 crimson areas are excess, and the blue box to the left isn’t wide enough.
Before I forget, Paul that little dotted column effect is fantastic. If we could reintroduce it with color: #C76B73; it would be additionally helpful for all of us to observe the accuracy of the column widths -and- the appearance of the columns with varying browser widths.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Michael Jackson’s “JAM”</title>
<style>
.wrap {
margin: 0px auto;
}
.song {
font-size: 25px;
margin: 0;
padding: 20px 0 50px 30px;
}
.song span {
display: block;
margin: 20px 0 0;
font-size: 50px;
}
.container {
border: 30px solid #E2E2D8;
font-family: Letter Gothic LCY Bold, LetterGotLCYBol, MONOSPACE;
color: #000;
padding: 30px;
font-size: 16px;
text-align: left;
-webkit-column-count: 3;
/* Chrome, Safari, Opera */
-moz-column-count: 3;
/* Firefox */
column-count: 3;
-webkit-column-gap: 40px;
/* Chrome, Safari, Opera */
-moz-column-gap: 40px;
/* Firefox */
column-gap: 40px;
-webkit-column-width: 100px;
/* Chrome, Safari, Opera */
-moz-column-width: 100px;
column-width: 100px;
/*-webkit-column-rule: 1px dotted #ddd;
-moz-column-rule: 1px dotted #ddd;
column-rule: 1px dotted #ddd;*/
}
.container p {
display: inline-block;
/* wrap only at end of a p block */
vertical-align: top;
/* or try this instead */
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
.footer table {
width: 100%;
table-layout: fixed;
color: #fff;
background: #555577;
border-collapse: collapse;
}
.footer td,
.footer th {
padding: 15px 5px;
border: 1px solid #fff;
text-align: center;
}
.footer th {
text-transform: uppercase;
}
.tour-notes {
border-top: 2px solid #fff;
background: #557;
color: #fff;
padding: 15px;
margin: 0;
}
</style>
</head>
<body>
<div class="wrap">
<h1 class="song">Michael Jackson’s<span>“Jam”</span></h1>
<div class="container">
<p>Nation To Nation
<br> All The World
<br> Must Come Together
<br> Face The Problems
<br> That We See
<br> Then Maybe Somehow
<br> We Can Work It Out
<br> I Asked My Neighbor
<br> For A Favor
<br> She Said Later
<br> What Has Come Of
<br> All The People
<br> Have We Lost Love
<br> Of What It’s About
<br>
</p>
<p> I Have To Find My Peace Cuz
<br> No One Seems To Let Me Be
<br> False Prophets Cry Of Doom
<br> What Are The Possibilities
<br> I Told My Brother
<br> There’ll Be Problems,
<br> Times And Tears For Fears,
<br> We Must Live Each Day
<br> Like It’s The Last </p>
<p> Go With It
<br> Go With It
<br> Jam </p>
<p> It ain’t Too Much Stuff
<br> It ain’t Too Much
<br> It ain’t Too Much For Me To
<br> Jam
<br> It ain’t
<br> It ain’t Too Much Stuff
<br> It ain’t
<br> don’t You
<br> It ain’t Too Much For Me To </p>
<p> The World Keeps Changing
<br> Rearranging Minds
<br> And Thoughts
<br> Predictions Fly Of Doom
<br> The Baby Boom
<br> Has Come Of Age
<br> We’ll Work It Out</p>
<p> I Told My Brothers
<br> don’t You Ask Me
<br> For No Favors
<br> I’m Conditioned By
<br> The System
<br> don’t You Talk To Me
<br> don’t Scream And Shout </p>
<p> She Pray To God, To Buddha
<br> Then She Sings A
<br> Talmud Song
<br> Confusions Contradict
<br> The Self
<br> Do We Know Right
<br> From Wrong
<br> I Just Want You To
<br> Recognize Me
<br> In The Temple
<br> You can’t Hurt Me
<br> I Found Peace
<br> Within Myself</p>
<p> Go With It
<br> Go With It
<br> Jam
<br> It ain’t
<br> It ain’t Too Much Stuff
<br> It ain’t Too Much
<br> It ain’t Too Much For Me To
<br> Jam
<br> It ain’t
<br> It ain’t Too Much Stuff
<br> It ain’t
<br> don’t You
<br> It ain’t Too Much For Me To
<br> Jam
<br> It ain’t Too Much Stuff
<br> It ain’t Too Much
<br> It ain’t Too Much For Me To
<br> Jam
<br> It ain’t
<br> It ain’t Too Much Stuff
<br> It ain’t
<br> don’t You
<br> It ain’t Too Much For Me To </p>
<p><span style="color: #C76B73; font-style: italic;">[Rap Performed By Heavy
D]</span>
<br> Jam Jam
<br> Here Comes The Man
<br> Hot Damn
<br> The Big Boy Stands
<br> Movin’ Up A Hand
<br> Makin’ Funky Tracks
<br> With My Man
<br> Michael Jackson
<br> Smooth Criminal
<br> That’s The Man
<br> Mike’s So Relaxed
<br> Mingle Mingle Jingle
<br> In The Jungle
<br> Bum Rushed The Door
<br> 3 And 4’s In A Bundle
<br> Execute The Plan
<br> First I Cooled Like A Fan
<br> Got With Janet
<br> Then With Guy
<br> Now With Michael
<br> Cause It ain’t Hard To . . . </p>
<p>[Michael]
<br> Jam
<br> It ain’t
<br> It ain’t Too Much Stuff
<br> It ain’t Too Much
<br> It ain’t Too Much For Me To
<br> Jam
<br> Get On It
<br> It ain’t Too Much Stuff
<br> It ain’t
<br> don’t Stop
<br> It ain’t Too Much For Me To
<br> Jam
<br> It ain’t
<br> It ain’t Too Much Stuff
<br> It ain’t
<br> don’t You
<br> It ain’t Too Much For Me To
<br> Jam
<br> It ain’t
<br> It ain’t Too Much Stuff
<br> It ain’t
<br> don’t You
<br> It ain’t Too Much For Me To </p>
<p> It ain’t Too Hard For Me
<br> To Jam [9x]
<br> Get On It
<br> Jam
<br> It ain’t
<br> It ain’t Too Much Stuff
<br> It ain’t
<br> don’t You
<br> It ain’t Too Much For Me To
<br> Jam
<br> It ain’t Too Much Stuff
<br> It ain’t Too Much
<br> It ain’t Too Much For Me To
<br> Jam
<br> It ain’t Too Much Stuff
<br> It ain’t Too Much
<br> It ain’t Too Much For Me To
<br> Jam
<br> Too Much
<br> It ain’t Too Much Stuff
<br> It ain’t
<br> don’t You
<br> It ain’t Too Much For Me To </p>
<p> Get On It
<br> Get On It
<br> Give It Baby
<br> Give It To Me
<br> Come On
<br> You Really Give It To Me
<br> Got To Give It
<br> You Just Want To Give It </p>
</div>
<div class="footer">
<table>
<tr>
<th scope="col">Video</th>
<th scope="col">Song</th>
<th scope="col">Album</th>
<th scope="col">Year</th>
<th scope="col">Title</th>
</tr>
<tr>
<td>Runtime</td>
<td>Runtime</td>
<td>Album Title</td>
<td>Year Released</td>
<td>Song</td>
</tr>
</table>
<p class="tour-notes">Live Performance & Tour Notes . . . </p>
</div>
</div>
</body>
</html>