[css-d] List contained within a list (Valid Markup vs Correct Rendering)

[Adriano Castro]

     Hi,

     Please consider the following example:

        + http://dev.adrianocastro.net/help/0006/0006.html
        (CSS is inline, please view source)

     This renders perfectly fine on Mozilla but IE inserts a white 
spaced gap between menu 3 and sub-menu 3.1.

     In order for the markup to validate correcly I have the sub-menu 
items as a ul inside the main li:

<li class="expanded">Menu 3</li>
<li>
     <ul>
         <li class="selected">Sub-Menu 3.1</li>
         <li>Sub-Menu 3.2</li>
         <li>Sub-Menu 3.3</li>
         <li>Sub-Menu 3.4</li>
     </ul>
</li>

     This produces valid markup but causes IE to insert that gap.

     If I remove the containing <li> changing the source code to:

<li class="expanded"><a href="#">Menu 3</a></li>
<ul>
     <li class="selected"><a href="#">Sub-Menu 3.1</a></li>
     <li><a href="#">Sub-Menu 3.2</a></li>
     <li><a href="#">Sub-Menu 3.3</a></li>
     <li><a href="#">Sub-Menu 3.4</a></li>
</ul>
</li>

     IE renders it perfectly but validation fails.

     Any ideas?


     Tks,
     AD

-- 
[EMAIL PROTECTED]
www.adrianocastro.net
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/