0

I have a page which contains a list. I have a button to add a new item to the list. I want to apply JQuery-UI effect to the adding of new item, my problem is when the effect animation is shown, the list item is not styled. See this fiddle - http://jsfiddle.net/Ec3x9/2/.

You can see that when the user clicks on the create button, the animation of the item is displayed, but the list item text is under the icon since the CSS is not applied. I want to show the animation of the list item. How do i do that?

Improve this question
1
  • The css is applied, where is not applied? Commented Aug 7, 2012 at 1:30

2 Answers 2

Reset to default
1

Remove the > character between ul and li in your CSS declarations. What jquery does is wrap your li with a div element before it does the animations. When that happens, the li isn't a direct descendent of ul anymore so your styles aren't being applied during the animation.

Ex: http://jsfiddle.net/Ec3x9/8/

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

No problem, glad it helped you out
0

It looks like the styles don't work properly in IE 7. In FF and Chrome the text is displayed next to the image icon. For IE you can remove the line-height or set it to 0 and it should work.

Give that a go and see if it fixes your problem. However, that will break the styles for FF and Chrome. So you will have to add some smarts to make the design work for IE 7 and Chrome/FF.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.