I have a positioning issue with my in ExpressionEngine. On the following link scroll down to the roster section: click here

I am looping the li tags for <ul class="roster-grid"> I have noticed it loops fine on the few row however begins to misalign on the third row onwards. Does any one know what is causing this problem?

<ul class="roster-grid">
{exp:channel:entries channel="roster" dynamic="no" orderby="date" sort="asc"}
                {roster_music limit="1"}
                    <a href="#"><img src="{music_thumb}" alt="music" alt="grid-img"></a>
  • 1
    this is CSS. If you change the width on the LI containing DJ ruckus to 177px everything lines up correctly.
    – CreateSean
    Commented Dec 3, 2012 at 18:30

1 Answer 1


I did noticed that there are a mixture of image sizes in the grid. Some are 178x182, 178x183 & 177x183. This might be causing break in the grid. Try setting a consistant width & height on the images.

Also looks like the .roster-grid isn't quite wide enough. I increased the width by one pixel to 534px and the image jump back. But, this could be do to the inconsistant image dimensions.

  • Perfect!!! Thanks, sorry it's been a long day, my brain is abit scrabbled
    – NewBoy
    Commented Dec 3, 2012 at 18:37

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.