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

[dustyniche]

Hi;
I was following along with videos “Converting a Photoshop Mockup (parts 1,2 and 3)”
starting here >> https://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/.

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,
DustyNiche

[TheDoc]

I’m guessing that you’re seeing this in IE7? The solution is quite simple! http://haslayout.net/css/Staircase-Bug

li {

display: inline;

}

[dustyniche]

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,
DustyNiche

[Author]

Posts