Right, I’m currently making a site, and for my navigation I would like to have a hover effect to give the user some feedback. My current method seems to work in webkit based browsers, but not in any others. I am using JQuery to do so, but I know it isn’t a JQuery problem, and so I’m sure it’s to do with the way in which Firefox and IE treat padding. Here is my code:
Code:
$(“li.nav-item”).hover(function(){ $(this).animate({ “padding-top”:”20px” }, 100) }, function(){ $(this).animate({ “padding-top”:”10px” }, 100) });
I have tested the hover code by using alert boxes and I am sure that it works. Here is the URL of the sit: http://urbanmandesign.com/pk – as you can see if you are using Firefox for example it just doesn’t work! So basically what I’m looking for is the correct way to manipulate my CSS so that it works across all browsers.