Member Avatar for cgull

Hello,

I need help with a menu I'm creating with a sprite image.

I don't know why, but on hover it moves up what looks like 1 pixel.

I have created a jsfiddle for it here: Click Here

Also, first time I am creating a jsfiddle so hope it's ok.

Can someone please help?

  • 4 Contributors
  • 4 Replies
  • 211 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by Troy III

Dani AI

Generated

Small, single‑pixel "nudges" when swapping sprite frames are almost always a rendering or layout side‑effect, not a bad sprite file. was right to call it an illusion: browsers can change anti‑aliasing, baseline alignment, or round fractional positions differently between states. ’s prompt to show the code is also the right diagnostic move — the quickest way to find the culprit is to inspect the computed styles while the element is forced into the :hover state.

Troubleshooting checklist (fast, in order): 1) Inspect computed styles for any border, padding, margin or outline added or removed on :hover. 2) Check for transition rules that animate layout properties. 3) Ensure the sprite container is display:block or inline-block and set an explicit vertical-align (baseline shifts are common). 4) Use whole‑pixel background-position values (avoid fractional positions). 5) Look for font or weight/color changes that reflow nearby text. 6) Test at 100% zoom and at common DPR/HIDPI settings — fractional pixel rounding shows up there. 7) Temporarily toggle :hover in devtools to compare computed boxes side‑by‑side.

A compact, safe pattern that stabilizes a sprite anchor:

a.menu-item {
  display: inline-block;
  width: 48px;
  height: 48px;
  background: url(sprite.png) 0 0 no-repeat;
  vertical-align: top;     /* prevents baseline shifting */
  line-height: 48px;       /* if text sits inside the element */
}

/* keep hover only changing background-position; avoid adding borders/outlines */
a.menu-item:hover {
  background-position: 0 -48px;  /* use integer pixels */
  outline: none;                 /* replace with a non-layout focus style for accessibility */
  box-shadow: 0 0 0 3px rgba(0,0,0,0.12); /* accessible alternative to outline */
}

Most fixes come from one of the above steps: make the sprite container a stable box, avoid adding/removing box metrics on hover, and use integer positions. If those measures don’t remove the one‑pixel shift, isolate the HTML/CSS into a minimal reproducible example that shows only the sprite, its dimensions and the hover rules — that will reveal which property the browser is rounding differently.

Recommended Answers

All 4 Replies

Member Avatar for Unimportant

Include the relevant code, such as that which you use to draw it.

Member Avatar for BMXDad

Looks like an illusion ... the fiddle is working fine.

Member Avatar for cgull

Ok, somehow it works now. Thanks guys

Member Avatar for Troy III

:) good work cgull

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.