The 7-Tab spread looks great! 
1 TAB, 2 TAB & 3 TAB
Paul I can’t understand these, you’ve got CSS in two separate places and I’m having trouble stitching them together. It’s too confusing to me. Could you just post the full page here in Sitepoint in one linear page of code so I can just hit the little COPY icon and paste it in as 3 SEPARATE, complete pages?
You must have copied just as I was fine tuning it.
Here are all the tabs on one page.
The validator probably doesn’t know about that yet.
1 Like
You’re confusing me Paul. I can’t follow any of this. God I hate Codepen. 
That last page is just all the tab variations on one page which means you can use the same css for all but just use the tabs html that you need.
You just copy the code in the rigt panel and put it at the end of your css.
Here is the multiple version with it all in the left panel.
Is there some reason you cannot just place the code in one linear fashion here at Sitepoint between 3 tick marks? I swear I don’t understand everyone’s going along with this splitting the code into two separate places. It makes sense for a hosted website whose stylesheets are separate from the HTML but that’s not me Maestro. That’s not me.
Lots of reasons 
That would mean that in order for me to test your code I would have to copy it from Sitepoint (immediate chance of typos). Open codepen or my editor and paste the code into that (another chance for typos to creep in). Save the code and then view it. Every person reading this thread would have to do the same just to see what it looked like. If its a busy day I won’t have time to do that.
However when a user posts a codepen (or similar) we see what’s what immediately. It provides instant information and can be shared an modified with ease and provides a constant source of reference. A user can just click fork on the codepen and then its in their own codepen collection. No copy and pastes needed and no chance of error at all.
Also there are character limits for posting code into code blocks on Sitepoint so on large files it won’t be possible to paste anyway and rather than going to the bother of posting code and then finding it won’t save I will continue to use codepen for any significant code snippets. Also as mentioned above pasting large swathes of code really slow the browser down and the Sitepoint code windows invariably end up hanging.
How many times have your copy and pastes gone astray? quite a few and some catastrophically. If you had kept a codepen copy you would have had a back up
Posting code into the code tags here on Sitepoint is good for short snippets and obvious pieces of code but remember at the end of the day I have to copy that code and get a working version before I can debug it.
If you are talking about the codepen panels then those panels are designed for easy editing and work flow. When I try to debug your one page code in the left panel I have to keep scrolling down to the html and then scroll back up the the CSS and then back down to the html and then further down to the js and then back up to the html and then up to the CSS again and so on ad infinitum… Its a nightmare to work that way when you can have all 3 panels in view at the same time and no scrolling needed. It may not make sense to you but you aren’t making hundreds of adjustments to code in a short period of time.
1 Like
No more need be said I completely understand now. Thank you for clearing up that mystery Paul. I honestly didn’t know some of these reasons but it makes sense!
I was able to piece together your tab sets and they look wonderful. I need to do the basic versions of the tabs (w/o borders) but I’m sure you’d agree (?) I’m just going to color the border the same color as the fill. If there’s a better way I’ll need some more help. It’s important I don’t delete the border as that would alter the appearance of the tab! Didn’t the 7-tabs turn out well? You never know when you need a multiple-tabs layout and I thought seven was the perfect number for both days/week and an optional center-tab-forward which could produce some very interesting color effects from a design perspective. Wish me luck; I may be back! 
1 Like
Completely missed this. TRUE that.
Paul (anyone) — I’m trying to understand how to control the order of the tabs. I want to create the effect you see in this attached graphic where the first tab on the left is the topmost tab and the seventh tab sits below all the others. See my graphic here:
For some reason I want to say this is nth child territory? Right? Wrong (probably ha ha)?
You’ll need to decrease the z-index sequentially starting at 7 for the nth-child(1) .
e.g.
.svgtabs a:nth-child(1){z-index:7}
.svgtabs a:nth-child(2){z-index:6}
.svgtabs a:nth-child(3){z-index:5}
.svgtabs a:nth-child(4){z-index:4}
.svgtabs a:nth-child(5){z-index:3}
.svgtabs a:nth-child(6){z-index:2}
.svgtabs a:nth-child(7){z-index:1}
1 Like
The black border is formed by the second path in the default svg. Its not actually a border its a fully filled tab the same as the front one only slightly larger to give the appearance of a border.
You can control the color of the border by adding a class to the second path in the svg.
e.g. I’ve added a class of .tab-border in each svg on the second path.
Here : <path class="tab-border" style="fill:#000;etc...
Full svg code for the large tab.
<!-- this one is for the one tab version and the two tab version -->
<!-- large tab -->
<svg width="620" height="74.998" viewBox="0 0 164.042 19.843" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="cutetab-large" class="tab-unit">
<path d="M121.772 232.987c-11.042 0-13.643 5.879-17.411 10.564-4.653 5.788-11.776 8.51-11.776 8.51h145.426s-7.123-2.722-11.776-8.51c-3.768-4.685-6.37-10.564-17.412-10.564Z" transform="translate(-83.277 -232.217)" />
<path class="tab-border" style="fill:#000;stroke-width:.264999;stroke-linejoin:bevel;" d="M121.772 232.217c-5.022 0-8.508 1.208-11.179 3.182-2.67 1.974-4.52 4.54-6.502 7.008-3.962 4.935-8.28 9.653-20.814 9.653h11.356c5.25-1.985 8.309-5.303 10.882-8.509 2.017-2.511 3.785-4.923 6.166-6.683 2.382-1.76 5.38-2.823 10.091-2.823h87.051c4.711 0 7.71 1.062 10.091 2.823 2.382 1.76 4.15 4.172 6.166 6.683 2.574 3.206 5.633 6.524 10.882 8.51h11.357c-12.534 0-16.852-4.72-20.815-9.654-1.98-2.468-3.83-5.034-6.501-7.008-2.671-1.974-6.157-3.182-11.18-3.182Z" transform="translate(-83.277 -232.217)" />
</g>
</svg>
Then in CSS you can make the black border inherit the color of the main part of the tab like this:
.tab-border {
fill: inherit !important;
}
The !important is needed as the path has an inline style for the fill and only !important over-rides that. You don’t need to specify colours unless of course you wanted a different color border.
I’ve added that code in the following pen to show the effect.
(I also added the z-index to reverse the stacking order of the tabs.)
1 Like
Hey Paul — I guessed correctly that this wss nth child! You see, slowly — at a glacial page — it gets in there!
1 Like
Paul it’s no use — I’ve tried to follow your lead but I just don’t understand how to render the tab plain and I must have tried this 7 or 8 different ways. Following is totally broken:
<!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:wght@100;200;300;400;500;600;700;800;900&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=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&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=Calistoga&display=swap" rel="stylesheet">
<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=Henny+Penny&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<title>91 1 TAB 2026 CLASS-2 / SENATE / ᰄ SENATE ELECTION</title>
<style>
body {
width: 1080px;
margin: 1.94rem auto;
margin-bottom: 3.75rem;
font-family: 'courier prime', monospace;
font-size: 2.19rem;
line-height: 2.31rem;
font-weight: bold;
color: black;
}
td {
padding-top: .4rem;
padding-right: .4rem;
padding-bottom: .4rem;
padding-left: .7rem;
}
.lead {
text-align: center;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
font-family: 'special elite', serif;
font-weight: 400;
font-size: 2.75rem;
line-height: 2.88rem;
}
.tally {
padding-left: 0px;
font-family: 'calistoga', serif;
font-weight: 700;
font-size: 2.19rem;
line-height: 2.31rem;
color: black;
}
.class {
font-family: 'calistoga', serif;
font-weight: 700;
font-size: 2.19rem;
line-height: 2.31rem;
color: crimson;
}
/* ━━━━━━━━━ SVG CONTAINER ━━━━━━━━━━ */
.tab2c {
/* denotes a “tab in the 2nd position of a 3-tab alternate, centered” */
text-align: center;
}
/* ━━━━━━━━━ TABLE 1 ━━━━━━━━━━ */
.table1 {
width: 100%;
/* See LINK STYLING for font sizing */
padding: 6px;
text-align: center;
background: black;
}
/* ━━━━━━━━━ TABLE 2 ━━━━━━━━━━ */
.td2 {
width: 268px;
/* OPTIONAL COLUMN WIDTH */
color: black;
text-align: left;
}
.table2 {
background-color: #cccccc;
border: 1rem groove #bbac86;
/* brown */
padding: .25rem;
text-align: left;
width: 100%;
}
/* ━━━━━━━━━ TABLE 3 ━━━━━━━━━━ */
.table3 {
background-image: linear-gradient(#cccccc, white);
width: 100%;
color: black;
padding: .38rem .63rem .38rem .38rem;
text-align: justify;
vertical-align: middle;
/* no border because it’s in table2 */
font-family: 'roboto condensed', sans-serif;
font-size: 2.19rem;
line-height: 2.31rem;
font-weight: 400;
}
/* ━━━━━━━━━ TABLE 4 ━━━━━━━━━━ */
.table4 th {
border-bottom: 1rem groove #bbac86;
background-color: black;
font-family: 'roboto slab', serif;
font-size: 2.06rem;
line-height: 2.25rem;
font-weight: bold;
padding: .94rem;
}
.th4a {
width: 80px;
/* HEADER WIDTH */
color: white;
text-align: center;
border-right: .4rem solid #bbac86;
}
.th4b {
width: 265px;
/* HEADER WIDTH */
color: #56ff00;
/* neon green */
text-align: center;
border-right: .4rem solid #bbac86;
}
.th4c {
width: 400px;
/* HEADER WIDTH */
color: white;
text-align: center;
}
.table4 {
width: 100%;
border: 1rem groove #bbac86;
/* grey */
border-collapse: collapse;
font-family: 'roboto slab', serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: bold;
color: black;
}
.table4 tbody tr:nth-child(odd) {
background-color: #ffffcc;
/* STRIPE YELLOW */
border-bottom: .19rem solid black;
}
.table4 tbody tr:nth-child(even) {
background-color: white;
border-bottom: .19rem solid black;
}
.table4 tbody tr td:nth-of-type(1) {
border-right: .19rem solid black;
text-align: center;
}
.table4 tbody tr td:nth-of-type(2) {
border-right: .19rem solid black;
text-align: left;
}
.rowdy {
border-top: .4rem solid black;
}
.virgini {
text-align: center;
color: black;
padding-bottom: .1rem;
font-family: 'roboto condensed', serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 700;
}
.condl {
text-align: left;
font-family: 'roboto condensed', sans-serif;
font-size: 2.19rem;
line-height: 2.31rem;
font-weight: 400;
}
.condj {
text-align: justify;
font-family: 'roboto condensed', sans-serif;
font-size: 2.19rem;
line-height: 2.31rem;
font-weight: 400;
}
.condlb {
text-align: left;
font-family: 'roboto condensed', sans-serif;
font-size: 2.19rem;
line-height: 2.31rem;
font-weight: 700;
}
.condc {
text-align: center;
font-family: 'roboto condensed', sans-serif;
font-size: 2.06rem;
line-height: 2.19rem;
font-weight: 400;
}
.condi {
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 2.19rem;
line-height: 2.31rem;
font-weight: 400;
}
/* ━━━━━━━━ CELL STYLING ━━━━━━━━ */
.cell1 {
display: block;
color: black;
background-color: #cccccc;
/* grey */
text-align: left;
font-family: 'courier prime', monospace;
font-size: 2.19rem;
line-height: 2.31rem;
font-weight: bold;
}
.cell2 {
display: block;
color: white;
background-color: black;
text-align: left;
font-family: 'courier prime', monospace;
font-size: 2.19rem;
line-height: 2.31rem;
font-weight: bold;
}
.cell3 {
display: block;
color: black;
background-color: #c8e3ff;
/* light blue */
text-align: left;
font-family: 'courier prime', monospace;
font-size: 2.19rem;
line-height: 2.31rem;
font-weight: bold;
}
.cell4 {
display: block;
color: white;
background-color: blue;
text-align: left;
font-family: 'courier prime', monospace;
font-size: 2.19rem;
line-height: 2.31rem;
font-weight: bold;
}
.cell5 {
display: block;
text-align: center;
color: black;
background-color: yellow;
font-family: 'crete round', serif;
font-size: 2rem;
line-height: 2.13rem;
font-weight: 700;
}
.cell6 {
background-image: linear-gradient(#bbac86, white);
display: block;
text-align: center;
color: black;
font-family: 'crete round', serif;
font-size: 2rem;
line-height: 2.13rem;
font-weight: 700;
}
.cell7 {
display: block;
text-align: center;
color: black;
background-color: #dddddd;
/* palest grey */
font-family: 'crete round', serif;
font-size: 2rem;
line-height: 2.13rem;
font-weight: 700;
}
.cell8 {
display: block;
text-align: center;
color: black;
background-color: #bbbbbb;
/* grey */
font-family: 'crete round', serif;
font-size: 2rem;
line-height: 2.13rem;
font-weight: 700;
}
.cell9 {
background-image: linear-gradient(#cccccc, white);
display: block;
text-align: center;
/* going from pslest grey to white */
color: black;
/* background-color: #bbbbbb; */
/* grey */
font-family: 'crete round', serif;
font-size: 2rem;
line-height: 2.13rem;
font-weight: 700;
}
.cell10 {
background-image: linear-gradient(#bbbbbb, #dddddd);
display: block;
text-align: center;
/* going from grey to darker grey */
color: black;
/* background-color: #bbbbbb; */
/* grey */
font-family: 'crete round', serif;
font-size: 2rem;
line-height: 2.13rem;
font-weight: 700;
}
/* ━━━━━━━━━━ COLORS ━━━━━━━━━━━ */
.blu {
color: blue
}
.blub {
color: blue;
font-weight: bold;
}
.fusch {
color: #ca009b
}
.fuschb {
color: #ca009b;
font-weight: bold
}
.fuschi {
color: #ca009b;
font-style: italic
}
.crim {
color: crimson
}
.crimb {
color: crimson;
font-weight: bold
}
.crimi {
color: crimson;
font-style: italic
}
.grey {
color: grey
}
.green {
color: #248900
}
/* green */
.greenb {
color: #248900;
font-weight: bold
}
/* ━━━━━━━━━ LINKS ━━━━━━━━━━━ */
a:active {
color: #ff70ff
}
a:hover {
color: #ff70ff
}
a:link {
color: blue
}
a:visited {
color: blue
}
.redlink a:link {
color: crimson
}
.redlink a:visited {
color: crimson
}
.plink a:link {
color: #ffe5fe;
/* pink */
;
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 400;
}
.plink a:visited {
color: #ffe5fe;
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 400;
}
.wlink a:link {
color: #ffffff;
/* cyan */
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 400;
}
.wlink a:visited {
color: #ffffff;
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 400;
}
.glink a:link {
color: #56ff00;
/* neon green */
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 400;
}
.glink a:visited {
color: #56ff00;
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 400;
}
.bnlink a:link {
padding-bottom: 10px;
color: #bbac86;
/* BROWN */
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 700;
}
.bnlink a:visited {
padding-bottom: 10px;
color: #bbac86;
/* BROWN */
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 700;
}
/* ━━━━━━ MISCELLANEOUS ━━━━━━━ */
.ctr {
text-align: center
}
.undr {
text-decoration: underline
}
.clambk {
color: black;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 2.69rem;
font-weight: 900;
}
.clamcr {
color: crimson;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 2.69rem;
font-weight: 900;
}
.clambu {
color: blue;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 2.69rem;
font-weight: 900;
}
.refdm {
color: crimson;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-weight: 700;
font-size: 2rem;
line-height: 2.19rem;
}
.scor {
color: crimson;
font-family: 'courier prime', monospace;
font-weight: 700;
font-size: 2.19rem;
line-height: 2.19rem;
}
/* The tab css is in this panel for ease of use and should go in the main css when ready */
/* set colors for 7 tabs */
.svgtabs {
--tab1-bg-color: #000;
--tab1-color: #fff;
--tab2-bg-color: #731919;
--tab2-color: #fff;
--tab3-bg-color: #b16742;
--tab3-color: #fff;
--tab4-bg-color: #d4b064;
--tab4-color: #000;
--tab5-bg-color: #e6d677;
--tab5-color: #000;
--tab6-bg-color: #f6efc1;
--tab6-color: #000;
--tab7-bg-color: #ffffff;
--tab7-color: #000;
}
/* set color for 1 tab only */
.svgtabs.onetab {
--tab1-bg-color: #8e815e;
}
.svgtabs.onetab span {
--tab1-color: #fff;
}
.svgtabs {
width: 100%;
margin: auto;
display: flex;
overflow: hidden;
}
.svgtabs a {
color: #000;
text-decoration: none;
flex: 1 0 0;
display: grid;
align-items: center;
grid-template-areas: "tab";
position: relative;
text-align: center;
margin-right: -9rem;
transition: 0.3s ease;
}
.svgtabs.seventab a {
margin-right: -5.4rem;
margin-left: -1rem;
}
.svgtabs.onetab a {
justify-content: center;
margin-right: 0;
}
.svgtabs.twotab a {
margin-right: ;
}
.svgtabs a:last-child {
margin-right: 0;
}
.svgtabs svg {
width: 245px;
height: 53px;
display: block;
grid-area: tab;
position: relative;
z-index: 1;
}
.svgtabs.onetab svg {
width: 620px;
height: 75px;
}
.svgtabs span {
grid-area: tab;
position: relative;
z-index: 2;
padding: 11px 2rem 0 0;
font-weight: bold;
color: #000;
font-size: 1.9rem;
}
.svgtabs.seventab span {
padding: 11px 1rem 0;
}
.svgtabs a:last-child span {
padding: 11px 1rem 0;
}
.svgtabs a.active {
z-index: 99;
}
.svgtabs a.active span {
padding: 11px 1rem 0;
}
.svgtab1 svg {
fill: var(--tab1-bg-color);
}
.svgtab1 span {
color: var(--tab1-color);
}
.svgtab2 svg {
fill: var(--tab2-bg-color);
}
.svgtab2 span {
color: var(--tab2-color);
}
.svgtab3 svg {
fill: var(--tab3-bg-color);
}
.svgtab3 span {
color: var(--tab3-color);
}
.svgtab4 svg {
fill: var(--tab4-bg-color);
}
.svgtab4 span {
color: var(--tab4-color);
}
.svgtab5 svg {
fill: var(--tab5-bg-color);
}
.svgtab5 span {
color: var(--tab5-color);
}
.svgtab6 svg {
fill: var(--tab6-bg-color);
}
.svgtab6 span {
color: var(--tab6-color);
}
.svgtab7 svg {
fill: var(--tab7-bg-color);
}
.svgtab7 span {
color: var(--tab7-color);
}
/* GENERATING A SOLID TAB */
.tab-border {
fill: inherit !important;
}
/* ━━━━━━━━━ END CSS ━━━━━━━━━━ */
</style>
</head>
<body>
<div class="lead">
10 Democratic Senate Seats in 2026
</div>
<!-- add active class to anchor to bring the tab in front as required -->
<nav class="svgtabs onetab">
<a class="svgtab1" href="#">
<span>One Tab Version</span>
<svg width="620" height="74.998" viewBox="0 0 164.042 19.843" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#cutetab-large" />
</svg>
</a>
</nav>
<!-- this one is for the one tab version and the two tab version -->
<!-- large tab -->
<svg width="620" height="74.998" viewBox="0 0 164.042 19.843" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="cutetab-large" class="tab-unit">
<path d="M121.772 232.987c-11.042 0-13.643 5.879-17.411 10.564-4.653 5.788-11.776 8.51-11.776 8.51h145.426s-7.123-2.722-11.776-8.51c-3.768-4.685-6.37-10.564-17.412-10.564Z" transform="translate(-83.277 -232.217)" />
<path class="tab-border" style="fill: black; stroke-width:.264999;stroke-linejoin:bevel;" d="M121.772 232.217c-5.022 0-8.508 1.208-11.179 3.182-2.67 1.974-4.52 4.54-6.502 7.008-3.962 4.935-8.28 9.653-20.814 9.653h11.356c5.25-1.985 8.309-5.303 10.882-8.509 2.017-2.511 3.785-4.923 6.166-6.683 2.382-1.76 5.38-2.823 10.091-2.823h87.051c4.711 0 7.71 1.062 10.091 2.823 2.382 1.76 4.15 4.172 6.166 6.683 2.574 3.206 5.633 6.524 10.882 8.51h11.357c-12.534 0-16.852-4.72-20.815-9.654-1.98-2.468-3.83-5.034-6.501-7.008-2.671-1.974-6.157-3.182-11.18-3.182Z" transform="translate(-83.277 -232.217)" />
</g>
</svg>
<table class="table1">
<tr>
<td class="wlink">
<a href="https://fvap.gov/guide/appendix/state-elections" target="blank">
Click here for current Primary Dates</a>
</td>
<td class="glink">
<a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_elections" target="blank">
Wikipedia 2026 Senate Class 2</a>
</td>
</tr>
</table>
<table class="table2">
<tr>
<td>
<span class="tally">UPDATES HERE</span> OOOO/OOOOOO NOVEMBER 3<br>
<span class="tally">UPDATES HERE</span> OOOO/OOOOOO NOVEMBER 3
</td>
</tr>
</table>
<table class="table3">
<tr>
<td>
ᰄ Each state is assigned 2 senators whose election cycles are called “Classes.” There are 3 Classes, spread out over 6 years <i>so that neither of the state’s allocated 2 senators ever run in the same year.</i> The red number in the first column denotes the other Senate Class the state is a member of so you can see when the candidate’s next opportunity to run again will be if s/he loses.
<i><span class="condib">The General will be held on Nov. 3, 2026;</span> <span class="condlb">all dates referenced below are for the </span><span class="crimb">Primaries</span>.</i>
</td>
</tr>
</table>
<table class="table4">
<thead>
<tr>
<th class="th4a">CLS</th>
<th class="th4b">STATE <img src="https://lh3.googleusercontent.com/pw/AP1GczPchWv8XcvW0pkSO4yEFFhgbl6z0VgpLa0-kreKKlt41LgPExkwbnCnfX-47MX6Wg5P2IksxxoIYn67rymQVw6T1j2i58XcmBIWW9lGWNiVXefStA=w60-h34" alt=""> LINK</th>
<th class="th4c">DATE <img src="https://lh3.googleusercontent.com/pw/AP1GczPZBBRS1BD-SrgpTPo2oA0qh50-f91t9webdRVhnN4AQqh0EF5-EMh5c8nMO21_83yM4JUGfPERhJA0IVpw5N6AKU4iz2qaqxMzTOT1GvHwYtjVxw=w60-h34" alt=""> CANDIDATE</th>
</tr>
</thead>
<tbody>
<tr>
<td class="class">3</td>
<td class="cell10">GEORGIA</td>
<td>MAY 19/<span class="scor"></span></td>
</tr>
<tr>
<td><img src="https://lh3.googleusercontent.com/pw/AP1GczNi1ofkxioK1GoegTYGxYnjfZLzO871PbXv0GbJAgyGOQvI9GOvRzu1IBYbP471gU_ox8YwXo7IbM5SCJlQM_U3-aAnPtrSUChS5a5JLFa_-cbC_A=w68-h65-p-k" alt=""></td>
<td>
PRESIDENT<br>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Georgia" target="blank">
SENATE — GA</a>
</div>
HOUSE
</td>
<td><span class="blu">Jon Ossoff</span> v.<br>
KELLY LOEFFLER?<br>
BRIAN KEMP?</td>
</tr>
<tr class="rowdy">
<td class="class">3</td>
<td class="cell6"><i>NORTH CAROLINA</i></td>
<td>MAY 19/<span class="scor"></span></td>
</tr>
<tr>
<td></td>
<td>
<i>PRESIDENT</i><br>
<div class="link">
<i><a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_North_Carolina" target="blank">
SENATE — NC</a></i>
</div>
<i>HOUSE</i>
</td>
<td><span class="blu">Roy Cooper</span> v.<br>
THOM TILLIS
</td>
</tr>
<tr class="rowdy">
<td class="class">1</td>
<td class="cell6"><i>MONTANA</i></td>
<td>JUN 2/<span class="scor"></span></td>
</tr>
<tr>
<td></td>
<td>
<i>PRESIDENT</i><br>
<div class="link">
<i><a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Montana" target="blank">
SENATE — MT</a></i>
</div>
<i>HOUSE</i>
</td>
<td><span class="green">OOOOOOOO</span> v.<br>
STEVE DAINES</td>
</tr>
<tr class="rowdy">
<td class="class">1</td>
<td>NEW MEXICO</td>
<td>JUN 9/<span class="scor"></span></td>
</tr>
<tr>
<td></td>
<td>
PRESIDENT<br>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_New_Mexico" target="blank">
SENATE — NM</a>
</div>
HOUSE
</td>
<td><span class="green">Ben Ray Luján</span> v.<br>
OOOOOOOO</td>
</tr>
<tr class="rowdy">
<td class="class">3</td>
<td>COLORADO</td>
<td>JUN 30/<span class="scor"></span></td>
</tr>
<tr>
<td></td>
<td>
PRESIDENT<br>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Colorado" target="blank">
SENATE — CO</a>
</div>
HOUSE
</td>
<td>Wildly popular former govnr <span class="green">John Hickenlooper</span> v. JOE O’DEA</td>
</tr>
<tr class="rowdy">
<td class="class">3</td>
<td>ILLINOIS</td>
<td>JUN 30/<span class="scor"></span></td>
</tr>
<tr>
<td></td>
<td>PRESIDENT<br>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Illinois" target="blank">
SENATE — IL</a>
</div>
HOUSE
</td>
<td><span class="green">Dick Durbin</span> v.<br>
DARIN LAHOOD</td>
</tr>
<tr class="rowdy">
<td class="class">1</td>
<td class="cell10">MICHIGAN</td>
<td>AUG 4/<span class="scor"></span><span class="refdm">13% Uncommitted</span></td>
</tr>
<tr>
<td><img src="https://lh3.googleusercontent.com/pw/AP1GczNi1ofkxioK1GoegTYGxYnjfZLzO871PbXv0GbJAgyGOQvI9GOvRzu1IBYbP471gU_ox8YwXo7IbM5SCJlQM_U3-aAnPtrSUChS5a5JLFa_-cbC_A=w68-h65-p-k" alt=""></td>
<td>
PRESIDENT<br>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Michigan" target="blank">
SENATE — MI</a>
</div>
HOUSE
</td>
<td><span class="blu">Gary Peters</span> Dearborn MI Arab Americans @13% v.<br>
MIKE ROGERS (popular)
</td>
</tr>
<tr class="rowdy">
<td class="class">1</td>
<td>MINNESOTA</td>
<td>AUG 11/<span class="scor"></span></td>
</tr>
<tr>
<td></td>
<td>
PRESIDENT<br>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Minnesota" target="blank">
SENATE — MN</a>
</div>
HOUSE
</td>
<td><span class="green">Tina Smith</span> v.<br>
OOOOOOOO</td>
</tr>
<tr class="rowdy">
<td class="class">1</td>
<td class="cell6"><i>WYOMING</i></td>
<td>AUG 11/<span class="scor"></span><span class="refdm">Paging LIZ CHENEY</span></td>
</tr>
<tr>
<td></td>
<td>
<i>PRESIDENT</i><br>
<div class="link">
<i><a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Wyoming" target="blank">
SENATE — WY</a></i>
</div>
<i>HOUSE</i>
</td>
<td><span class="blu">OOOOOOOO</span> v.<br>
CYNTHIA LUMMIS
</td>
</tr>
<tr class="rowdy">
<td class="class">3</td>
<td class="cell6"><i>SOUTH CAROLINA</i></td>
<td>AUG 11/<span class="scor"></span></td>
</tr>
<tr>
<td class="cell6" style="padding: 9px 0px 4px 0px"><img src="https://lh3.googleusercontent.com/pw/AP1GczMxqxABZKX_7u3OoNcRdasIYENducZtw-BQOo3R5aAgihnLt4JNniDCz-yuXCIYiPxtoPGZguslY-gck77P26YoN8qmD3omBdTARB3LUiykh6sFIw=w100-h118" alt=""></td>
<td>
<i>PRESIDENT</i><br>
<div class="link">
<i><a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_South_Carolina" target="blank">
SENATE — SC</a></i>
</div>
<i>HOUSE</i>
</td>
<td><span class="blu">Catherine F. Bruce</span> v.<br>
Entrenched Incumbent LINDSEY GRAHAM</td>
</tr>
<tr class="rowdy">
<td class="class">1</td>
<td class="cell6"><i>MAINE</i></td>
<td>AUG 18/<span class="scor"></span></td>
</tr>
<tr>
<td class="cell6" style="padding: 9px 0px 4px 0px"><img src="https://lh3.googleusercontent.com/pw/AP1GczMxqxABZKX_7u3OoNcRdasIYENducZtw-BQOo3R5aAgihnLt4JNniDCz-yuXCIYiPxtoPGZguslY-gck77P26YoN8qmD3omBdTARB3LUiykh6sFIw=w100-h118" alt=""></td>
<td>
<i>PRESIDENT</i><br>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Maine" target="blank">
<i>SENATE — ME</i></a>
</div>
<i>HOUSE</i>
</td>
<td><span class="blu">
OOOOOOOO</span> v.<br>
Entrenched Incumbent SUSAN COLLINS
</td>
</tr>
<tr class="rowdy">
<td class="class">3</td>
<td class="cell6"><i>ALASKA</i></td>
<td>AUG 18/<span class="scor"></span></td>
</tr>
<tr>
<td></td>
<td><i>PRESIDENT</i><br>
<div class="link"><i>
<a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Alaska" target="blank">
SENATE — AK</a></i>
</div>
<i>HOUSE</i>
</td>
<td><span class="green">Mary Peltola</span> v.<br>
DAN SULLIVAN</td>
</tr>
<tr class="rowdy">
<td class="class">3</td>
<td>NEW HAMPSHIRE</td>
<td>SEP 15/<span class="scor"></span></td>
</tr>
<tr>
<td></td>
<td>
PRESIDENT<br>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_New_Hampshire" target="blank">
SENATE — NH</a>
</div>
HOUSE
</td>
<td><span class="green">Jeanne Shaheen</span> v.<br>
SCOTT BROWN
</td>
</tr>
<tr>
<td colspan="3">
<div class="virgini">West Virginia is a Class 2 Senate Seat but
at 78% <img src="https://lh3.googleusercontent.com/pw/AP1GczMaONXINFPTnCAL8oh4KzEM5k1CAOdaqc0IzkLsWHvYnNGTbUdcPbNdcUvCeDXJ4yvCd2MsmZWaYztn9_a8j0NkK3aKOySst9wveb_ADRnSilATpg=s30-p-k" alt="">
there’s no point.</div>
</td>
</tr>
</table>
<!-- this following block of code is defining the svg and can be kept out of the way anyway on the page -->
<!-- this one is for the 7 tab variation -->
<svg width="245" height="53" viewBox="0 0 64.823 14.023" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="cutetab" class="tab-unit">
<path d="M1425.55 1700.81c-9.892 0-10.854 3.666-13.164 7.378-1.671 2.685-4.696 5.999-6.313 5.96h51.153c-1.616.039-4.641-3.275-6.312-5.96-2.31-3.713-3.273-7.379-13.165-7.379h-7.346Z" transform="translate(-1397.992 -1700.126)" />
<path style="opacity:1;fill:#000;stroke-width:.264999;stroke-linejoin:bevel;" d="M1423.542 1700.126c-3.528.002-5.957.932-7.742 2.337-1.788 1.407-2.92 3.238-4.04 4.986-1.118 1.748-2.218 3.414-3.872 4.639-1.655 1.225-3.882 2.054-7.403 2.054h-2.493v.006h9.14a10.53 10.53 0 0 0 1.57-.96c1.896-1.404 3.089-3.244 4.213-5 1.124-1.757 2.18-3.43 3.732-4.65 1.552-1.222 3.607-2.044 6.91-2.044h16.185c3.303 0 5.359.823 6.91 2.045 1.552 1.222 2.609 2.893 3.733 4.65 1.123 1.757 2.317 3.599 4.213 5.002.475.352.992.673 1.56.957h6.657c-3.522 0-5.748-.83-7.403-2.056-1.654-1.226-2.754-2.89-3.873-4.64-1.118-1.748-2.251-3.582-4.039-4.99-1.785-1.405-4.214-2.334-7.743-2.336Z" transform="translate(-1397.992 -1700.126)" />
</g>
</defs>
</svg>
<!-- this one is for the one tab version and the two tab version -->
<!-- large tab -->
<svg width="620" height="74.998" viewBox="0 0 164.042 19.843" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="cutetab-large" class="tab-unit">
<path d="M121.772 232.987c-11.042 0-13.643 5.879-17.411 10.564-4.653 5.788-11.776 8.51-11.776 8.51h145.426s-7.123-2.722-11.776-8.51c-3.768-4.685-6.37-10.564-17.412-10.564Z" transform="translate(-83.277 -232.217)" />
<!-- GENERATING A SOLID TAB -->
<path style="fill:#000;stroke-width:.264999;stroke-linejoin:bevel;paint-order:fill markers stroke" d="M121.772 232.217c-5.022 0-8.508 1.208-11.179 3.182-2.67 1.974-4.52 4.54-6.502 7.008-3.962 4.935-8.28 9.653-20.814 9.653h11.356c5.25-1.985 8.309-5.303 10.882-8.509 2.017-2.511 3.785-4.923 6.166-6.683 2.382-1.76 5.38-2.823 10.091-2.823h87.051c4.711 0 7.71 1.062 10.091 2.823 2.382 1.76 4.15 4.172 6.166 6.683 2.574 3.206 5.633 6.524 10.882 8.51h11.357c-12.534 0-16.852-4.72-20.815-9.654-1.98-2.468-3.83-5.034-6.501-7.008-2.671-1.974-6.157-3.182-11.18-3.182Z" transform="translate(-83.277 -232.217)" />
</g>
</svg>
</svg>
</body>
</html>
No, that seems to be working!
You just haven’t moved the svg out of the way (as mentioned in my html comments) as it takes up space in the page even though its not actually displayed.
In my examples I moved the svgs to the end of the html where they don’t interfere with the content.
If you want to leave the svg where it is then you will need to hide it as its only used as a definition for #use rule.
e.g.
Add a class to the svg. I’ve called it this : class="svg-definition"
<svg class="svg-definition" width="620" height="74.998" viewBox="0 0 164.042 19.843" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="cutetab-large" class="tab-unit">
<path d="M121.772 232.987c-11.042 0-13.643 5.879-17.411 10.564-4.653 5.788-11.776 8.51-11.776 8.51h145.426s-7.123-2.722-11.776-8.51c-3.768-4.685-6.37-10.564-17.412-10.564Z" transform="translate(-83.277 -232.217)" />
<path class="tab-border" style="fill: black; stroke-width:.264999;stroke-linejoin:bevel;" d="M121.772 232.217c-5.022 0-8.508 1.208-11.179 3.182-2.67 1.974-4.52 4.54-6.502 7.008-3.962 4.935-8.28 9.653-20.814 9.653h11.356c5.25-1.985 8.309-5.303 10.882-8.509 2.017-2.511 3.785-4.923 6.166-6.683 2.382-1.76 5.38-2.823 10.091-2.823h87.051c4.711 0 7.71 1.062 10.091 2.823 2.382 1.76 4.15 4.172 6.166 6.683 2.574 3.206 5.633 6.524 10.882 8.51h11.357c-12.534 0-16.852-4.72-20.815-9.654-1.98-2.468-3.83-5.034-6.501-7.008-2.671-1.974-6.157-3.182-11.18-3.182Z" transform="translate(-83.277 -232.217)" />
</g>
</svg>
Then you can move it with css so it doesn’t impact the layout.
.svg-definition{
position:absolute;
left:-100vw;
top:-100vh;
opacity:0;
pointer-events:none;
}
I continue to do something wrong Paul. I think I grasp the general idea but the minute I’m in the weeds I’m basically just pasting in your code. Was I supposed to be deleting somethin? All i did was add your CSS and your HTML . . . and you can see, it jacks the tab up.
<!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:wght@100;200;300;400;500;600;700;800;900&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=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&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=Calistoga&display=swap" rel="stylesheet">
<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=Henny+Penny&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<title>91 1 TAB 2026 CLASS-2 / SENATE / ᰄ SENATE ELECTION</title>
<style>
body {
width: 1080px;
margin: 1.94rem auto;
margin-bottom: 3.75rem;
font-family: 'courier prime', monospace;
font-size: 2.19rem;
line-height: 2.31rem;
font-weight: bold;
color: black;
}
td {
padding-top: .4rem;
padding-right: .4rem;
padding-bottom: .4rem;
padding-left: .7rem;
}
.lead {
text-align: center;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
font-family: 'special elite', serif;
font-weight: 400;
font-size: 2.75rem;
line-height: 2.88rem;
}
.tally {
padding-left: 0px;
font-family: 'calistoga', serif;
font-weight: 700;
font-size: 2.19rem;
line-height: 2.31rem;
color: black;
}
.class {
font-family: 'calistoga', serif;
font-weight: 700;
font-size: 2.19rem;
line-height: 2.31rem;
color: crimson;
}
/* ━━━━━━━━━ SVG CONTAINER ━━━━━━━━━━ */
.tab2c {
/* denotes a “tab in the 2nd position of a 3-tab alternate, centered” */
text-align: center;
}
/* ━━━━━━━━━ TABLE 1 ━━━━━━━━━━ */
.table1 {
width: 100%;
/* See LINK STYLING for font sizing */
padding: 6px;
text-align: center;
background: black;
}
/* ━━━━━━━━━ TABLE 2 ━━━━━━━━━━ */
.td2 {
width: 268px;
/* OPTIONAL COLUMN WIDTH */
color: black;
text-align: left;
}
.table2 {
background-color: #cccccc;
border: 1rem groove #bbac86;
/* brown */
padding: .25rem;
text-align: left;
width: 100%;
}
/* ━━━━━━━━━ TABLE 3 ━━━━━━━━━━ */
.table3 {
background-image: linear-gradient(#cccccc, white);
width: 100%;
color: black;
padding: .38rem .63rem .38rem .38rem;
text-align: justify;
vertical-align: middle;
/* no border because it’s in table2 */
font-family: 'roboto condensed', sans-serif;
font-size: 2.19rem;
line-height: 2.31rem;
font-weight: 400;
}
/* ━━━━━━━━━ TABLE 4 ━━━━━━━━━━ */
.table4 th {
border-bottom: 1rem groove #bbac86;
background-color: black;
font-family: 'roboto slab', serif;
font-size: 2.06rem;
line-height: 2.25rem;
font-weight: bold;
padding: .94rem;
}
.th4a {
width: 80px;
/* HEADER WIDTH */
color: white;
text-align: center;
border-right: .4rem solid #bbac86;
}
.th4b {
width: 265px;
/* HEADER WIDTH */
color: #56ff00;
/* neon green */
text-align: center;
border-right: .4rem solid #bbac86;
}
.th4c {
width: 400px;
/* HEADER WIDTH */
color: white;
text-align: center;
}
.table4 {
width: 100%;
border: 1rem groove #bbac86;
/* grey */
border-collapse: collapse;
font-family: 'roboto slab', serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: bold;
color: black;
}
.table4 tbody tr:nth-child(odd) {
background-color: #ffffcc;
/* STRIPE YELLOW */
border-bottom: .19rem solid black;
}
.table4 tbody tr:nth-child(even) {
background-color: white;
border-bottom: .19rem solid black;
}
.table4 tbody tr td:nth-of-type(1) {
border-right: .19rem solid black;
text-align: center;
}
.table4 tbody tr td:nth-of-type(2) {
border-right: .19rem solid black;
text-align: left;
}
.rowdy {
border-top: .4rem solid black;
}
.virgini {
text-align: center;
color: black;
padding-bottom: .1rem;
font-family: 'roboto condensed', serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 700;
}
.condl {
text-align: left;
font-family: 'roboto condensed', sans-serif;
font-size: 2.19rem;
line-height: 2.31rem;
font-weight: 400;
}
.condj {
text-align: justify;
font-family: 'roboto condensed', sans-serif;
font-size: 2.19rem;
line-height: 2.31rem;
font-weight: 400;
}
.condlb {
text-align: left;
font-family: 'roboto condensed', sans-serif;
font-size: 2.19rem;
line-height: 2.31rem;
font-weight: 700;
}
.condc {
text-align: center;
font-family: 'roboto condensed', sans-serif;
font-size: 2.06rem;
line-height: 2.19rem;
font-weight: 400;
}
.condi {
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 2.19rem;
line-height: 2.31rem;
font-weight: 400;
}
/* ━━━━━━━━ CELL STYLING ━━━━━━━━ */
.cell1 {
display: block;
color: black;
background-color: #cccccc;
/* grey */
text-align: left;
font-family: 'courier prime', monospace;
font-size: 2.19rem;
line-height: 2.31rem;
font-weight: bold;
}
.cell2 {
display: block;
color: white;
background-color: black;
text-align: left;
font-family: 'courier prime', monospace;
font-size: 2.19rem;
line-height: 2.31rem;
font-weight: bold;
}
.cell3 {
display: block;
color: black;
background-color: #c8e3ff;
/* light blue */
text-align: left;
font-family: 'courier prime', monospace;
font-size: 2.19rem;
line-height: 2.31rem;
font-weight: bold;
}
.cell4 {
display: block;
color: white;
background-color: blue;
text-align: left;
font-family: 'courier prime', monospace;
font-size: 2.19rem;
line-height: 2.31rem;
font-weight: bold;
}
.cell5 {
display: block;
text-align: center;
color: black;
background-color: yellow;
font-family: 'crete round', serif;
font-size: 2rem;
line-height: 2.13rem;
font-weight: 700;
}
.cell6 {
background-image: linear-gradient(#bbac86, white);
display: block;
text-align: center;
color: black;
font-family: 'crete round', serif;
font-size: 2rem;
line-height: 2.13rem;
font-weight: 700;
}
.cell7 {
display: block;
text-align: center;
color: black;
background-color: #dddddd;
/* palest grey */
font-family: 'crete round', serif;
font-size: 2rem;
line-height: 2.13rem;
font-weight: 700;
}
.cell8 {
display: block;
text-align: center;
color: black;
background-color: #bbbbbb;
/* grey */
font-family: 'crete round', serif;
font-size: 2rem;
line-height: 2.13rem;
font-weight: 700;
}
.cell9 {
background-image: linear-gradient(#cccccc, white);
display: block;
text-align: center;
/* going from pslest grey to white */
color: black;
/* background-color: #bbbbbb; */
/* grey */
font-family: 'crete round', serif;
font-size: 2rem;
line-height: 2.13rem;
font-weight: 700;
}
.cell10 {
background-image: linear-gradient(#bbbbbb, #dddddd);
display: block;
text-align: center;
/* going from grey to darker grey */
color: black;
/* background-color: #bbbbbb; */
/* grey */
font-family: 'crete round', serif;
font-size: 2rem;
line-height: 2.13rem;
font-weight: 700;
}
/* ━━━━━━━━━━ COLORS ━━━━━━━━━━━ */
.blu {
color: blue
}
.blub {
color: blue;
font-weight: bold;
}
.fusch {
color: #ca009b
}
.fuschb {
color: #ca009b;
font-weight: bold
}
.fuschi {
color: #ca009b;
font-style: italic
}
.crim {
color: crimson
}
.crimb {
color: crimson;
font-weight: bold
}
.crimi {
color: crimson;
font-style: italic
}
.grey {
color: grey
}
.green {
color: #248900
}
/* green */
.greenb {
color: #248900;
font-weight: bold
}
/* ━━━━━━━━━ LINKS ━━━━━━━━━━━ */
a:active {
color: #ff70ff
}
a:hover {
color: #ff70ff
}
a:link {
color: blue
}
a:visited {
color: blue
}
.redlink a:link {
color: crimson
}
.redlink a:visited {
color: crimson
}
.plink a:link {
color: #ffe5fe;
/* pink */
;
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 400;
}
.plink a:visited {
color: #ffe5fe;
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 400;
}
.wlink a:link {
color: #ffffff;
/* cyan */
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 400;
}
.wlink a:visited {
color: #ffffff;
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 400;
}
.glink a:link {
color: #56ff00;
/* neon green */
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 400;
}
.glink a:visited {
color: #56ff00;
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 400;
}
.bnlink a:link {
padding-bottom: 10px;
color: #bbac86;
/* BROWN */
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 700;
}
.bnlink a:visited {
padding-bottom: 10px;
color: #bbac86;
/* BROWN */
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 700;
}
/* ━━━━━━ MISCELLANEOUS ━━━━━━━ */
.ctr {
text-align: center
}
.undr {
text-decoration: underline
}
.clambk {
color: black;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 2.69rem;
font-weight: 900;
}
.clamcr {
color: crimson;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 2.69rem;
font-weight: 900;
}
.clambu {
color: blue;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 2.69rem;
font-weight: 900;
}
.refdm {
color: crimson;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-weight: 700;
font-size: 2rem;
line-height: 2.19rem;
}
.scor {
color: crimson;
font-family: 'courier prime', monospace;
font-weight: 700;
font-size: 2.19rem;
line-height: 2.19rem;
}
/* The tab css is in this panel for ease of use and should go in the main css when ready */
/* set colors for 7 tabs */
.svgtabs {
--tab1-bg-color: #000;
--tab1-color: #fff;
--tab2-bg-color: #731919;
--tab2-color: #fff;
--tab3-bg-color: #b16742;
--tab3-color: #fff;
--tab4-bg-color: #d4b064;
--tab4-color: #000;
--tab5-bg-color: #e6d677;
--tab5-color: #000;
--tab6-bg-color: #f6efc1;
--tab6-color: #000;
--tab7-bg-color: #ffffff;
--tab7-color: #000;
}
/* set color for 1 tab only */
.svgtabs.onetab {
--tab1-bg-color: #8e815e;
}
.svgtabs.onetab span {
--tab1-color: #fff;
}
.svgtabs {
width: 100%;
margin: auto;
display: flex;
overflow: hidden;
}
.svgtabs a {
color: #000;
text-decoration: none;
flex: 1 0 0;
display: grid;
align-items: center;
grid-template-areas: "tab";
position: relative;
text-align: center;
margin-right: -9rem;
transition: 0.3s ease;
}
.svgtabs.seventab a {
margin-right: -5.4rem;
margin-left: -1rem;
}
.svgtabs.onetab a {
justify-content: center;
margin-right: 0;
}
.svgtabs.twotab a {
margin-right: ;
}
.svgtabs a:last-child {
margin-right: 0;
}
.svgtabs svg {
width: 245px;
height: 53px;
display: block;
grid-area: tab;
position: relative;
z-index: 1;
}
.svgtabs.onetab svg {
width: 620px;
height: 75px;
}
.svgtabs span {
grid-area: tab;
position: relative;
z-index: 2;
padding: 11px 2rem 0 0;
font-weight: bold;
color: #000;
font-size: 1.9rem;
}
.svgtabs.seventab span {
padding: 11px 1rem 0;
}
.svgtabs a:last-child span {
padding: 11px 1rem 0;
}
.svgtabs a.active {
z-index: 99;
}
.svgtabs a.active span {
padding: 11px 1rem 0;
}
.svgtab1 svg {
fill: var(--tab1-bg-color);
}
.svgtab1 span {
color: var(--tab1-color);
}
.svgtab2 svg {
fill: var(--tab2-bg-color);
}
.svgtab2 span {
color: var(--tab2-color);
}
.svgtab3 svg {
fill: var(--tab3-bg-color);
}
.svgtab3 span {
color: var(--tab3-color);
}
.svgtab4 svg {
fill: var(--tab4-bg-color);
}
.svgtab4 span {
color: var(--tab4-color);
}
.svgtab5 svg {
fill: var(--tab5-bg-color);
}
.svgtab5 span {
color: var(--tab5-color);
}
.svgtab6 svg {
fill: var(--tab6-bg-color);
}
.svgtab6 span {
color: var(--tab6-color);
}
.svgtab7 svg {
fill: var(--tab7-bg-color);
}
.svgtab7 span {
color: var(--tab7-color);
}
/* GENERATING A SOLID TAB */
.tab-border {
fill: inherit !important;
}
.svg-definition{
position:absolute;
left:-100vw;
top:-100vh;
opacity:0;
pointer-events:none;
}
/* ━━━━━━━━━ END CSS ━━━━━━━━━━ */
</style>
</head>
<body>
<div class="lead">
10 Democratic Senate Seats in 2026
</div>
<!-- add active class to anchor to bring the tab in front as required -->
<nav class="svgtabs onetab">
<a class="svgtab1" href="#">
<span>One Tab Version</span>
<svg width="620" height="74.998" viewBox="0 0 164.042 19.843" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#cutetab-large" />
</svg>
</a>
</nav>
<!-- this one is for the one tab version and the two tab version -->
<!-- large tab -->
<svg width="620" height="74.998" viewBox="0 0 164.042 19.843" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="cutetab-large" class="tab-unit">
<path d="M121.772 232.987c-11.042 0-13.643 5.879-17.411 10.564-4.653 5.788-11.776 8.51-11.776 8.51h145.426s-7.123-2.722-11.776-8.51c-3.768-4.685-6.37-10.564-17.412-10.564Z" transform="translate(-83.277 -232.217)" />
<path class="tab-border" style="fill: black; stroke-width:.264999;stroke-linejoin:bevel;" d="M121.772 232.217c-5.022 0-8.508 1.208-11.179 3.182-2.67 1.974-4.52 4.54-6.502 7.008-3.962 4.935-8.28 9.653-20.814 9.653h11.356c5.25-1.985 8.309-5.303 10.882-8.509 2.017-2.511 3.785-4.923 6.166-6.683 2.382-1.76 5.38-2.823 10.091-2.823h87.051c4.711 0 7.71 1.062 10.091 2.823 2.382 1.76 4.15 4.172 6.166 6.683 2.574 3.206 5.633 6.524 10.882 8.51h11.357c-12.534 0-16.852-4.72-20.815-9.654-1.98-2.468-3.83-5.034-6.501-7.008-2.671-1.974-6.157-3.182-11.18-3.182Z" transform="translate(-83.277 -232.217)" />
</g>
</svg>
<svg class="svg-definition" width="620" height="74.998" viewBox="0 0 164.042 19.843" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="cutetab-large" class="tab-unit">
<path d="M121.772 232.987c-11.042 0-13.643 5.879-17.411 10.564-4.653 5.788-11.776 8.51-11.776 8.51h145.426s-7.123-2.722-11.776-8.51c-3.768-4.685-6.37-10.564-17.412-10.564Z" transform="translate(-83.277 -232.217)" />
<path class="tab-border" style="fill: black; stroke-width:.264999;stroke-linejoin:bevel;" d="M121.772 232.217c-5.022 0-8.508 1.208-11.179 3.182-2.67 1.974-4.52 4.54-6.502 7.008-3.962 4.935-8.28 9.653-20.814 9.653h11.356c5.25-1.985 8.309-5.303 10.882-8.509 2.017-2.511 3.785-4.923 6.166-6.683 2.382-1.76 5.38-2.823 10.091-2.823h87.051c4.711 0 7.71 1.062 10.091 2.823 2.382 1.76 4.15 4.172 6.166 6.683 2.574 3.206 5.633 6.524 10.882 8.51h11.357c-12.534 0-16.852-4.72-20.815-9.654-1.98-2.468-3.83-5.034-6.501-7.008-2.671-1.974-6.157-3.182-11.18-3.182Z" transform="translate(-83.277 -232.217)" />
</g>
</svg>
<table class="table1">
<tr>
<td class="wlink">
<a href="https://fvap.gov/guide/appendix/state-elections" target="blank">
Click here for current Primary Dates</a>
</td>
<td class="glink">
<a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_elections" target="blank">
Wikipedia 2026 Senate Class 2</a>
</td>
</tr>
</table>
<table class="table2">
<tr>
<td>
<span class="tally">UPDATES HERE</span> OOOO/OOOOOO NOVEMBER 3<br>
<span class="tally">UPDATES HERE</span> OOOO/OOOOOO NOVEMBER 3
</td>
</tr>
</table>
<table class="table3">
<tr>
<td>
ᰄ Each state is assigned 2 senators whose election cycles are called “Classes.” There are 3 Classes, spread out over 6 years <i>so that neither of the state’s allocated 2 senators ever run in the same year.</i> The red number in the first column denotes the other Senate Class the state is a member of so you can see when the candidate’s next opportunity to run again will be if s/he loses.
<i><span class="condib">The General will be held on Nov. 3, 2026;</span> <span class="condlb">all dates referenced below are for the </span><span class="crimb">Primaries</span>.</i>
</td>
</tr>
</table>
<table class="table4">
<thead>
<tr>
<th class="th4a">CLS</th>
<th class="th4b">STATE <img src="https://lh3.googleusercontent.com/pw/AP1GczPchWv8XcvW0pkSO4yEFFhgbl6z0VgpLa0-kreKKlt41LgPExkwbnCnfX-47MX6Wg5P2IksxxoIYn67rymQVw6T1j2i58XcmBIWW9lGWNiVXefStA=w60-h34" alt=""> LINK</th>
<th class="th4c">DATE <img src="https://lh3.googleusercontent.com/pw/AP1GczPZBBRS1BD-SrgpTPo2oA0qh50-f91t9webdRVhnN4AQqh0EF5-EMh5c8nMO21_83yM4JUGfPERhJA0IVpw5N6AKU4iz2qaqxMzTOT1GvHwYtjVxw=w60-h34" alt=""> CANDIDATE</th>
</tr>
</thead>
<tbody>
<tr>
<td class="class">3</td>
<td class="cell10">GEORGIA</td>
<td>MAY 19/<span class="scor"></span></td>
</tr>
<tr>
<td><img src="https://lh3.googleusercontent.com/pw/AP1GczNi1ofkxioK1GoegTYGxYnjfZLzO871PbXv0GbJAgyGOQvI9GOvRzu1IBYbP471gU_ox8YwXo7IbM5SCJlQM_U3-aAnPtrSUChS5a5JLFa_-cbC_A=w68-h65-p-k" alt=""></td>
<td>
PRESIDENT<br>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Georgia" target="blank">
SENATE — GA</a>
</div>
HOUSE
</td>
<td><span class="blu">Jon Ossoff</span> v.<br>
KELLY LOEFFLER?<br>
BRIAN KEMP?</td>
</tr>
<tr class="rowdy">
<td class="class">3</td>
<td class="cell6"><i>NORTH CAROLINA</i></td>
<td>MAY 19/<span class="scor"></span></td>
</tr>
<tr>
<td></td>
<td>
<i>PRESIDENT</i><br>
<div class="link">
<i><a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_North_Carolina" target="blank">
SENATE — NC</a></i>
</div>
<i>HOUSE</i>
</td>
<td><span class="blu">Roy Cooper</span> v.<br>
THOM TILLIS
</td>
</tr>
<tr class="rowdy">
<td class="class">1</td>
<td class="cell6"><i>MONTANA</i></td>
<td>JUN 2/<span class="scor"></span></td>
</tr>
<tr>
<td></td>
<td>
<i>PRESIDENT</i><br>
<div class="link">
<i><a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Montana" target="blank">
SENATE — MT</a></i>
</div>
<i>HOUSE</i>
</td>
<td><span class="green">OOOOOOOO</span> v.<br>
STEVE DAINES</td>
</tr>
<tr class="rowdy">
<td class="class">1</td>
<td>NEW MEXICO</td>
<td>JUN 9/<span class="scor"></span></td>
</tr>
<tr>
<td></td>
<td>
PRESIDENT<br>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_New_Mexico" target="blank">
SENATE — NM</a>
</div>
HOUSE
</td>
<td><span class="green">Ben Ray Luján</span> v.<br>
OOOOOOOO</td>
</tr>
<tr class="rowdy">
<td class="class">3</td>
<td>COLORADO</td>
<td>JUN 30/<span class="scor"></span></td>
</tr>
<tr>
<td></td>
<td>
PRESIDENT<br>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Colorado" target="blank">
SENATE — CO</a>
</div>
HOUSE
</td>
<td>Wildly popular former govnr <span class="green">John Hickenlooper</span> v. JOE O’DEA</td>
</tr>
<tr class="rowdy">
<td class="class">3</td>
<td>ILLINOIS</td>
<td>JUN 30/<span class="scor"></span></td>
</tr>
<tr>
<td></td>
<td>PRESIDENT<br>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Illinois" target="blank">
SENATE — IL</a>
</div>
HOUSE
</td>
<td><span class="green">Dick Durbin</span> v.<br>
DARIN LAHOOD</td>
</tr>
<tr class="rowdy">
<td class="class">1</td>
<td class="cell10">MICHIGAN</td>
<td>AUG 4/<span class="scor"></span><span class="refdm">13% Uncommitted</span></td>
</tr>
<tr>
<td><img src="https://lh3.googleusercontent.com/pw/AP1GczNi1ofkxioK1GoegTYGxYnjfZLzO871PbXv0GbJAgyGOQvI9GOvRzu1IBYbP471gU_ox8YwXo7IbM5SCJlQM_U3-aAnPtrSUChS5a5JLFa_-cbC_A=w68-h65-p-k" alt=""></td>
<td>
PRESIDENT<br>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Michigan" target="blank">
SENATE — MI</a>
</div>
HOUSE
</td>
<td><span class="blu">Gary Peters</span> Dearborn MI Arab Americans @13% v.<br>
MIKE ROGERS (popular)
</td>
</tr>
<tr class="rowdy">
<td class="class">1</td>
<td>MINNESOTA</td>
<td>AUG 11/<span class="scor"></span></td>
</tr>
<tr>
<td></td>
<td>
PRESIDENT<br>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Minnesota" target="blank">
SENATE — MN</a>
</div>
HOUSE
</td>
<td><span class="green">Tina Smith</span> v.<br>
OOOOOOOO</td>
</tr>
<tr class="rowdy">
<td class="class">1</td>
<td class="cell6"><i>WYOMING</i></td>
<td>AUG 11/<span class="scor"></span><span class="refdm">Paging LIZ CHENEY</span></td>
</tr>
<tr>
<td></td>
<td>
<i>PRESIDENT</i><br>
<div class="link">
<i><a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Wyoming" target="blank">
SENATE — WY</a></i>
</div>
<i>HOUSE</i>
</td>
<td><span class="blu">OOOOOOOO</span> v.<br>
CYNTHIA LUMMIS
</td>
</tr>
<tr class="rowdy">
<td class="class">3</td>
<td class="cell6"><i>SOUTH CAROLINA</i></td>
<td>AUG 11/<span class="scor"></span></td>
</tr>
<tr>
<td class="cell6" style="padding: 9px 0px 4px 0px"><img src="https://lh3.googleusercontent.com/pw/AP1GczMxqxABZKX_7u3OoNcRdasIYENducZtw-BQOo3R5aAgihnLt4JNniDCz-yuXCIYiPxtoPGZguslY-gck77P26YoN8qmD3omBdTARB3LUiykh6sFIw=w100-h118" alt=""></td>
<td>
<i>PRESIDENT</i><br>
<div class="link">
<i><a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_South_Carolina" target="blank">
SENATE — SC</a></i>
</div>
<i>HOUSE</i>
</td>
<td><span class="blu">Catherine F. Bruce</span> v.<br>
Entrenched Incumbent LINDSEY GRAHAM</td>
</tr>
<tr class="rowdy">
<td class="class">1</td>
<td class="cell6"><i>MAINE</i></td>
<td>AUG 18/<span class="scor"></span></td>
</tr>
<tr>
<td class="cell6" style="padding: 9px 0px 4px 0px"><img src="https://lh3.googleusercontent.com/pw/AP1GczMxqxABZKX_7u3OoNcRdasIYENducZtw-BQOo3R5aAgihnLt4JNniDCz-yuXCIYiPxtoPGZguslY-gck77P26YoN8qmD3omBdTARB3LUiykh6sFIw=w100-h118" alt=""></td>
<td>
<i>PRESIDENT</i><br>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Maine" target="blank">
<i>SENATE — ME</i></a>
</div>
<i>HOUSE</i>
</td>
<td><span class="blu">
OOOOOOOO</span> v.<br>
Entrenched Incumbent SUSAN COLLINS
</td>
</tr>
<tr class="rowdy">
<td class="class">3</td>
<td class="cell6"><i>ALASKA</i></td>
<td>AUG 18/<span class="scor"></span></td>
</tr>
<tr>
<td></td>
<td><i>PRESIDENT</i><br>
<div class="link"><i>
<a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_Alaska" target="blank">
SENATE — AK</a></i>
</div>
<i>HOUSE</i>
</td>
<td><span class="green">Mary Peltola</span> v.<br>
DAN SULLIVAN</td>
</tr>
<tr class="rowdy">
<td class="class">3</td>
<td>NEW HAMPSHIRE</td>
<td>SEP 15/<span class="scor"></span></td>
</tr>
<tr>
<td></td>
<td>
PRESIDENT<br>
<div class="link">
<a href="https://en.m.wikipedia.org/wiki/2026_United_States_Senate_election_in_New_Hampshire" target="blank">
SENATE — NH</a>
</div>
HOUSE
</td>
<td><span class="green">Jeanne Shaheen</span> v.<br>
SCOTT BROWN
</td>
</tr>
<tr>
<td colspan="3">
<div class="virgini">West Virginia is a Class 2 Senate Seat but
at 78% <img src="https://lh3.googleusercontent.com/pw/AP1GczMaONXINFPTnCAL8oh4KzEM5k1CAOdaqc0IzkLsWHvYnNGTbUdcPbNdcUvCeDXJ4yvCd2MsmZWaYztn9_a8j0NkK3aKOySst9wveb_ADRnSilATpg=s30-p-k" alt="">
there’s no point.</div>
</td>
</tr>
</table>
<!-- this following block of code is defining the svg and can be kept out of the way anyway on the page -->
<!-- this one is for the 7 tab variation -->
<svg width="245" height="53" viewBox="0 0 64.823 14.023" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="cutetab" class="tab-unit">
<path d="M1425.55 1700.81c-9.892 0-10.854 3.666-13.164 7.378-1.671 2.685-4.696 5.999-6.313 5.96h51.153c-1.616.039-4.641-3.275-6.312-5.96-2.31-3.713-3.273-7.379-13.165-7.379h-7.346Z" transform="translate(-1397.992 -1700.126)" />
<path style="opacity:1;fill:#000;stroke-width:.264999;stroke-linejoin:bevel;" d="M1423.542 1700.126c-3.528.002-5.957.932-7.742 2.337-1.788 1.407-2.92 3.238-4.04 4.986-1.118 1.748-2.218 3.414-3.872 4.639-1.655 1.225-3.882 2.054-7.403 2.054h-2.493v.006h9.14a10.53 10.53 0 0 0 1.57-.96c1.896-1.404 3.089-3.244 4.213-5 1.124-1.757 2.18-3.43 3.732-4.65 1.552-1.222 3.607-2.044 6.91-2.044h16.185c3.303 0 5.359.823 6.91 2.045 1.552 1.222 2.609 2.893 3.733 4.65 1.123 1.757 2.317 3.599 4.213 5.002.475.352.992.673 1.56.957h6.657c-3.522 0-5.748-.83-7.403-2.056-1.654-1.226-2.754-2.89-3.873-4.64-1.118-1.748-2.251-3.582-4.039-4.99-1.785-1.405-4.214-2.334-7.743-2.336Z" transform="translate(-1397.992 -1700.126)" />
</g>
</defs>
</svg>
<!-- this one is for the one tab version and the two tab version -->
<!-- large tab -->
<svg width="620" height="74.998" viewBox="0 0 164.042 19.843" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="cutetab-large" class="tab-unit">
<path d="M121.772 232.987c-11.042 0-13.643 5.879-17.411 10.564-4.653 5.788-11.776 8.51-11.776 8.51h145.426s-7.123-2.722-11.776-8.51c-3.768-4.685-6.37-10.564-17.412-10.564Z" transform="translate(-83.277 -232.217)" />
<!-- GENERATING A SOLID TAB -->
<path style="fill:#000;stroke-width:.264999;stroke-linejoin:bevel;paint-order:fill markers stroke" d="M121.772 232.217c-5.022 0-8.508 1.208-11.179 3.182-2.67 1.974-4.52 4.54-6.502 7.008-3.962 4.935-8.28 9.653-20.814 9.653h11.356c5.25-1.985 8.309-5.303 10.882-8.509 2.017-2.511 3.785-4.923 6.166-6.683 2.382-1.76 5.38-2.823 10.091-2.823h87.051c4.711 0 7.71 1.062 10.091 2.823 2.382 1.76 4.15 4.172 6.166 6.683 2.574 3.206 5.633 6.524 10.882 8.51h11.357c-12.534 0-16.852-4.72-20.815-9.654-1.98-2.468-3.83-5.034-6.501-7.008-2.671-1.974-6.157-3.182-11.18-3.182Z" transform="translate(-83.277 -232.217)" />
</g>
</svg>
</svg>
</body>
</html>
This is exactly why I suggest using codepen. I couldn’t have been clearer in my instructions but you still made a copy and paste error in that short snippet.
You were not supposed to add another svg you were just supposed to add the class to the existing svg. I posted the whole svg so that you didn’t add it to the wrong thing - but you did anyway lol
Just add the class to that existing svg and then add the css to the css file.
Ps: Don’t forget to remove the svg code you just added as it’s a duplicate and not needed.
1 Like
A huge part of the problem is not being able to see what I’m doing. I either wrap the lines and get this . . . or I unwrap them and cut off 7/8ths of the line. I can’t get my arms around this code. I’m not complaining, just giving you a friendly reminder that I’m not on a desktop . . . I’ll try again.
