Making inline-block Work in IE 7

When you want to make a <ul> to list horizontally and to wrap you normally set the style display: inline-block. In IE 7 simply doing this will not make it display correctly. It will just display as one vertical column.

You will need to add the following style attributes that are specific to IE to make the <ul> list horizontally. This will make your <ul> display correctly on every browser. These styles are set in the <li> tags of the <ul>.

<style>

.menu li {
/* All other standard compliant browsers*/
display: inline-block;

/* For IE 7 */
zoom 1;
*display: inline;
}
</style>
Leave a comment

2 Comments.

  1. Did not work for me :sad:

  2. Oh, i tried again adding this towards the bottom of my class and it worked like a charm.

    Thank you so much :grin: