You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The text was updated successfully, but these errors were encountered:
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
+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
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.
Describe the issue
<a role="button">
is not vertically aligned with<button>
in a<nav>
.Current Behavior
Expected Behavior
Reproduction URL
Environment
Firefox on Windows 10
The text was updated successfully, but these errors were encountered: