Internet Explorer <LI> rendering problem

If you are looking at this post, you are probably already aware of the issues that Internet Explorer (read: EXPLODER) forces developers to deal with when using the <LI> HTML tag to do certain things.  Most all of the dynamic menu systems use this tag, so Internet Explorer is placing a huge hurdle in front of us.

 

It is well documented and well known that Internet Explorer refuses to recognize the closing tag of the <LI> element.  Instead, Internet Explorer decides to continue to treat it as if the tag was never closed (past behavior from when the tag was never closed).

 

If you are using a dynamic menu or listing such as those offered by the likes of SolPart or telerik, you are probably well aware of this problem.  This is especially likely if you have tried any modifications to the rendering or skinning of those controls.

Countless forums threads and blogs suggest adding some CSS to clear up this issue.  For example:

<li style="display: inline;"> 

This did nothing to help me.  I saw absolutely no change in the rendering of the page using this approach.

The only thing that cleared this up for me was to add the following CSS to my stylesheet:

li{
_width: 1px;
}

What this does is tell Internet Explorer to resize the <LI> element to be 1 pixel wide.  However, when anything is in the <LI> element, it will automatically resize to the expected width.  All other browsers ignore the width attribute because of the underscore preceding the width keyword.