Alpine (and Marfa) themes use duplicate HTML `id`s

Developers
1

I tried to go to the Github repos for the themes to file an issue but it doesn’t appear issues are enabled there, so I’m posting this here.

First time using either Marfa or Alpine, but I wanted to use something out of the box for my 100 Days to Offload microblog so as to not get caught up in theming and styling, which I tend to do. And of course I ended up finding an issue while tweaking just a tiny thing.

Both Marfa and Alpine appear to be using the same HTML id on multiple elements in the same document, which is not valid HTML. The specific id in question is #wrapper which seems to constrain the content area width of the main <section> and the in the <footer>. There may be other places this is happening, but this is the only one I am aware of right now due to some minor tweaking. I’d recommend making this a class if it is to be used on multiple elements.

2

Good catch, thank you. I’m going to remove the id of the footer and update the theme. Hopefully that doesn’t interfere with anyone’s existing CSS.

3

If I’ve used Marta as the basis for a custom theme, does this mean I should splice in the updated code?

4

Ideally yes, I’d recommend copying the code into your custom theme. It shouldn’t cause any problems unless you are styling anything using the #wrapper id, though.

I had updated Alpine but forgot to update Marfa, so I’ve done that now. Here are the changes: Fixed duplicate footer ID, CSS by manton · Pull Request #12 · microdotblog/theme-marfa · GitHub

1 Like