`<a role="button">` is not vertically aligned with `<button>` in `<nav>` #496

carlreinke · 2024-03-19T04:33:39Z

Describe the issue

<a role="button"> is not vertically aligned with <button> in a <nav>.

Current Behavior

Expected Behavior

Reproduction URL

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/[email protected]/css/pico.min.css" />
</head>
<body>
  <article>
    <nav>
      <ul>
        <li><a href="#">a</a></li>
        <li><button>button</button></li>
        <li><a href="#" role="button">a[role="button"]</a></li>
      </ul>
    </nav>
  </article>
</body>

Environment

Firefox on Windows 10

The text was updated successfully, but these errors were encountered:

enzoclock · 2024-03-22T13:14:57Z

+1 👍. There is a margin bottom for buttons that have one of the three [type="..."] properties, but not for the default button. I wonder if this behavior should be aligned

cameronelliott · 2024-06-07T21:45:12Z

Same issue here chrome Version 123.0.6312.105 on macbook apple silicon

shuuji3 · 2024-06-09T07:58:18Z

The reason was that button has margin: 0 while [role=button] only has margin-bottom: 0 but margin-top is not 0.

For the above example, I was able to fix the margin issue by one of these additional CSS:

-button {
+button, [role=button] {
   margin: 0;
 }

or

 nav li [role=button], nav li [type=button], nav li button, nav li input:not([type=checkbox],[type=radio],[type=range],[type=file]), nav li select {
     height: auto;
     margin-right: inherit;
     margin-bottom: 0;
     margin-left: inherit;
     padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width)* 2) var(--pico-nav-link-spacing-horizontal);
 }

+nav li [role=button], nav li [type=button] {
+  margin-top: 0;
+}

I'm unfamiliar with the Pico CSS codebase, so I'm not confident about which approach is appropriate to fix this issue. Hope this helps fix this issue.

Before

After

carlreinke changed the title ~~<a role="button"> is not vertically aligned in <nav>~~ <a role="button"> is not vertically aligned with <button> in <nav> Mar 19, 2024

Sector6759 mentioned this issue Jul 5, 2024

Nav item link role="button" is margined negatively #568

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`<a role="button">` is not vertically aligned with `<button>` in `<nav>` #496

`<a role="button">` is not vertically aligned with `<button>` in `<nav>` #496

carlreinke commented Mar 19, 2024 •

edited

Loading

enzoclock commented Mar 22, 2024

cameronelliott commented Jun 7, 2024

shuuji3 commented Jun 9, 2024 •

edited

Loading

<a role="button"> is not vertically aligned with <button> in <nav> #496

<a role="button"> is not vertically aligned with <button> in <nav> #496

Comments

carlreinke commented Mar 19, 2024 • edited Loading

Describe the issue

Current Behavior

Expected Behavior

Reproduction URL

Environment

enzoclock commented Mar 22, 2024

cameronelliott commented Jun 7, 2024

shuuji3 commented Jun 9, 2024 • edited Loading

Before

After

`<a role="button">` is not vertically aligned with `<button>` in `<nav>` #496

`<a role="button">` is not vertically aligned with `<button>` in `<nav>` #496

carlreinke commented Mar 19, 2024 •

edited

Loading

shuuji3 commented Jun 9, 2024 •

edited

Loading