Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2012
    Location
    South Carolina
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    1px shift is driving me crazy!

    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.

  • #2
    Regular Coder patryk's Avatar
    Join Date
    Oct 2012
    Location
    /dev/couch
    Posts
    398
    Thanks
    2
    Thanked 64 Times in 64 Posts
    border thikness
    i was fighting with something very simmilar
    sollution: change element's width when applying borders
    Last edited by patryk; 10-18-2012 at 11:06 PM.

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Posts
    414
    Thanks
    22
    Thanked 55 Times in 55 Posts
    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

  • #4
    New Coder
    Join Date
    Jun 2012
    Location
    South Carolina
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #5
    Regular Coder
    Join Date
    Dec 2010
    Posts
    414
    Thanks
    22
    Thanked 55 Times in 55 Posts
    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. )

  • #6
    Regular Coder Custard7A's Avatar
    Join Date
    Jul 2010
    Location
    Australia
    Posts
    286
    Thanks
    32
    Thanked 33 Times in 33 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •