<li> elements break in IE7

[pesho318i]

Hi all,

I have the following list in my page:

Code: Select all

<ul class="links">
    <li><a>...</a></li>
    <li><a>...</a></li>
    .....

</ul>

My css is the following:
--------------------------

Code: Select all

ul.links{
    width:198px;
}
ul li{
    margin:0 9px 0 0;
    display:inline;
    list-style:none;
}
ul li a{
    text-decoration:none;
    margin:0;
}

initially, it displays fine in IE, but after I dynamically refresh it (using an AJAX call),
the <li> items spread out in one line only and go beyond the specified <ul> width.

Please give me a hint on what the problem could be.

Thanks!

[Rob]

Can you try this CSS:-

Code: Select all

ul.links{
    width:198px!important;
}
ul li{
    margin:0 9px 0 0;
    float:left;
    list-style:none; 
}
ul li a{
    text-decoration:none;
    margin:0;
}

Should this not work, try putting the ul element into a sized container.

hth