1px shift is driving me crazy!

[surfbird0713]

Can anyone figure out why the first two navigation items cause a 1 pixel shift to the left on hover?

http://cookware.lecreuset.com/cookwa...0002&langId=-1

It's making me nuts. I know the CSS classes are being applied by JavaScript but everything I've tried to change/remove does not affect it.

[patryk]

border thikness
i was fighting with something very simmilar
sollution: change element's width when applying borders

[aaronhockey_09]

Just remember that the actual width of an element is the sum of its

Width + padding + margins + borders

if you add more padding, make the width smaller.
You add 2px of border - take 2 px off the width

[surfbird0713]

Hmm, there isn't a width applied, but when I apply one, I still see the jump. Plus, it only happens on the first two menu items, not the rest.
Also, I can't set a fixed a width for these list items because they could change - the first item has a class "first" applied to it, but sometimes the first item has 5 characters and others it could have 15...

Could it be anything else?

[aaronhockey_09]

Im actually not seeing any jump
The only thing i can see is a very small gap between the dropdown and the list item itself ( but thats just because of the rounded corner. )

[Custard7A]

I'm only seeing a jump on the first navigation element. Your abundance of inheritance selectors in the related CSS make it rather hard for me to analyze, I can tell I would be there a while trying to link everything together.

Thought I would just say — and considering varied reports on the problem — it might be some default styling on the li, or maybe even the ul element. Y'know, like some tiny padding or something that one or two browsers throw in or mess with, that isn't meshing well with your hover styling. You could try zero-ing out or setting whatever you can think of that might move it.