[Bug] Nested <button> elements (non-functional)

Hey,

I tried getting started with Wolfery but ran into a website bug. The “Wake up” button doesn’t work in my (in this respect standards-compliant) browser because it is a nested [button] element.
[button]s aren’t generic container elements (Chrome does this wrong), and any content placed inside of them is so-called “phrasing content”, i.e., display only. Any clicks will be sent to the enclosing [button] as a result. I.e.: placing [A] links or other [button]s inside of a [button] will have that outermost [button] receive the events, not the nested element.

This can be solved by either using a different element that can act as a generic container, or not nesting the [button]s but instead making them siblings (recommended).
(replaced <> with [] because the forum didn’t display the result otherwise)

1 Like

Hi @Wolfbeast, and welcome to forum! :smiley:

Oh, I didn’t know that, actually. I am usually more backend than frontend.
Thanks a lot for pointing it out!

I will switch all those expandable “badges” (as I call that type of component) into using <div> instead, leaving <button> only for the actually buttons, such as the “Wakeup” one.

What browser are you using?

PS. You can do <tag> code by surrounding it with back-ticks : `<tag>`
You can use most common markdown.

1 Like

Hi Accipiter and thanks for the welcome.

I’m using Pale Moon (the browser I publish) which is a long-running Mozilla fork.
Changing the outermost to a <div> should certainly work too, if you’re not using it as a button otherwise or relying on explicit <button> features :slight_smile:

1 Like

Oh! That … is … cool :open_mouth:
I’ll download it to make sure it works well in Pale Moon too.

1 Like

That’s awesome! Nice to see a different attitude than “use Chrome and give Google your data while visiting us or f* off” I get a lot of the time :stuck_out_tongue:

2 Likes

Haha :smiley:
Yeah. There is a reason why I self-host fonts (instead of using Google CDN), and why I refuse to add any external analytics either - I don’t want to give them any more info about you than needed!

2 Likes