<li> elements break in IE7

pesho318i · #1 Mar 4th, 2008, 14:13

Hi all,

I have the following list in my page:

<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 · #2 Mar 4th, 2008, 16:17

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Easter break	unitedcraig	Webforumz Cafe	6	Mar 19th, 2008 12:19
We need you to break this tie -- Vote Now!	Marc	Entry, Nominations and Voting	13	Jan 30th, 2008 14:42
break tag	milly	Web Page Design	36	Jul 10th, 2007 12:54
Line Break	DregondRahl	Web Page Design	6	Jun 12th, 2007 15:33

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
<li> elements break in IE7