Alignment of unordered list "symbol"

Question

You can check the problem here: http://jsfiddle.net/gkJAd/4/

I have an unordered list in where every li will have a max-height of 2.25em (I want it to be at most 2 lines). The list-type should show normally, on the outside, aligned on the first line. I tried a few things all with its on issues:

• If I add the hidden, height, etc, codes to the li instead of the a, the disc disappears;
• If I change the a to be display: block instead of display: inline-block, it shows correctly on Firefox but wrongly everywhere else;
• If I change the a to be display: inline it puts the disc at the right place, but, since it is not longer a block, the height is ignored. Anyone got an solution?

Sol

Answer 1

All you need to do is add vertical-align: top to your ul li a selector code.

Updated JSFiddle. Working in FF, Chrome, and IE8/9.

Answer 2

I think this is what you want.

Basically, I floated and then cleared the lis.

Then I gave the ul li as a display:inline-block and a height and made sure to use vertical-align:top;

ul{
    margin: 5px 10px 5px 20px; 
    background:green; 
    height:250px;
}

ul li{
    list-style-type:disc;
    float:left;
    clear:both;
} 

ul li a{
    background:green; 
    line-height:1.25em; 
    overflow: hidden;
    display:inline-block;
    height:2.25em;
    vertical-align:top;
}

Example: http://jsfiddle.net/jasongennaro/gkJAd/6/

Tested and works in Chrome and FF

Answer 3

I played with this a bit, but it basically comes down to that overflow: hidden will hide the list markers as well. Here's what I came up with: http://jsfiddle.net/N3JGg/

Basically used the display type of list-item, then instead of declaring the discs on the outside, pulled them into the box with inside so the overflow wouldn't hide them. It doesn't give you the same, nice line that you had before, but you've got the markers displaying now.