If anyone reading this is uncomfortable with the subject of abortion I suggest you move on. This is a little political reference I created for my own personal use on my own personal phone — no one else’s! It therefore has a width. It’s the only way I could get it to render properly. The document consists primarily of 3 tables with nth child striping, one of which — the very first table — consists of just 2 rows.
I’ve limped this along as far as I can get it but it has 3 problems that just stump me, notwithstanding the fact that I went through the entire document and scrupulously placed every style in LOWER CASE Paul.
Where are my COLORS? The second table should show 6 of the democratic candidates styled in CRIMSON. Only 2 are showing. I have a little grey in the first table that doesn’t render . . . there’s a string in blue in the second footnote mia. Others. I’m uploading a graphic of what this document is supposed to look like but I won’t offend you all with the code because it has CAPS. I’m trying to do this the right way (most of it validates). Codepen below.
Why isn’t my styling rendering the
And then (an easy one) could someone please help me figure out how to lose the bottom border of the first table? the little 2-row table that I want sitting immediately above the header for the main table. I’m never good with these damn table borders.
I have honestly exhausted everything I think could have affected the output so . . . PAUL!? ARCHIBALD!? Anyone? Your help is much appreciated.
I have the Codepen at
semicodin
ralphm
April 9, 2024, 10:01am
2
Aside: it would be better just to have CSS in the CSS box of the Pen and just HTML (without the body tag) in the HTML box of the Pen. Then you know what you’re really working with. Other than that, it’s hard to see where one table ends and another starts. Not easy to explore and debug this. Could you maybe simplify it to just highlight the issues?
1 Like
semicodin:
Where are my COLORS?
In Crimson:<span class="crim">Sherrod Brown</span><span class="CRIM">Bob Casey, Jr.</span>
I’d tell you to spot the difference, but you’ve already told us you fixed the difference…
.title {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
font-family: "henny penny", serif;
font-weight: 700;
font-size: 3.13rem;
line-height: 2.5rem;
}
What part of that styling is supposed to be making it centered?
Tell .table1 to apply border-bottom: none;
2 Likes
RE: Styles not rendering
Use @imports in your css instead.
When you select your font in google fonts, click on ‘get fonts’, then ‘get embed code’, then the @import tab. This will give you the import code to copy and paste into the top of your css.
So remove this from your CSS
<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, 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=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
<title>97 ELECTION PRIMARIES ᰄ 2024</title>
<style>
and try this instead
/* Courier+Prime */
@import url("https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap");
/* Roboto */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap");
/* Henny Penny */
@import url("https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap");
You can see that I have just copied your link href’s into imports instead.
1 Like
Okay Ralph. Let me look at the comments.
Russell thank you. I’m not sure why altering the fonts in my header addresses issues with color and centering but I’ll plug it in and try it and report back.
I’m sorry Russell but I can’t seem to piece this together properly. Would you mind just posting the whole page for me here? Please don’t leave anything out. I’m getting gobbledigook.
I’m sorry Russel but this just gives me a white page with the code run together. Thank you anyway.
rpg_digital:
Use
M_hutley, when I couldn’t get these blocks of text to center I just placed the < center > inline. I thought I had cleaned it up for the version I posted here but apparently not. Some of the colors don’t show up as I mentioned previously. I’m doing this on a smartphone so cut me some slack. Anyone else doing this on their phone I highly recommend the Android app Quick Edit. I’d lose my mind coding if it weren’t for QE.
Your simple fix of border-bottom: none for losing that bottom border doesn’t work as this:
.table1 {
so I’ll try spelling out all four sides. I just wish there were some shortcut method. And I’ve obviously got to create two tables, not just the one (or I lose the bottom border on both tables!).
Lost the pesky bottom border but again — I wish there were a shorter way of accomplishing this:
.table1 {
And I fixed the coloring (I apparantly didn’t lower-case my colors ahem). Paul laughing.
Now I just have missing centering. Have I completely lost you Ralph? I’m sorry!
put the border-bottom after the border, and it’ll overwrite correctly. CSS properties are applied in-order.
At least for the title div, text-align:center will do the job, because it’s a full-width block element.
Yikes. I’ve coded things on many devices over the years, but that’s beyond the pale for me
2 Likes
m_hutley . . …you have no idea how difficult it is to do this on a smartphone.
We’re down to one pesky issue: centering the three blocks known as “hilitex”. If I get that fixed I’m good to go and then I recommend we shelf this whole thread. I didn’t know politics were verboten here at Sitepoint and I’m perfectly comfortable trashing the entire thread . . . AFTER we fix my centering heh heh. Deal?
Should I just place the centering inline m_hutley and call it a day?
Personally, i’d wrap them in a div that’s been set to text-align center. A span really should be inside some sort of proper block level container.
1 Like
I’m gonna go out on a limb and guess this is the solution. Bravo! And now do you know why I couldn’t get my last little block of text to center? It’s because it was sharing a style with another block of text that wasn’t centered. That one deserves the D’Uh award roflmao.
So you see, these were all dumb little edits that just took a reexamination of the code and plucking out every color I still had in caps and turning it to lower case. Your comment on div vs. span is brilliant.
Lock her up Sitepoint. Until next time . . .
semicodin
1 Like
And here it is in all its glory:
<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, 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=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
<title>94 ELECTION PRIMARIES ᰄ 2024</title>
<style>
body {
width: 965px;
margin-top: 2rem;
margin-bottom: 3rem;
font-family: 'courier prime', monospace;
font-size: 2.5rem;
line-height: 2.63rem;
font-weight: bold;
color: black;
}
.table1 {
width: 100%;
border-top: .63rem groove cyan;
border-right: .63rem groove cyan;
border-bottom: none;
border-left: .63rem groove cyan;
border-collapse: collapse;
font-family: 'courier prime', monospace;
font-size: 2.5rem;
line-height: 2.63rem;
font-weight: bold;
color: black;
}
.table1 tbody tr:nth-child( odd ) {
background-color: #ffffcc; /* pastel yellow */
border-bottom: .19rem solid black;
}
.table1 tbody tr:nth-child( even ) {
background-color: white;
border-bottom: .19rem solid black;
}
/* FILLING OUT THE CELL BORDERS */
.table1 tbody tr td:nth-of-type(1) {
border-right: .19rem solid black;
text-align: center;
}
.table1 tbody tr td:nth-of-type(2) {
border-right: .19rem solid black;
text-align: left;
}
.table2 {
width: 100%;
border: .63rem groove cyan;
border-collapse: collapse;
font-family: 'courier prime', monospace;
font-size: 2.5rem;
line-height: 2.63rem;
font-weight: bold;
color: black;
}
td {
padding: .5rem;
}
/* DEFINING THE HEADER */
.table2 th {
border: .38rem solid cyan;
background-color: black;
font-family: 'roboto slab', serif;
font-size: 2rem;
line-height: 2.13rem;
color: white;
font-weight: bold;
padding: .94rem;
}
/* APPLYING THE STRIPES */
.table2 tbody tr:nth-child( odd ) {
background-color: #ffffcc; /* pastel yellow */
border-bottom: .19rem solid black;
}
.table2 tbody tr:nth-child( even ) {
background-color: white;
border-bottom: .19rem solid black;
}
/* FILLING OUT THE CELL BORDERS */
.table2 tbody tr td:nth-of-type(1) {
border-right: .19rem solid black;
text-align: center;
}
.table2 tbody tr td:nth-of-type(2) {
border-right: .19rem solid black;
text-align: left;
}
/*
a:active - a link the moment it is clicked
a:hover - a link when the user mouses over it
a:link - a normal, unvisited link
a:visited - a link the user has visited
*/
a:active {color: #ff70ff}
a:hover {color: #ff70ff}
a:link {color: blue}
a:visited {color: blue}
.title {
text-align: center;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
font-family: "henny penny", serif;
font-weight: 700;
font-size: 3.13rem;
line-height: 2.5rem;
}
.blu {color: blue}
.crim {color: crimson}
.crimi {color: crimson; font-style: italic}
.grey {color: grey}
.green {color: green}
.foot {
margin: 2.5rem 2.5rem 1.25rem 2.5rem;
font-family: 'courier prime', monospace;
font-size: 2.5rem;
line-height: 2.63rem;
font-weight: bold;
}
.footer {
text-align: center;
margin: 2.5rem 2.5rem 1.25rem 2.5rem;
font-family: 'courier prime', monospace;
font-size: 2.5rem;
line-height: 2.63rem;
font-weight: bold;
}.abtn {
margin: 1.25rem 1.25rem 1.25rem 2.5rem;
font-family: "roboto slab", sans-serif;
font-weight: 700;
font-size: 2.13rem;
line-height: 2.25rem;
}
.hilitea {
text-align: center;
color: white;
background-color: #000000;
font-family: 'courier prime', monospace;
font-size: 2.5rem;
line-height: 2.63rem;
font-weight: bold;
}
.hiliteb {
text-align: center;
text-style: italic;
color: cyan;
background-color: #000000;
font-family: 'courier prime', monospace;
font-size: 2.13rem;
line-height: 2.25rem;
font-weight: bold;
}
.hilitec {
margin-top: .63rem;
text-align: center;
color: black;
background-color: #ffffcc;;
font-family: 'courier prime', monospace;
font-size: 2.13rem;
line-height: 2.25rem;
font-weight: bold;
}
.ctr {text-align: center}
.cell {
display: block;
color: black;
background-color: #cccccc;
text-align: left;
font-family: 'courier prime', monospace;
font-size: 2.5rem;
line-height: 2.63rem;
font-weight: bold;
}
ol.abtn {
margin: 1.25rem 1.25rem 1.25rem 2.5rem;
font-family: "roboto slab", sans-serif;
font-weight: 700;
font-size: 2.13rem;
line-height: 2.25rem;
}
ol.abtn > li:nth-of-type(odd) {
background-color: #eeeeee; /* light grey */
}
ol.abtn > li:nth-of-type(even) {
background-color: white;
}
</style>
</head>
<body>
<div class="title">
9 Democratic Senate Seats in 2024
</div>
<div class1="ctr"><span class="hilitea">Class 1</span></div>
<table class="table1">
<tr>
<td colspan="3">5/14— West Virginia Flips Senate <span class="crim">50/50</span></td>
</tr>
<tr>
<td colspan="2">
<span class="grey">Cooked.</span>
<a href="https://lh3.googleusercontent.com/pw/AP1GczPs8JdGV61u69To0VedICepuvGuY-BrOZ0rPJjcA6ZaKzs1EVBWVj0651jbbkfz8YYOhlL2DQH7FgrnoDXXWzgdx9fSyEGS2dB7_XfuASjOq14DKA=w2400?source=screenshot.guru"> <img src="upload://iwwzuJ2HNtldQmtNOElYgEvt6Fm.png" alt=""></a>
<span class="grey">We’re cooked.</span><br>
Joe Manchin-as-Indept. v.<br>
JIM JUSTICE? ALEX MOONEY?
</td>
<td width="290px">
<i>PRESIDENT</i>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2024_United_States_Senate_election_in_West_Virginia" target="blank"><i>SENATE — WV</i></a>
</div>
<i>HOUSE</i>
</td>
</tr>
</table>
<table class="table2">
<thead>
<tr>
<th style="color: cyan; text-align: center; border-collapse: collapse;">
DAY
</th>
<th style="color: cyan; text-align: center; border-collapse: collapse;">
DATE & CANDIDATE NOTES
</th>
<th width="275px" style="color: #fffff5; text-align: center;">STATE</th>
</tr>
</thead>
<tbody>
<tr>
<td>TUE</td>
<td>MAR 19/<i>They like him!</i></td>
<td>OHIO</td>
</tr>
<tr>
<td></td>
<td><span class="crim">Sherrod Brown</span> v. BERNIE MORENO</td>
<td>
PRESIDENT<br>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2024_United_States_Senate_election_in_Ohio" target="blank">SENATE — OH</a>
</div>
HOUSE
</td>
</tr>
<tr>
<td>TUE</td>
<td>APR 23/<i>+13% Last elcn</i></td>
<td>PENNSYLVANIA</td>
</tr>
<tr>
<td></td>
<td><span class="crim">Bob Casey, Jr.</span> v. DAVID MCCORMICK</td>
<td>
PRESIDENT<br>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2024_United_States_Senate_election_in_Pennsylvania" target="blank">SENATE — PA</a>
</div>
HOUSE
</td>
</tr>
<tr>
<td>TUE</td>
<td>MAY 14/<i>He’s loaded...</i></td>
<td>MARYLAND</td>
</tr>
<tr>
<td>NEW</td>
<td><span class="crim">David Trone</span> billnaire<br>
or Angela Alsobrooks? v. LARRY HOGAN
</td>
<td>
PRESIDENT<br>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2024_United_States_Senate_election_in_Maryland" target="blank">SENATE — MD</a>
</div>
HOUSE
</td>
</tr>
<tr>
<td>TUE</td>
<td>JUN 4/<i>They like him!</i></td>
<td>MONTANA</td>
</tr>
<tr>
<td></td>
<td><span class="crim">Jon Tester</span> v.<br>TIM SHEEHY (lied about gunshot wound)</td>
<td>
PRESIDENT<br>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2024_United_States_Senate_election_in_Montana" target="blank">SENATE — MT</a>
</div>
HOUSE
</td>
</tr>
<tr>
<td>TUE</td>
<td>JUN 11/<i>A tossup...</i></td>
<td class="cell">
NEVADA
</td>
</tr>
<tr>
<td><a href="https://lh3.googleusercontent.com/pw/AP1GczPs8JdGV61u69To0VedICepuvGuY-BrOZ0rPJjcA6ZaKzs1EVBWVj0651jbbkfz8YYOhlL2DQH7FgrnoDXXWzgdx9fSyEGS2dB7_XfuASjOq14DKA=w2400?source=screenshot.guru"> <img src="upload://iwwzuJ2HNtldQmtNOElYgEvt6Fm.png" alt=""></a></td>
<td>Jackie Rosen (does have $$) v. SAM BROWN</td>
<td>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2024_United_States_Senate_election_in_Nevada" target="blank">SENATE — NV</a>
</div>
HOUSE
</td>
</tr>
<tr>
<td>TUE</td>
<td>JUL 30/<i>They HATE her!</i></td>
<td>ARIZONA</td>
</TR>
<tr>
<td>NEW</td>
<td><span class="crim">Ruben Gallego</span> v.<br>
KARI LAKE nasty bitch
</td>
<td>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2024_United_States_Senate_election_in_Arizona" target="blank">SENATE — AZ</a>
</div>
HOUSE
</td>
</tr>
<tr>
<td>TUE</td>
<td>AUG 6/<i>13% Uncommitted</i></td>
<td class="cell">
MICHIGAN
</td>
</tr>
<tr>
<td><a href="https://lh3.googleusercontent.com/pw/AP1GczPs8JdGV61u69To0VedICepuvGuY-BrOZ0rPJjcA6ZaKzs1EVBWVj0651jbbkfz8YYOhlL2DQH7FgrnoDXXWzgdx9fSyEGS2dB7_XfuASjOq14DKA=w2400?source=screenshot.guru"> <img src="upload://iwwzuJ2HNtldQmtNOElYgEvt6Fm.png" alt=""></a></td>
<td>Elissa Slotkin v.<br>
MIKE ROGERS (popular)
</td>
<td>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2024_United_States_Senate_election_in_Michigan" target="blank">SENATE — MI</a>
</div>
HOUSE
</td>
</tr>
<tr>
<td>TUE</td>
<td>AUG 13/<i>+11% Last elcn</i></td>
<td>WISCONSIN</td>
</tr>
<tr>
<td></td>
<td><span class="crim">Tammy Baldwin</span> ᰄ 72 yr precdnt v. ERIC HOVDE</td>
<td>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2024_United_States_Senate_election_in_Wisconsin" target="blank">SENATE — WI</a>
</div>
HOUSE
</td>
</tr>
<TR>
<td>TUE</td>
<td>AUG 20/<i>They HATE him!</i></td>
<td><i>FLORIDA</i></td>
</tr>
<tr>
<td>ᰄ</td>
<td>
<span class="blu">Debbie Mucarsel-Powell</span> v. RICK SCOTT
</td>
<td>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2024_United_States_Senate_election_in_Florida" target="blank"><i>SENATE — FL</i></a>
</div>
<i>HOUSE</i>
</td>
</tr>
</tbody>
</table>
<div class="foot">
No Republican has won this CLASS 1 Wisconsin senate seat since <span style="text-decoration: underline">Joseph McCarthy in 1952. That’s 72 years</span>!
<br>
<br>
Sen. Rick Scott (FL-R) has won his last three statewide campaigns by <span style="text-decoration: underline">one point or less</span>. <span class="blu"><i>Could we flip it?</i></span>
<br>
<br>
Most states allow for ABORTION, but some impose so many restrictions the procedure is effectively <span class="CRIM">BANNED</span>. In 2024 activists are collecting ballot signatures to expand existing abortion rights by amending those restrictions to their state laws in:
</div>
<ol class="abtn">
<li>¹²<span class="crim">ALABAMA</span> — <span class="crim">BANNED</span> with few exceptions</li>
<li>¹<span class="crim">ARIZONA</span> — <span class="crim">BANNED</span> <a href="https://apnews.com/article/abortion-arizona-supreme-court-ruling-biden-democrats-361cff78974e6038e532e73e261ae8a4" target="blank">1864! WORST IN THE NATION!</a></li>
<li>¹ARKANSAS — 72-hr. wait w/<span class="crim">numerous</span> Doctor visits</li>
<li><span class="green">CA — Now enshrined in the California Constitution</span></li>
<li>COLORADO — no gestation; other restrictions</li>
<li>²<a href="https://states.guttmacher.org/policies/florida/abortion-policies" target="blank">FLORIDA</a> — <span class="crim"> BANNED after the 6th week w/restrictns</span></li>
<li>¹²<span class="crim">INDIANA</span> — <span class="crim">BANNED</span> with few exceptions</li>
<li>KANSAS — up to 22nd week w/restrictions</li>
<li>¹²<span class="crim">KENTUCKY</span> — <span class="crim">BANNED</span> with few exceptions</li>
<li>MARYLAND — no gestation; other restrictions</li>
<li><span class="green">MI — Now enshrined in the Michigan Constitution</span></li>
<li>¹²<span class="crim">MISSISSIPPI</span> — <span class="crim">BANNED</span> with few exceptions</li>
<li>¹²<span class="crim">MISSOURI</span> — <span class="crim">BANNED</span> with few exceptions</li>
<li>MONTANA — up to 24th week of pregnancy</li>
<li>¹NEBRASKA — up to 12th week w/restrictions</li>
<li>NEVADA — up to the 24th week of pregnancy</li>
<li>NEW YORK — up to 24th week of pregnancy</li>
<li><span class="green">OH — Now enshrined in the Ohio Constitution</span></li>
<li><span class="green">VT — Now enshrined in the Vermont Constitution</span></li>
<li>¹²<span class="crim">WEST VIRGINIA</span> — <span class="crim">BANNED</span> with few excptns</li>
<li>¹WISCONSIN — up to 22nd week w/restrictions</li>
</ol>
<div class="abtn">
¹Telemedicine is banned in this state<br>
²Regulations in force designed to shutter abortion clinics and otherwise dissuade patient from accessing abortion services from anyone but a licensed M.D.
</div>
<div class="ctr"><span class="hiliteb"><i>THEY WILL COME OUT TO VOTE ON THIS ONE ISSUE.</i></span></div>
<div class="ctr"><span class="hilitec">INCREASED VOTER TURNOUT!</span></div>
<div class="footer">
<div class="link">
<a href="https://apnews.com/article/baldwin-hovde-wisconsin-senate-swing-state-1657118e36311b604971967ca5df9374" target="blank">
SEE “Baldwin once again hopes abortion fuels Democratic turnout</a>
<br>as it did in last year’s Wisconsin Supreme Court race...”
</div>
</div>
<br>
</body>
</html>
