CSS - IE7 ignoring margin on first list item?

If you go to the first blog item (Mona) and expand it using the '+' icon. The image thumbnails are aligned 24px from the left using a margin. This works in every browser but IE7 which ignores the margin on the first list item.

http://www.dririser开发者_如何学编程.co.uk/index.php

CSS

.artistMeta li {
float: left;
margin: 0 0 24px 24px;
position: relative;
width: 160px;
}

There is a similar question on here but the there was no real answer and I can't use their solution.

Why is ie7 ignoring the left-margin on my first list item (only)?

Any ideas?

just a quick test.. not sure if it will work.. but try adding a display:block on your li and don't use the shorthand for the margin, instead use margin-left and margin-bottom... it seems to me that IE is not refreshing the style of the elements, because when i inspect the elements, the navigator adds the correct margins...

If that doesn't work.. you might want to put the style inside the tag (since you're using JS to add the images), i know it's not elegant, but i guess that could force the navigator to set the style on the li

and if that doesn't work.. then i've no idea what could be wrong =P. I hope this helps...

Good Luck!

The problem IE7 is having here isn't in your CSS file, it's in your javascript in global.js. Specifically the following line ...

$(".artistMeta > li:nth-child(3n+1)").addClass("articleSlideOdd");

As per the convention in CSS, JQuery starts the child count at 1 for nth-child (as in the first child is nth-child(1)), where as, ie7 is expecting it to start at 0. So with ie7 3n+1 matches the 2nd, 5th, 8th item and so on.

Looks like JQuery isn't handling ie7 properly, so you'll need two statements to cover ie7, and everything else.