Member Avatar for gpdrums

I'm hoping someone can help me figure this out.

The main navigation menu shows a 1px white line to the right of the current selection - only in Firefox - only on first load - and clears itself after the mouse hovers over another part of the menu.

I can't figure out if it is an image problem or a CSS problem.

Here's the temporary site: http:// 30bands30hours. kerntechsupport. com (Remove the spaces please!)

  • 3 Contributors
  • 10 Replies
  • 97 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by Fungus1487

Dani AI

Generated

This thread documents a stubborn 1px artifact on the nav tabs. Given ' image-cropping workaround and the focus observations from (with noting different results across machines), the condition is consistent with two common causes: a browser-rendered focus/outline or a rendering seam caused by image edges, inline layout, or fractional-pixel rounding. Both can appear only on first paint and then disappear after a reflow or hover.

Useful diagnostics: open the browser inspector and check the computed box for outline, box-shadow, or border; temporarily disable background images to see if the strip vanishes; test at different zoom/resolutions to reveal subpixel rounding; and switch nav anchors to block-level so adjacent image edges do not rely on inline spacing.

Practical fixes (maintain keyboard accessibility): prefer :focus-visible to hide the visual focus only for non-keyboard interactions, and make nav items block-level to avoid subpixel seams.

/* hide focus for mouse users but keep keyboard focus visible */
:focus:not(:focus-visible) { outline: none; }

:focus-visible { outline: 2px solid #09f; outline-offset: 2px; }

/* avoid inline gaps between tab images */
.nav li { float: left; }
.nav li a { display: block; }

For background-image seams, use a single sprite or CSS border-radius where possible. Modern documentation on focus handling and outline is available from MDN - outline and MDN - :focus-visible.

Recommended Answers

All 10 Replies

Member Avatar for MidiMagic

I think it's a lorem ipsum dolor problem. :icon_mrgreen:

I don't see what you are describing, but I do see a white box around the last selection clicked.

What are you calling the "main navigation menu"?

Member Avatar for gpdrums

The white box would indicate I'm taking a break. LOL I decided to make that div black right when I was calling it a night.

As far as the 1px line is concerned, I have the "HOME" selected. Right when you land on the page, a 1px line appears to the right of the curved box, but only in Firefox. As soon as you hover over something, the line disappears. However, if you scroll down the page then come back up, the 1px line resets.

All that said, I wonder if it is related to wide screen resolution.

Thanks for taking a look anyway.:)

G

Member Avatar for MidiMagic

The white box is supplied by FireFox around the link that would activate if ENTER is pressed. The TAB key moves it to other links.

IE doesn't have that.

Member Avatar for Fungus1487

mine does not show this white line in firefox version

Member Avatar for gpdrums

I attached a screen shot. The funny thing is I have checked for this glitch on no less than 10 different computers.

The navigation is straight CSS / HTML - the line only appears in FireFox on a wide screen monitor.

Dare I throw in the towel? Thing is - this glitch might really be something. We could win an award for discovering and correcting it, right?;)

line.jpg 69.2 KB
Member Avatar for Fungus1487

that must mean my computer is cleverer than everyones :D

see attached photo

(yes this is on page load without pressing anything or focusing.

Untitled-3.png 2.22 KB
Member Avatar for gpdrums

After cropping 1px off the edge of the corresponding tab image, the final straw so far as I'm concerned, I have decided, indeed, your computer is more cleverer.

I think I'll let this one go to rest.
Thanks everyone!

Member Avatar for MidiMagic

I don't see that either.

I have FF too.

Member Avatar for gpdrums

Thank you Midi!

Member Avatar for Fungus1487

I don't see that either.

I have FF too.

we both have clever computers :D

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.