#1
  1. *Programmer In Training*
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2005
    Location
    SE London
    Posts
    371
    Rep Power
    12

    $(this).animate not working


    http://jsfiddle.net/SubrS/2/

    I have no idea why this isn't working, surely it cannot be because of the inline styling,its only there until I get the animation works then I'll put it into a stylesheet!

    Hope someone can help, I have this working on loads of other sites!

    Thanks in advance.

    Regards,
    Joe.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    It's working fine actually. It's just not working how you expect. You see when you increase the padding on one link, it increases the width of the parent and it's parent, etc. on up to the fixed positioned element. The other links also grow to the new width of their ancestors.

    Why do you have a <div> as a parent of each link? I suggest you remove them and move the background color from the <li>s to the <a>s.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. *Programmer In Training*
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2005
    Location
    SE London
    Posts
    371
    Rep Power
    12
    Ah ok, I see how it's working now, so it's the position:fixed; that could be causing this issue? The reason I ask is because I've used this same technique on other websites, and they've worked as intended.

    http://jsfiddle.net/SubrS/19/

    The above code is how you explained, but the same problem exists?

    Thanks for your help of understanding the problem mate!
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    You're welcome.

    so it's the position:fixed; that could be causing this issue?
    Not quite. It's the shrink-wrapping nature of the fixed positioning that's causing it.

    The above code is how you explained, but the same problem exists?
    The background color is still on the <li>s. However, you'll need to make another change as well. I suggest you give the <a>s a right margin and then decrease it when you increase the padding.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. *Programmer In Training*
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2005
    Location
    SE London
    Posts
    371
    Rep Power
    12
    I see - wow, I've done a million sites and not once have I come across this issue before! Shows that no matter how many years you've developed websites, you can always be surprised by something so .. simple in the end!

IMN logo majestic logo threadwatch logo seochat tools logo