IE7 & 6 don't like the <br>'s inside the li's.. how do I solve this please.. (I might have to do this one with images.. )

I can't set widths for these li's, because the content on all of them is different amount of copy, as you can see (but not sure setting widths would solve the problem); is there a way to solve this problem for IE7 & IE6 please.. thank you very much..

Just because you give the <span> a display:block it doesn't change the fact it is still an inline element. It is block level but not an actual block element. Don't confuse it :). If you're going to use display:block on an inline element to begin with, why not just start it out as a block?

I've given you the answer and the explanation and as far as I can see its working exactly as you requested

Where do you see it going wrong?

When you set display:inline-block on a block element such as the list item then it imparts haslayout on that element.

Then in a separate rule you apply display:inline which does not remove haslayout but makes it an inline element that is in haslayout mode which makes it act exactly as inline-block.

The display:inline rule needs to be in a separate rule or the element never gets a change to obtain haslayout. The display:inline would over-ride the inline-bock rule (which is simply a haslayout trigger in ie7 and under).

Using the code I mentioned above does exactly what you aked for in all browers as far as I can see.

so the spans are display:block now, I've had problems in the past putting 'block' elements inside 'inline' elements.. (sometimes 'block' elements inside 'inline' elements remain 'inline'....) this inline/block stuff can be confusing sometimes.. I had a simliar problem a few weeks ago, only here the <li>'s were stacked, prob was spacing in IE6 (spacing beneath and above <a>'s..)http://www.sitepoint.com/forums/showthread.php?p=4669874#post4669874

Paul O'B, will definitely check your article you mention.. thank you very much to all for your help..