CODEWITHSUNDEEP
jquerycssinternet-explorer-7css-selectors
Sam Stephenson
Sam Stephenson

Reputation: 11

jQuery: nth-child selector not working in ie7

So I've got a grid of divs, not all equal heights and I need them all to line up properly. I've used the nth-child jQuery selector (see below) to select the first div of each row and apply a clear:both style to it. This works in ie8 and up as well as chrome and safari however in ie7 it just ignores the nth-child bit and therefore doesn't apply my css.

I used jQuery over css3 so that it would work in ie7 - so am slighty baffled by the fact it's not..

See the html for yourself at http://jackbeck.co.uk/?portfolio=courses

jQuery code in header: 

<script type="text/javascript">
    jQuery(document).ready(function($){
        $('.project.small:nth-child(4n+1)').css("clear", "both");
    });
</script>'

Anyone able to help?

Upvotes: 1

Views: 5002

Answers (3)

Ayman Safadi
Ayman Safadi

Reputation: 11552

Your jQuery doesn't work because you're using $ instead of jQuery (it's a WordPress thing). Try this:

<script type="text/javascript">
    jQuery(document).ready(function($){
        jQuery('.project.small:nth-child(4n+1)').css("clear", "both");
    });
</script>

The jQuery selector itself does, in fact, work in IE7. That's not your issue. Your issue has more to do with CSS.

Upvotes: 1

sandeep
sandeep

Reputation: 92803

YES; IE8 & below is not support nth-child pseudo selector. But if you want IE support than you have to use http://selectivizr.com/ js for this.

Upvotes: 3

Dennis Traub
Dennis Traub

Reputation: 51634

Unfortunately IE7 doesn't support the nth-child selector.

Upvotes: 0

Related Questions