css - How to remove very thin light and dark edges on navigation bar -

one of clients noticed thin light line , thin dark line in active link on navigation bar. it's barely noticeable, it's there. i've tried tweaking css, since lines less pixel wide, i'm not sure it's css.

here's url: http://www.abqlibraryfoundation.org

if @ "home" link in navigation bar, you'll see active page, it's rusty orange color , has thin light edge on left side. right side has dark thin edge in between orange , turquoise colors.

does know what's causing this?

it's because of sub-pixel artifacts.

it used constructively nowadays smooth text. because screen composed of red, green , blue sub-pixels, disposed in vertical orientation. note actual order may differ on screens.

rgb|rgb|rgb ---+---+--- rgb|rgb|rgb ---+---+--- rgb|rgb|rgb 

this means in navigation bar have disposition following:

blue       |    red    |   blue ---+---+---+---+---+---+---+---   b|  b|  b|r  |r  |r  |  b|  b ---+---+---+---+---+---+---+---   b|  b|  b|r  |r  |r  |  b|  b            ^           ^            |           artifact caused sub-pixels being far away (darker line)            |            artifact caused vicinity of sub-pixels (lighter line) 

i have created image illustrating typical pixel disposition in lcd screen (rgb):

you can see how on first transition, when changing blue orange, there green subpixel followed blue , red one, relatively close each other. our eye perceives white.

on right (the second transition orange blue), shows gap giving illusion of dark color.

a note on mobile devices

since webpages on mobile devices scaled, effect far less noticeable (due image resampling). anouther aspect consider orientation of screen can changed, , possibly creating artifacts in different directions.

if interested in how effects leveraged render smooth text, can continue reading following article on wikipedia: wikipedia

this how screen work nowadays, nothing can (without changing design)