HTML, CSS & accessibility

Layouts, forms, browser behavior and accessible interface troubleshooting.

112 troubleshooting guides · Page 3 / 5

49. How do I keep a fixed mobile action bar clear of the bottom safe area?

    Add padding using env(safe-area-inset-bottom, 0px) in the layout that actually reaches the screen edge.

50. Why does the first child’s top margin appear outside its parent?

    Vertical margins can collapse in normal block layout.

51. Why do floated images extend outside a parent’s background?

    Floats can escape the parent’s normal height calculation.

52. Why does a percentage gap produce unexpected overflow in a grid?

    Percentage gaps interact with the container’s sizing and can behave differently when its size is indefinite.

53. Why do equal flex-grow values still produce unequal card widths?

    Growth distributes available space on top of each item’s basis; equal growth factors do not imply equal final widths.

54. Why does keyboard focus move in a different order from my CSS layout?

    Flex or grid visual reordering does not necessarily change DOM and accessibility reading order.

55. How do I display pasted multiline text without rendering it as HTML?

    Insert the text as textContent and use white-space:pre-wrap to preserve line breaks while allowing wrapping.

56. Why does a long URL overflow a narrow card despite normal wrapping?

    Normal line breaking may not find a break opportunity inside the token.

57. Why does text-overflow:ellipsis not show an ellipsis?

    For a common single-line case, the text box needs constrained width, overflow:hidden and white-space:nowrap alongside text-overflow:ellipsis.

58. How do I clamp a card description without hiding its only action link?

    Clamp only the descriptive text region, keeping controls outside it.

59. Why does object-fit:cover crop the subject of a product image?

    Cover fills the assigned box by cropping a mismatched aspect ratio.

60. Why does aspect-ratio seem ignored when both dimensions are set?

    An aspect ratio influences automatic sizing; definite width and height can already determine the box.

61. Why does my custom font load but only the regular weight appears?

    Check that each font-face declaration names the correct font family, file and weight/style range.

62. How do I reduce font-loading shifts without hiding text for too long?

    Choose font-display according to the product’s loading policy, then use a fallback with similar metrics and consider metric overrides where supported.

63. Why does enlarged text get clipped inside fixed-height buttons?

    A fixed height combined with rigid line-height may not accommodate zoom, localization or user font settings.

64. How do I show keyboard focus without outlining every mouse click?

    Style :focus-visible with a clear indicator and retain a suitable fallback for the supported browser set.

65. How do I honor reduced motion without breaking a loading state?

    Under prefers-reduced-motion:reduce, remove nonessential travel and parallax while retaining a clear static or minimally changing loading indicator.

66. Why do custom checkbox indicators disappear in Windows forced-colors mode?

    Background colors and shadows may be replaced or suppressed in forced-colors mode.

67. Why does an unlayered style override a more specific rule inside a CSS layer?

    For normal declarations, layer order is considered before selector specificity, and unlayered author rules outrank layered normal rules.

68. How can reusable component CSS remain easy for consumers to override?

    Use low-specificity selectors, including :where where appropriate, and a documented cascade-layer strategy.

69. Why does a CSS variable fallback not rescue an invalid color value?

    The var fallback is used when the custom property is missing or invalid in the variable-resolution sense, not whenever its substituted value is wrong for the consuming property.

70. How do I stop an animated custom property from jumping between values?

    Unregistered custom properties generally animate discretely.

71. Why does a container query never match despite a narrow card?

    Size queries need an eligible query container, typically an ancestor with container-type:inline-size.

72. Why does adding containment change the size of a previously auto-sized widget?

    Containment can intentionally limit how descendants affect layout or sizing.

Ask your own question · Sign in to post questions and answers.