title: How can I fix UI items not appearing in IE 7?
body: <p>I am working on the design for a web site, and I am having trouble with what seems to be a IE7 related problem when building my navigation bar.</p>
  
  <p>This is the issue I get : 
  <img src="https://i.stack.imgur.com/Suy5c.png" alt="issues in IE7"></p>
  
  <p>You can notice that some of the menu items are not showing. </p>
  
  <p>I <a href="http://jsfiddle.net/vKtHH/6/" rel="nofollow noreferrer">created a Fiddle</a> for it. (not sure it helps in IE7 , though :-/, so I also made a skeletton where the same problem happens : <a href="http://www.2shared.com/document/CnE73zTD/mypage.html" rel="nofollow noreferrer">here it is</a> )</p>
  
  <p>The menu has this structure :</p>
  
  <pre><code>&lt;nav&gt;
  &lt;h3&gt;Navigation header 1&lt;/h3&gt;
      &lt;h4&gt;Navigation header level2&lt;/h4&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a&gt;my link 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt;my link 2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;h4&gt;Navigation header level2&lt;/h4&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a&gt;my link 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt;my link 2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
  &lt;h3&gt;Navigation header 2&lt;/h3&gt;
      &lt;h4&gt;Navigation header level2&lt;/h4&gt;
          &lt;ul&gt;
              ...
          &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I am using Jquery UI CSS Framework to make it skinnable, so the generated HTML for this page is the following (using classes form jQuery UI and icons) :</p>
  
  <pre><code>&lt;nav class="company-ui-nav ui-widget ui-helper-reset ui-corner-all ui-widget-content"&gt;
      &lt;h3 class="ui-corner-top ui-widget-header"&gt;Examples&lt;/h3&gt;
      &lt;h4 class="first ui-state-default ui-button-text ui-state-highlight"&gt;&lt;span class="ui-icon ui-icon-triangle-1-s"&gt;&lt;/span&gt;Default styles&lt;/h4&gt;
      &lt;ul style="display: block;"&gt;
          &lt;li class="ui-state-default ui-priority-secondary no-border-top ui-state-highlight"&gt;
              &lt;span class="ui-icon ui-icon-arrowreturn-1-e"&gt;&lt;/span&gt;&lt;a href="/Examples/Contents" class="on"&gt;Page contents&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="ui-state-default ui-priority-secondary no-border-top"&gt;
              &lt;span class="ui-icon ui-icon-arrowreturn-1-e"&gt;&lt;/span&gt;&lt;a href="/Examples/Forms"&gt;Forms&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="ui-state-default ui-priority-secondary no-border-top"&gt;
              &lt;span class="ui-icon ui-icon-arrowreturn-1-e"&gt;&lt;/span&gt;&lt;a href="/Examples/Buttons"&gt;Buttons&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom"&gt;
              &lt;span class="ui-icon ui-icon-arrowreturn-1-e"&gt;&lt;/span&gt;&lt;a href="/Examples/Validation"&gt;Validation&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;h4 class="ui-state-default ui-button-text"&gt;&lt;span class="ui-icon-triangle-1-e ui-icon"&gt;&lt;/span&gt;JS related&lt;/h4&gt;
      &lt;ul style="display: none;"&gt;
          &lt;li class="ui-state-default ui-priority-secondary no-border-top"&gt;
              &lt;span class="ui-icon ui-icon-arrowreturn-1-e"&gt;&lt;/span&gt;&lt;a href="/Examples/Widgets"&gt;Widgets&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom"&gt;
              &lt;span class="ui-icon ui-icon-arrowreturn-1-e"&gt;&lt;/span&gt;&lt;a href="#"&gt;????&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;h3 class="ui-widget-header no-border-top"&gt;Navigation h3&lt;/h3&gt;
              &lt;h4 class="first ui-state-default ui-button-text"&gt;&lt;span class="ui-icon-triangle-1-e ui-icon"&gt;&lt;/span&gt;Tests navi 0&lt;/h4&gt;
              &lt;ul style="display: none;"&gt;
                  &lt;li class="ui-state-default ui-priority-secondary no-border-top"&gt;
                      &lt;span class="ui-icon ui-icon-arrowreturn-1-e"&gt;&lt;/span&gt;&lt;a href="#"&gt;Sous-niveau 0.0&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="ui-state-default ui-priority-secondary no-border-top"&gt;
                      &lt;span class="ui-icon ui-icon-arrowreturn-1-e"&gt;&lt;/span&gt;&lt;a href="#"&gt;Sous-niveau 0.1&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom"&gt;
                      &lt;span class="ui-icon ui-icon-arrowreturn-1-e"&gt;&lt;/span&gt;&lt;a href="#"&gt;Sous-niveau 0.2&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;h4 class="ui-state-default ui-button-text no-border-top"&gt;&lt;span class="ui-icon-triangle-1-e ui-icon"&gt;&lt;/span&gt;Tests navi 1&lt;/h4&gt;
              &lt;ul style="display: none;"&gt;
                  &lt;li class="ui-state-default ui-priority-secondary no-border-top"&gt;
                      &lt;span class="ui-icon ui-icon-arrowreturn-1-e"&gt;&lt;/span&gt;&lt;a href="#"&gt;Sous-niveau 1.0&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="ui-state-default ui-priority-secondary no-border-top"&gt;
                      &lt;span class="ui-icon ui-icon-arrowreturn-1-e"&gt;&lt;/span&gt;&lt;a href="#"&gt;Sous-niveau 1.1&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom"&gt;
                      &lt;span class="ui-icon ui-icon-arrowreturn-1-e"&gt;&lt;/span&gt;&lt;a href="#"&gt;Sous-niveau 1.2&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;h4 class="ui-state-default ui-button-text no-border-top"&gt;&lt;span class="ui-icon-triangle-1-e ui-icon"&gt;&lt;/span&gt;Tests navi 2&lt;/h4&gt;
              &lt;ul style="display: none;"&gt;
                  &lt;li class="ui-state-default ui-priority-secondary no-border-top"&gt;
                      &lt;span class="ui-icon ui-icon-arrowreturn-1-e"&gt;&lt;/span&gt;&lt;a href="#"&gt;Sous-niveau 2.0&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="ui-state-default ui-priority-secondary no-border-top"&gt;
                      &lt;span class="ui-icon ui-icon-arrowreturn-1-e"&gt;&lt;/span&gt;&lt;a href="#"&gt;Sous-niveau 2.1&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom"&gt;
                      &lt;span class="ui-icon ui-icon-arrowreturn-1-e"&gt;&lt;/span&gt;&lt;a href="#"&gt;Sous-niveau 2.2&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;h3 class="ui-widget-header no-border-top"&gt;Another title&lt;/h3&gt;
              &lt;h4 class="first ui-state-default ui-button-text"&gt;&lt;span class="ui-icon-triangle-1-e ui-icon"&gt;&lt;/span&gt;Tests 0&lt;/h4&gt;
              &lt;ul style="display: none;"&gt;
                  &lt;li class="ui-state-default ui-priority-secondary no-border-top"&gt;
                      &lt;span class="ui-icon ui-icon-arrowreturn-1-e"&gt;&lt;/span&gt;&lt;a href="#"&gt;Sous-niveau 0.0&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="ui-state-default ui-priority-secondary no-border-top"&gt;
                      &lt;span class="ui-icon ui-icon-arrowreturn-1-e"&gt;&lt;/span&gt;&lt;a href="#"&gt;Sous-niveau 0.1&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom"&gt;
                      &lt;span class="ui-icon ui-icon-arrowreturn-1-e"&gt;&lt;/span&gt;&lt;a href="#"&gt;Sous-niveau 0.2&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;                
              &lt;h4 class="ui-state-default ui-button-text no-border-top"&gt;&lt;span class="ui-icon-triangle-1-e ui-icon"&gt;&lt;/span&gt;Tests 1&lt;/h4&gt;
              &lt;ul style="display: none;"&gt;
                  &lt;li class="ui-state-default ui-priority-secondary no-border-top"&gt;
                      &lt;span class="ui-icon ui-icon-arrowreturn-1-e"&gt;&lt;/span&gt;&lt;a href="#"&gt;Sous-niveau 1.0&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="ui-state-default ui-priority-secondary no-border-top"&gt;
                      &lt;span class="ui-icon ui-icon-arrowreturn-1-e"&gt;&lt;/span&gt;&lt;a href="#"&gt;Sous-niveau 1.1&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom"&gt;
                      &lt;span class="ui-icon ui-icon-arrowreturn-1-e"&gt;&lt;/span&gt;&lt;a href="#"&gt;Sous-niveau 1.2&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;                          
      &lt;/nav&gt;
  </code></pre>
  
  <p>Any clue about what might cause this ? I suspect a CSS-related problem...</p>