CSS padding dissapears in IE8/jquery

this is an odd one, that has eaten a lot of hours of my time. Here's a photo since i can only put 1 link: http://www.screencast.com/t/byVmPE6H . Explanations follow.

Basically, what i need to achieve is point 1 in the photo.

Please notice that the left padding is larger than the right one. The initial padding property is:

padding: 12px 15px; (i.e. 12px vertical padding, 15px horizontal).

Then, via jquery, on page load, i set the left padding to some value like so:

$(links[0]).attr("style","padding-left : "+padding+"px;"); (i could've used .css(), the effect and problem remain the same)

This works beautifully in all browsers, you guessed right, except IE. I'm not talking about versions 6 or 7, but only IE 8. So, in IE 8, on page load, i get point 2 from the photo above.

Remember, that happens only on page load. After i go with the pointer over the link (i.e. triggering the mouseover event), the right padding jumps back into place and it looks perfect, just like in the first link (actually that first photo is from IE8!).

Eliminating the jquery line above doesn't trigger the same behavior, the 15px paddings are ok. There's no event handler registered for "mouseover" on the links. There's only this css property for mouseover:

#navigation li.first:hover a{

background: transparent url(../images/menu_on_left.png) left top no-repeat;

}

(i.e. only a background image change, absolutely nothing else)

So, when page loads, if i use jquery to change the left padding, the right one dissapears. On mouse over, the right padding pops back into view. I cannot explain myself why this happens. If i can't find a solution i'm actually thinking of computing the position of all the menu items and arr开发者_如何学Pythonanging them with position: absolute. Sounds really bad, i know.

Can anyone enlighten me please?

I finally solved it, and beware: IE is so dumb, that if you have a list of floated elements, and you change the right padding of the first one, the other don't react by moving right, they just stand there. So what i did was:

1. remove all other menu items (via clone() then remove() unfortunately, i didn't have jquery 1.4 available or i would've used detach(), but it works just fine),

2. change padding via css()

3. re-insert the other menu items. Now they sense the new padding on the first item and are positioned correctly.

Crazy, isn't it? just another IE hate reason for me...

I hope this helps anyone, have a nice day!