The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS LIst Items “stair-step” instead of a straight line

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #35953

    I was following along with videos “Converting a Photoshop Mockup (parts 1,2 and 3)”
    starting here >>

    While working with the list items Chris says to add a float:left; and the vertical list will go horizontal. The list did go somewhat horizontal, but it was more like stair-steps. The highest “step” on the left, then one line down the next “step” etc.

    This gave me such a headache I started a new project with only the list items in it and after adding in the styles it did the stair step thing again.

    So the question is: What causes this “stair-step” effect and how do we avoid/correct it?

    Thanks for your help,


    I’m guessing that you’re seeing this in IE7? The solution is quite simple!

    li {
    display: inline;

    Hi kgscott284 and TheDoc;
    Thank you for your solution(s) to this problem and the link to a site I’ve never seen before. BTW, I’m using IE 9 and FireFox 8.0. Both showed the problem before your suggested solution.

    Now I’m a happy camper and headache is gone.

    I knew the solution was in here somewhere and sure ’nuff it was!!!
    Thanks again,

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.