Prickly em sizing issue with Google Fonts

Dave, it’s blurred because it’s redacted. Everything I upload is an “anonymized” version of the actual document.

1 Like

I’m here Paul. Ready and reading!

1 Like

Of course. I wish I could see this as logically as all of you professionals. The whole section above the blue .GROOVY should be a flexbox/boxes. You see, I can’t get my head around it Paul. It’s so frustrating. :face_with_peeking_eye:

1 Like

Paul wrote:

Before we go any further with this I am once again trying to push you into doing things the right way . . . (and) I will have to step out of the thread as I can’t bring myself to give advice in the wrong direction.

Paul, I am not at liberty to post the actual template this code is being used for but some context is long-overdue and I now see that error is on my part for which I heartily apologize. Let me walk this back a bit Let me completely walk this back:

I cannot post the actual template and Shakespeare will have to suffice for its content. But what I failed to mention – and I see now it is pivotal! (Jesus it changes everything) – is that the HTML code that is the subject of this thread, .RNDBDR1 and .RNDBDR2, seeks to reproduce a template I have used down through the years (I’m 65 myself btw) using three Adobe products I hold licenses for: PageMaker, InDesign and Acrobat Pro. Through the years I have been printing out Adobe .PDF versions of this exact template (populated with content obviously) and if I were at liberty to send

  • the paper printouts
  • the digital .PDFs that they printed from
  • and my SmartPhone (very important)

one thing would be immediately apparent: you would not be able to tell them apart.

I got my .RNDBDR1 / .RNDBDR2 template so pitch perfect I would defy anyone to say which took thousands of dollars worth of Adobe Software Licenses to produce to a printable .PDF . . . and which took:

  1. one page of HTML code greatly enhanced by the latest innovations in both HTML and CSS
  2. one free Android plain-text-editor App
  3. one small ampersand graphic uploaded to my Google Drive account, and
  4. one ‘Android 8’ LG Stylo 4 SmartPhone

I do not doubt it looks horrible on your SmartPhone Paul. But on mine I had the software proof they can render identically because I was looking right at them: a .PDF version created on my Desktop Windows in Adobe (before hip pain and plague tilted my world two years ago) and the .RNDBDR1 / .RNDBDR2 .HTML template you generously helped me with these past few weeks. IDENTICAL.

If I can read these .PDFs on my SmartPhone (I reasoned) – and can see their mirror-perfect replicas as .HTML in a browser window on that same SmartPhone, equally readable – then whatever else is happening I am looking at proof that it can be made to work.

But I’m asking a polar bear to be comfortable working in the Sahara Desert and it isn’t fair to you. This should be a fun experience! Even for me I have to grudgingly admit there was nothing like seeing this page spill out before me on little more than shoestring and spit, when previously it took thousands of dollars worth of commercial software to get that result. See, this is what’s going to keep me in the game – this, Jesus, I made this?! moment. Say no more if you wish to be excused and I’ll understand but I am stubbornly going to crack this issue because to have gotten it this far only to have it break when it compiles to PDF gets my pin feathers sticking out! —semicodin

1 Like

I am still not certain of your ‘use case’. I don’t really see where ‘pdf’ enters the equation? We are talking about html pages not pdf. You can print the page anyway you like or print to pdf but it doesn’t have to look the same as the web page that you printed it from?

You add print media queries to format your printed documents and indeed I believe you can print to pdf which saves the output as a pdf based on the print styles. However I don’t see what any of this has to do with creating a form or certain design on a webpage other than you want it to look the same?

I seem to have a mental disconnect from what you want and how it is going to be used.:slight_smile: It’s probably just me as I don’t get involved with PDF at all.

Below is my HTML with a few minor corrections to the content, and here is a screenshot of it on my SmartPhone. I used Paul’s excellent flex code and fooled around with it so it is pixel perfect, thank you!

One issue has cropped up that I’ve managed to crudely address with an inline hack, but I don’t like it. It’s ugly coding (to me) and I have to believe there is a better way of addressing it in the CSS:

It has to do with the style ONE. In my Shakespeare version it is the light grey line that I split, artfully placing the second half of the sentence in RNDBDR1:

I wanted to slightly indent the content of RNDBDR1 so I created a new ID to function as a container for the text in RNDBDR1. The first mistake I made was creating an ID and placing it in . . . another ID (yes, well lol). Having recreated it as a Class I flushed my browser’s cache and opened it anew. The top margin worked perfectly but the margin-left would not display. I tried all number of things to get it to work, including using padding instead, but I could not get it to indent.

Finally I resorted to placing it inline. EDIT: I forgot to mention! The container is a div I labeled .NOTCH Focus on that and ONE to get the general idea.

It works but I would much prefer to use the correct syntax and override whatever’s blocking it and keep it in the CSS. Thank you in advance for any help restraining it to the CSS! –s

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=1080, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">

<TITLE>VIEWPORT 98 &#7172; semicodin</TITLE>

<STYLE>

HTML, BODY {
/* not representing these as 'rems' because they are factors */
        text-size-adjust: 100%;
        font-size: 16px;     /* factor expressed in px setting the basis for rem */
        line-height: 16px;  /* factor expressed in px setting the basis for rem */
}
BODY {
        margin: 3.13rem 0 0;        /* 50px */
        padding: 0;
        width: 100%;
        font-family: 'solway', cursive;
}
#TWOCOLUMNS {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        margin-bottom: 1.88rem;
}
#COLUMN-A {
        width: 41%;
        display: flex;
        flex-direction: column;
}
#COLUMN-B {
        width: 59%;
}
#RNDBDR1 {
        border-radius: 1.56rem;
        border: .63rem solid black;
        padding: .56rem;
        width: auto;
}
#RNDBDR2 table {
        width: 100%;
        border-bottom: none;      /* DO NOT REMOVE */
}
#RNDBDR2 th {
        border-radius: .31rem .31rem 0rem 0rem;
/* TOP-LEFT + TOP-RIGHT + BOTTOM-RIGHT + BOTTOM-LEFT */
}
#RNDBDR2 tr:last-child td {
        border-bottom: none;      /* DO NOT REMOVE */
}
#RNDBDR2 {
        background-color: WHITE;
        border-radius: .63rem;
        border: .31rem SOLID BLACK;
        padding: 0rem;
        color: black;
        border-collapse: collapse;
        width: AUTO;
        margin-top: .94rem;
        margin-left: 0rem;
        margin-right: 0rem;
        font-weight: 400;
        font-family: 'Roboto Condensed', sans-serif;
}
TABLE, TH, TD {
        border-collapse: collapse;
        border-bottom: .14rem SOLID BLACK;
}
TH {
        background-color: #E3F0FF;
        border-bottom: .14rem SOLID BLACK;
        padding: .31rem;
        border-collapse: collapse;
        width: 100%;
        margin-left: 0rem;
        margin-right: 0rem;
        color: black;
        text-align: center;
        font-size: 1.63rem;
        line-height: 1.05;
        font-style: ITALIC;
        font-weight: BOLD;
        font-family: 'Crete Round', cursive;
}
TABLE .LEFTINTRO {
        padding-top: .1rem;
        text-align: CENTER;
        color: #666666;
        font-style: ITALIC;
        font-size: .81rem;
        line-height: 1;
        margin-left: 0px;
        margin-right: .13rem;
        font-weight: 400;
        font-family: 'Crete Round', cursive;
}
TABLE .LEFTCOL {
        padding-top: .1rem;
        text-align: right;
        color: #686868;
        font-size: 1.19rem;
        line-height: 1;
        margin-left: 0px;
        margin-right: .13rem;
        font-weight: 500;
        font-family: 'Roboto', sans-serif;
}
TABLE .RIGHTCOL {
        padding-top: .1rem;
        text-align: left;
        color: black;
        font-size: 1.19rem;
        line-height: 1;
        margin-right: 1rem;
        font-weight: 500;
        font-family: 'Roboto', sans-serif;
}
img {
        padding-left: 70px;
        padding-top: 20px;   /* expressed as PX because rems not accurate! */
        padding-bottom:8px;
        width: 42px;
        height: 40px;
}
.ONE {
        text-align: left;
        margin-top: .38rem;        /* left little 6px indent */
        margin-bottom: .75rem;
        color: #535353;
        font-size: 1.63rem;
        line-height: 1;
        font-weight: 400;
        font-family: 'Roboto', sans-serif;
}
.TWO {
        color: dodgerblue;
        text-align: left;
        margin-top: .69rem;        /* was 11px */
        margin-bottom: 4.38rem;
        font-size: 1.63rem;
        line-height: 1;
        font-weight: 500;
        font-family: 'Fira Sans Condensed', sans-serif;
}
.THREE {
        margin-top: auto; /* pushes element to bottom in a flex container*/
        width: 76%;
        margin-bottom: 19px;
        padding: .38rem .63rem .38rem .5rem;
        text-align: CENTER;
        font-style: OBLIQUE;
        background-color: MAROON;        /* #CCCCCC */
        color: WHITE;        /* #353535 */
        font-size: 1.13rem;
        line-height: 1.1;
        font-weight: 600;
        font-family: 'Roboto', sans-serif;
}
#FOUR {
        width: 100%;
        border: none;
        color: BLACK;
        text-align: left;
        font-size: 1.2rem;
        line-height: 1.02;
        font-weight: 600;
        font-family: 'Fira Sans Extra Condensed', sans-serif;
}
#FIVE {
        width: 100%;
        border: none;
        color: BLACK;
        text-align: LEFT;
        font-size: 1.2rem;
        line-height: 1.02;
        font-weight: 600;
        font-family: 'Fira Sans Extra Condensed', sans-serif;
}
#SIX {
        width: 100%;
        border: none;
        color: BLACK;
        text-align: LEFT;
        font-size: 1.2rem;
        line-height: 1.02;
        font-weight: 600;
        font-family: 'Fira Sans Extra Condensed', sans-serif;
}
#SEVEN {
        width: 100%;
        border: none;
        color: BLACK;
        text-align: LEFT;
        font-size: 1.2rem;
        line-height: 1.02;
        font-weight: 600;
        font-family: 'Fira Sans Extra Condensed', sans-serif;
}
.EIGHT {
        margin-top: .63rem;
        margin-bottom: .93rem;
        color: #828282;
        text-align: left;
        font-size: 1.13rem;
        line-height: 1;
        font-weight: 500;
        font-family: 'Fira Sans Condensed', sans-serif;
}
#NINE {
        margin-left: 5%;
        margin-right: 5%;
        color: BLACK;
        text-align: left;
        font-size: 1rem;
        line-height: 1;
        font-weight: 500;
        font-family: 'Solway', cursive;
}
#TEN {
        margin-top: 3rem;
        margin-left: 5%;
        margin-right: 5%;
        color: BLACK;
        text-align: left;
        font-size: 1rem;
        line-height: 1;
        font-weight: 500;
        font-family: 'Solway', cursive;
}
/* THE WITCHES! */

.MET {
        font-style: normal;
        font-size: 1.25rem;
        font-weight: normal;
        font-family: 'Metal Mania', cursive;
}
.MAROON {
        color: maroon;
        margin-top: 24px;
        font-size: 2.25rem;
        line-height: 1.1;
        font-weight: 800;
        font-family: 'Solway', cursive;
}
.MAROONDD {
        color: maroon;
        margin-left: 13%;
        text-align: left;
        font-size: 1.38rem;
        line-height: 1.02;
        font-weight: 800;
        font-family: 'Solway', cursive;
}
.NUDGE {    
/* supposed to be a container for all the text in RNDBDR1 before rndbdr2 */
        margin-bottom: .75rem;
        text-align: left;
}
.ONCE {
        margin-left: 13%;
        text-align: left;
        font-size: 1.38rem;
        line-height: 1.02;
        font-weight: 500;
        font-family: 'Solway', cursive;
}
.SOL10-5 {
        font-size: .63rem;
        line-height: 1.02;
        font-weight: 500;
        font-family: 'Solway', cursive;
}
.SOL12-5 {
        font-size: .75rem;
        line-height: 1.02;
        font-weight: 500;
        font-family: 'Solway', cursive;
}
.SOL14-5 {
        font-size: .88rem;
        line-height: 1.02;
        font-weight: 500;
        font-family: 'Solway', cursive;
}
.SOL15-5 {
        font-size: .94rem;
        line-height: 1.02;
        font-weight: 500;
        font-family: 'Solway', cursive;
}
.SOL16-5 {
        font-size: 1rem;
        line-height: 1.02;
        font-weight: 500;
        font-family: 'Solway', cursive;
}
.SOL18-5 {
        font-size: 1.13rem;
        line-height: 1.02;
        font-weight: 500;
        font-family: 'Solway', cursive;
}
.GROOVYB {
        width: 100%;
        padding: 0;
        margin-top: 1.3rem;
        margin-bottom: 3rem;
        border-top: .88rem GROOVE DODGERBLUE;
}
.HILITER {
        margin-left: 4rem;        /* ___px */
        margin-top: 1rem;
        margin-bottom: .5rem;
        color: black;
        text-align: left;
        font-size: 1.13rem;
        line-height: 1.1;
        font-weight: 800;
        font-family: 'Fira Sans', sans-serif;
}
.HILITEY {
        background-color: #FFFFBF;
}
.DBLUE {color: DODGERBLUE}
.DBLUEA {
        color: DODGERBLUE;
        font-weight: 500;
        font-family: 'Fira SansCondensed', sans-serif;
}
.AA {
        color: #AAAAAA;
        text-align: left;
        font-size: 1.38rem;
        line-height: 1.02;
        font-weight: 500;
        font-family: 'Solway', cursive;
}
.BB {
        color: #999999;
        text-align: left;
        font-size: 1.38rem;
        line-height: 1.02;
        font-weight: 500;
        font-family: 'Solway', cursive;
}
.CC {
        color: #777777;
        text-align: left;
        font-size: 1.38rem;
        line-height: 1.02;
        font-weight: 500;
        font-family: 'Solway', cursive;
}
.DD {
        color: #555555;
        text-align: left;
        font-size: 1.38rem;
        line-height: 1.02;
        font-weight: 500;
        font-family: 'Solway', cursive;
}
.DOTTY {
        margin-left: 5%;
        margin-right: 5%;
        width: 29.5rem;
        border-bottom: .28rem DOTTED BLACK;
        color: #333333;
        text-align: left;
        margin-bottom: 1.88rem;
        font-size: 1.38rem;
        line-height: 1.02;
        font-weight: 700;
        font-family: 'Solway', cursive;
}
.SOL20-5 {
        margin-top: 0px;
        font-size: 1.38rem;
        line-height: 1.02;
        font-weight: 500;
        font-family: 'Solway', cursive;
}
.SOL22-5nomar {
        margin-top: 0px;
        font-size: 1.38rem;
        line-height: 1.02;
        font-weight: 500;
        font-family: 'Solway', cursive;
}
.SOL22-5 {
        font-size: 1.38rem;
        line-height: 1.02;
        font-weight: 500;
        font-family: 'Solway', cursive;
}
.SOL22-7 {
        font-size: 1.38rem;
        line-height: 1.02;
        font-weight: 700;
        font-family: 'Solway', cursive;
}
.SOL22-8 {
        margin-left: 0;
        margin-right: 0;
        text-align: left;
        font-size: 1.38rem;
        line-height: 1.02;
        font-weight: 800;
        font-family: 'Solway', cursive;
}
.SOL22-8DD {
        margin-left: 13%;
        text-align: left;
        font-size: 1.38rem;
        line-height: 1.02;
        font-weight: 800;
        font-family: 'Solway', cursive;
}
.SOL22-9 {
        margin-left: 0;
        margin-right: 0;
        text-align: left;
        font-size: 1.38rem;
        line-height: 1.02;
        font-weight: 900;
        font-family: 'Solway', cursive;
}
.SOL24-8DD {
        margin-left: 13%;
        text-align: left;
        font-size: 1.5rem;
        line-height: 1.05;
        font-weight: 800;
        font-family: 'Solway', cursive;
}
.SOL28-7 {
        font-size: 1.75rem;
        line-height: 1.05;
        font-weight: 700;
        font-family: 'Solway', cursive;
}

.FIRA700 {
        width: 100%;
        border: none;
        color: BLACK;
        text-align: LEFT;
        font-size: 1.44rem;
        line-height: .94;
        font-weight: 700;
        font-family: 'Fira Sans', sans-serif;
}
.TEXT18DD {
        margin-left: 4rem;        /* ___px */
        margin-bottom: .63rem;
        color: black;
        text-align: left;
        font-size: 1.13rem;
        font-weight: 400;
        line-height: 1.1;
        font-family: 'Fira Sans Condensed', sans-serif;
}
.TEXT20 {
        color: black;
        text-align: left;
        font-size: 1.25rem;
        line-height: 1.05;
        font-weight: 500;
        font-family: 'Fira Sans Condensed', sans-serif;
}
.TEXT20DD {
        margin-left: 4rem;        /* ___px */
        color: black;
        text-align: left;
        font-size: 1.25rem;
        line-height: 1.05;
        font-weight: 500;
        font-family: 'Fira Sans Condensed', sans-serif;
}
.TEXT22 {
        color: black;
        text-align: left;
        font-size: 1.38rem;
        line-height: 1;
        font-weight: 500;
        font-family: 'Roboto', sans-serif;
}
.TEXT22b {
        color: black;
        text-align: left;
        font-size: 1.38rem;
        line-height: 1.1;
        font-weight: BOLD;
        font-family: 'Roboto', sans-serif;
}
.TEXT24b {
        color: black;
        text-align: left;
        font-size: 1.5rem;
        line-height: 1;
        font-weight: BOLD;
        font-family: 'Roboto', sans-serif;
}
.TEXT24DDb {
        margin-left: 1.88rem;
        color: black;
        text-align: left;
        font-size: 1.5rem;
        line-height: 1;
        font-weight: BOLD;
        font-family: 'Roboto', sans-serif;
}

</STYLE>
</HEAD>

<BODY>

<div ID="TWOCOLUMNS">
<div ID="COLUMN-A">

<div class="ONE" style="margin-top: 1.57rem">&ldquo;Come, you spirits that tend on</div>

<div class="TWO">
<span style="text-decoration: underline;">
            &ldquo;Cry &lsquo;havoc!</span>&rsquo;</div>

<div class="TEXT24b">
&ldquo;But, soft! What light through<BR>
yonder window breaks?</div>
<div class="TEXT24DDb">
It is the east,<BR>
and Juliet is the sun.&rdquo;</div>

<img src="https://lh3.googleusercontent.com/mgGLyS9M0bqfqyz9uRNAZNKUX5jh2YN6HN-J2-pQj8YrjJrFnmcLB8skQVNsXl3P_djlaSBPzYr5ouc_5HsHDk6Ws-43lx5KkzViuFGsUhijtXhMzWhvTUzexNPguxgmJ089WBD8=w42-h40-p-k" alt="">

<div class="TWO">
<span style="text-decoration: underline;">
            let slip the dogs of war</span>&rdquo;</div>

<div class="TEXT24b">
&ldquo;We are such stuff<br>
as dreams are made on,</div>
<div class="TEXT24DDb">and our little life</div>
<div class="TEXT22">is rounded with a sleep.&rdquo;</div>

<div class="THREE">
&ldquo;Methought I heard a voice cry &lsquo;Sleep no more! <span class="MET">MACBETH</span> does murder sleep,&rsquo; the innocent sleep, sleep that knits up the ravell&rsquo;d sleeve of care, the death of each day&rsquo;s life . . . &rdquo;
</div>

</div> 	                                 <!-- CLOSING COLUMN-A -->

<div ID="COLUMN-B">        <!-- STARTING COLUMN-B -->
<div ID="RNDBDR1">          <!-- STARTING #RNDBDR1 -->

<!-- DO NOT remove the following margin-left .38 – it ONLY works inline! -->
<div class="NUDGE" style="margin-left: .38rem">

<div class="ONE" style="margin-top: 6px">mortal thoughts, unsex me here . . .&rdquo;</div>

<div class="TEXT22b">
&ldquo;Till then sit still, my soul:</div>
<div class="TEXT20">
foul deeds will rise,<BR>
though all the earth o&rsquo;erwhelm them, to men&rsquo;s eyes.&rdquo;
</div>

<div class="HILITER">
<span style="background-color: #FFFFBF">
&ldquo;O God, I could be bounded in a nutshell,<BR>
and count myself a king of infinite space,<BR>
were it not that I have bad dreams.&rdquo;</span></div>

<div class="TEXT20DD">
&ldquo;Great reason why: Lest I revenge. <span style="font-weight: 700">What, myself upon myself? Alack. I love myself.</span> Wherefore? for any good that I myself have done unto myself? <span style="font-weight: 700">O, no! alas, I rather hate myself for hateful deeds committed by myself!
</span>
</div>
<div class="TEXT18DD">
I am a villain: yet I lie. I am not. <span style="color: maroon">Fool, of thyself speak well:</span> fool, do not flatter. My conscience hath a thousand several tongues, and every tongue brings in a several tale, and every tale condemns me for a villain.&rdquo;</div>

<TABLE ID="FOUR">
<TR><TD style="border: none">
&ldquo;As flies to wanton boys, are we to the gods. They kill us for their sport.&rdquo;
</TD>
</TR>
</TABLE>

<TABLE ID="FIVE">
<TR><TD style="border: none">
&ldquo;If you prick us, do we not <span class="DBLUEA">bleed</span>?  . . . <span class="HILITEY">If you poison us, do we not DIE?</span>&rdquo;
</TD>
</TR>
</TABLE>

<TABLE ID="SIX">
<TR><TD style="border: none">
&ldquo;I, that am rudely stamp&rsquo;d, <span class="DBLUEA">deformed</span>, unfinish&rsquo;d, scarce half made up&rdquo;
</TD>
</TR>
</TABLE>

<TABLE ID="SEVEN">
<TR><TD style="border: none">
&ldquo;What &ndash; you dote thus on such <span class="DBLUE">luggage</span>? Let&rsquo;s alone and do the murder.&rdquo;
</TD>
</TR>
</TABLE>

<div class="EIGHT">
<span class="DBLUE">
&#5150;</span>&ldquo;You taught me language; and my profit on&rsquo;t is, I know how to curse. The <span style="color:#424242">red plague rid you</span> for learning me your language!&rdquo;
</div>

</DIV>        <!-- CLOSING .NUDGE CONTAINER FOR #RNDBDR1 -->

<DIV ID="RNDBDR2">
 
<TABLE>
<THEAD>
<TR>
<TH colspan="2">
&ldquo;The time is out of joint: O cursed spite,<br>
That ever I was born to set it right!&rdquo;
</TH>
</TR>
</THEAD>
<TBODY>
<tr>
<td colspan="2"><div class="LEFTINTRO">
By the pricking of my thumbs, something wicked this way comes . . .</div></td>
</tr>
<tr>
<td><div class="LEFTCOL">
&nbsp;</div></td>
<td><div class="RIGHTCOL">&nbsp;</div></td>
</tr>
<tr>
<td><div class="LEFTCOL">
When shall we three</div></td>
<td><div class="RIGHTCOL">meet again?</div></td>
</tr>
<tr>
<td><div class="LEFTCOL">
In thunder, lightning,</div></td>
<td><div class="RIGHTCOL">or in rain?</div></td>
</tr>
<tr>
<td><div class="LEFTCOL">
When the hurly-burly&rsquo;s</div></td>
<td><div class="RIGHTCOL">done,</div></td>
</tr>
<tr>
<td><div class="LEFTCOL">
When the battle&rsquo;s</div></td>
<td><div class="RIGHTCOL">lost and won.</div></td>
</tr>
<tr>
<td><div class="LEFTCOL">
That will be ere</div></td>
<td><div class="RIGHTCOL">the set of sun.</div></td>
</tr>
<tr>
<td><div class="LEFTCOL">
Where the place?</div></td>
<td><div class="RIGHTCOL">Upon the heath.</div></td>
</tr>
<tr>
<td><div class="LEFTCOL">
There to meet with</div></td>
<td><div class="RIGHTCOL"><span class="MET" style="color: BLACK">MACBETH</span>.</div></td>
</tr>
<tr>
<td><div class="LEFTCOL">
Fair is foul,</div></td>
<td><div class="RIGHTCOL">and foul is fair:</div></td>
</tr>
<tr>
<td><div class="LEFTCOL">
Hover through the fog</div></td>
<td><div class="RIGHTCOL">and filthy air.</div></td>
</tr>

</TBODY>
</TABLE>

</DIV>        <!-- CLOSING RNDBDR2 -->
</DIV>        <!-- CLOSING RNDBDR1 -->
</DIV>        <!-- CLOSING COLUMN-B -->
</DIV>        <!-- CLOSING TWOCOLUMNS -->

<div class="GROOVYB"></div>

<div ID="NINE">

<div class="SOL22-9">&ldquo;To-morrow,</div>
<div class="SOL22-7">and to-morrow,</div>
<div class="SOL22-5">
and to-morrow, creeps in this petty pace from day to day to the last syllable of recorded time, and all our yesterdays have lighted fools the way to dusty death. Out, out, brief candle! Life&rsquo;s but a walking shadow, a poor player that struts and frets his hour upon the stage and then is heard no more:
</div>
<div style="margin-top: .88rem"></div>
<div class="SOL22-8DD">
<span class="HILITEY">It is a tale told by an idiot,</span>
</DIV>            <!-- CLOSING SOL22-8DD -->

<div class="SOL24-8DD">
full of sound and fury,
</DIV>            <!-- CLOSING SOL24-8DD -->

<div class="SOL28-7">signifying nothing.&rdquo;</div>

<div style="margin-top: 24px"></div>
<div class="SOL22-5">
&ldquo;To be, or not to be: that is the question. Whether &rsquo;tis nobler in the mind to suffer the slings and arrows of outrageous fortune, or to take arms against a sea of troubles, and by opposing end them? To die: to sleep; <span style="font-weight: 800">no more</span>; and by a sleep to say we end the heart-ache and the thousand natural shocks that flesh is heir to, &rsquo;tis a consummation devoutly to be wish&rsquo;d. To die, to sleep; to sleep, perchance to dream, ay, there&rsquo;s the rub; for in that sleep of death what dreams may come when we have shuffled off this mortal coil&nbsp;.&nbsp;.&nbsp;.&rdquo;
</DIV>            <!-- CLOSING SOL22-5 -->

<div class="MAROON">&ldquo;Thrice</div>
<div class="MAROONDD">the brinded cat hath mew&rsquo;d.</div>
<div class="ONCE">
Thrice and once the hedge-pig whined. <i>Harpier cries &rsquo;tis time, &rsquo;tis time.</i>
</DIV>            <!-- CLOSING ONCE -->

<div class="WITCHES">
Round about the cauldron go; <i>in the poison&rsquo;d entrails throw.  </i>
<span class="SOL18-5">
Toad, that under cold stone <i>days and nights has thirty-one</i> swelter&rsquo;d venom sleeping got, <i>boil thou first i&rsquo; the charmed pot.</i> Double, double toil and trouble; <i>fire burn, and cauldron bubble.</i> </span>
<span class="SOL16-5">
Fillet of a fenny snake, <i>in the cauldron boil and bake;</i> eye of newt and toe of frog, <i>wool of bat and tongue of dog,</i> adder&rsquo;s fork and blind-worm&rsquo;s sting, <i>lizard&rsquo;s leg and owlet&rsquo;s wing,</i> </span>
<span class="SOL15-5">
for a charm of powerful trouble, <i>like a hell-broth boil and bubble.</i> 
Double, double toil and trouble; <i>fire burn and cauldron bubble.</i> Scale of dragon, tooth of wolf, <i>witches&rsquo; mummy, maw and gulf</i> </span>
<span class="SOL14-5">
&nbsp;of the ravin&rsquo;d salt-sea shark, <i>root of hemlock digg&rsquo;d i&rsquo; the dark,</i> liver of blaspheming jew, <i>gall of goat, and slips of yew</i> silver&rsquo;d in the moon&rsquo;s eclipse, <i>nose of turk and tartar&rsquo;s lips,</i> </span>
<span class="SOL12-5">
finger of birth-strangled babe ditch-deliver&rsquo;d by a drab, <i>make the gruel thick and slab:</i> Add thereto a tiger&rsquo;s chaudron, <i>for the ingredients of our cauldron.</i> </span>
<span class="SOL10-5">
Double, double toil and trouble; <i>fire burn and cauldron bubble.</i> Cool it with a baboon&rsquo;s blood, <span style="color: maroon"><i>then the charm is firm and good.&rdquo;</i></span></span>

</DIV>            <!-- CLOSING WITCHES -->
</DIV>            <!-- CLOSING NINE ID -->

<div ID="TEN">
<div class="AA">
&ldquo;The first thing we do, let&rsquo;s kill all the lawyers.&rdquo;</div>
<div class="BB">
&ldquo;Now is the winter of our discontent.&rdquo;</div>
<div class="CC">
&ldquo;Brevity is the soul of wit.&rdquo;
</div>
<div class="DD">
&ldquo;This thing of darkness I acknowledge mine.&rdquo;</div>
</DIV>            <!-- CLOSING TEN ID -->

<div class="DOTTY">
&ldquo;This above all: to thine own self be true.&rdquo;
</DIV>            <!-- CLOSING DOTTY -->

</BODY>
</HTML>

Are you sure you didn’t have a typo, because if I move your inline style into the .NUDGE selector styling, the margin moves just fine.

No margin-left at all


with the .38rem

with 2rem just to make it more obvious that it’s taking effect

1 Like

You could have accomplished the same thing without the .NUDGE div entirely by tweaking the padding on #RNDBDR1

1 Like

Okay the reason I didn’t do that Dave is because I was concerned it would alter the space between RNDBDR1 and RNDBDR2. That little gutter is perfect just as I have it now. Please correct my thinking: if I pad RNDBDR1 doesn’t it affect everything in its container – including RNDBDR2?

I’ll try getting this to work inside .NUDGE without the inline but I worked on this a lot and that was the very first thing I tried.

You were right Dave, a typo. And it looks great.

I’ll caution this because you have no idea how many times this has bitten me. When you are working on a SmartPhone be very careful about accidentally touching your phone! Not only can the slightest brush with your phone manifest in ways you can’t easily see, it can land in completely unexpected places. Think in terms of a power surge: the surge will seek out its best target of opportunity and fry that one thing, leaving other electronics/appliances untouched.

Nowhere is this more irritating than the lines of code that are placed in your header for Google Fonts. At one point I had transferred a font link to a piece of HTML I was coding and it had manifested as a TAB – a thing you do not ever want in your code. I was working in a Sans-Serif editor I use in a black background. The W3 Validator kept pointing to some code way down toward the end of the page. I scrupulously studied everything surrounding the content and code in that section of my document but could find nothing wrong. Scanned my header . . . nothing.

Then I opened it in a regular text editor with a fixed-pitch font and a WHITE background and there was this monstrous GAP in my header where my transfer of it into the code had caught it in just such a way as to make a TAB!

When you’re working on a SmartPhone it’s understandable you want to use a Sans-Serif font: look at the size of the screen you have to work in! So what I do now is have them both at hand. If I can’t get it to validate I open it in Monospace and with a white background. Google Fonts arrrgh! :joy:

Hi again guys. I have a question about Paul’s fix for the Maroon Box.THREE. To reiterate, we made #COLUMN-A a flex box

#COLUMN-A {
        width: 41%;
        display: flex;
        flex-direction: column;
}

and added margin-top: auto; to the style .THREE to push it to the bottom. This works great until the volume of content added above .THREE pushes .THREE past the baseline of #COLUMN-B . . . and effectively allows the last line of the content to sit directly on top of .THREE when I need a 70px margin/spacer there at all times. See the cutaway I’m uploading, and just to reiterate – it’s totally okay for #COLUMN-A to hang lower than #COLUMN-B. Paul mentioned just adding it to the last line of the content but that’s not an option (for reasons I won’t go into).

I can easily add a div with a 70px margin but what I was wondering is if there weren’t some other way for it to happen automatically the minute #COLUMN-A expands past the height of #COLUMN-B. Something that says – Hey hey hey! 70px is the closest you’re ever getting to that maroon box buddy!

Any flexy trick? Other? Thanks guys.

I gave you the answer for that here :slight_smile:

In case you missed it :slight_smile:

I didn’t miss it Paul. I was asking if there were some other way to code it as part of .THREE that’s all. It’s not a big deal.

You could do it automatically by applying a margin bottom to the second last child of that section.

Look up this selector and see if you can work it out :wink:



:nth-last-child(2)
1 Like

That is exactly what I was talking about. I’ll see if I can figure this out on my own Paul. :stuck_out_tongue: And it would work even with just one “block” of text. It’s brilliant.

I’ve blown up the margin to 500px so as to be immediately conspicuous upon opening the HTML.

ARRRGH! I’m so close! . . .

#COLUMN-A,tr:nth-last-child(2) {
        margin-bottom: 500px;
}

I’m certain it’s a CSS Selector EDIT: oh duh, you did just say that Paul lol. I would have thought it would be something noble like

#COLUMN-A tr:nth-last-child(2) {
        margin-bottom: 500px;
}

But it doesn’t work. And all the examples are for classes (I have an ID). I yield!!!

Here you go :slight_smile:

#COLUMN-A > *:nth-last-child(2){margin-bottom:70px;}

2 Likes

It’s brilliant! Thank you Paul. I wasn’t aware that the asterisk was a selector so I learned something completely new! Little by little I’m getting there. Yeah this one’s a keeper. :grin:

Paul, is the spacing around the > significant here? I know these selectors can be touchy as hell!

And I wanted to share the following link. It’s extremely helpful to instantly display the effect (any of) the selectors in the list have on the sample text W3Schools has listed. Click the * symbol to see how powerful it is!

https://w3schools.com/cssref/trysel.asp

1 Like

White space around the child combinator (>) is optional but I use it for readability as it looks neater to me.

It’s a universal selector and represents any element in that position just like a wildcard. It’s not actually needed in the rule I gave you but once again it’s there for clarity.

2 Likes