Home/ Questions/Q 8160977
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T18:23:55+00:00

I have an unordered list whose list items are displaying inline. However, its layout

  • 0

I have an unordered list whose list items are displaying inline. However, its layout is rather complicated, so let me show you the Fiddle:

Notice how the unordered list items stretch to the height of the tallest list item, using the display: table-cell property (except for the first list item). This allows the first list item to have a vertical line extend the entire height of the unordered list, with the letter “A” vertically aligned to the top.

This presentation works excellent in most browsers, with the notable exception of Internet Explorer 8[1], of course. Here are some screenshots, in case you don’t have IE8:

Any ideas what I can do to keep the same look as you see in Chrome (or any other browser other than IE1-IE8)?

Thank you for your time.

[1] What have we ever done to you IE8 that you hate us so???

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Unfortunately, IE doesn’t render the table-cell property, so you have to resort to various hacks. Fortunately, this one works pretty well.

    ul li {
    display: inline-block;
    *display:inline;
    zoom: 1;
    height: 100%;
    max-width: 130px;
    min-width: 130px;
    padding: 0px 0px 0px 15px;
    vertical-align: bottom;
}

    This will allow the elements to align in an inline-block fashion in IE, giving you cross-browser inline elements.

    • 0