Alex's blog

Oops CSS

Athena Lilith Martin

Published on

I may have accidentally written a CSS stylesheet for U.S. House roll call vote XML.

:root {
  margin: 0.5em;
}
* {
  display: block;
  font-family: sans-serif;
}

majority {
  display: none;
}

rollcall-num, legis-num, vote-question, vote-result, action-date, action-time {
  display: inline;
}

congress::after {
  content: "th Congress"
}

session::after {
  content: " Session"
}

rollcall-num::before {
  content: "Roll-call vote ";
}
rollcall-num::after {
  content: ":";
}

legis-num::after {
  content: ",";
}

congress, chamber {
  font-family: serif;
  font-size: x-large;
  font-weight: bold;
}

vote-totals {
  display: table;
  margin-top: 1em;
  margin-bottom: 1em;
}
totals-by-party-header, totals-by-party, totals-by-vote {
  display: table-row
}
totals-by-party-header * {
  display: table-cell;
  font-weight: bold;
  border: 1px solid black;
  background-color: lightgray;
  border-collapse: collapse;
}
party, total-stub {
  font-weight: bold;
  background-color: lightgray;
}
totals-by-party *, totals-by-vote * {
  display: table-cell;
  margin: 2px;
  border: 1px solid black;
  border-collapse: collapse;
}
totals-by-vote * {
  font-style: italic;
}
totals-by-candidate {
  display: table-row;
}
candidate, candidate-total {
  display: table-cell;
  border: 1px solid black;
}

vote-data {
  display: table;
}
recorded-vote {
  display: table-row;
}
legislator, vote {
  display: table-cell;
}
legislator {
  padding-right: 0.5em;
}

legislator::after {
  content: " (" attr(party) "-" attr(state) ")"
}

In my defense their XSLT sheet didn't load in Firefox and that's why I did it. I had to, you see.

Since publication, I have updated this stylesheet for two reasons: To remove styles for an element that's display: none anyway (namely <majority>), and to add slightly nicer styles for candidate-based votes (such as the ongoing election for Speaker of the House).

Tagged: