Question

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.

This is the issue I get :

You can notice that some of the menu items are not showing.

I created a Fiddle for it. (not sure it helps in IE7 , though :-/, so I also made a skeletton where the same problem happens : here it is )

The menu has this structure :

<nav>
<h3>Navigation header 1</h3>
    <h4>Navigation header level2</h4>
        <ul>
            <li><a>my link 1</a></li>
            <li><a>my link 2</a></li>
        </ul>
    <h4>Navigation header level2</h4>
        <ul>
            <li><a>my link 1</a></li>
            <li><a>my link 2</a></li>
        </ul>

<h3>Navigation header 2</h3>
    <h4>Navigation header level2</h4>
        <ul>
            ...
        </ul>
</nav>

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) :

<nav class="company-ui-nav ui-widget ui-helper-reset ui-corner-all ui-widget-content">
    <h3 class="ui-corner-top ui-widget-header">Examples</h3>
    <h4 class="first ui-state-default ui-button-text ui-state-highlight"><span class="ui-icon ui-icon-triangle-1-s"></span>Default styles</h4>
    <ul style="display: block;">
        <li class="ui-state-default ui-priority-secondary no-border-top ui-state-highlight">
            <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="/Examples/Contents" class="on">Page contents</a>
        </li>
        <li class="ui-state-default ui-priority-secondary no-border-top">
            <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="/Examples/Forms">Forms</a>
        </li>
        <li class="ui-state-default ui-priority-secondary no-border-top">
            <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="/Examples/Buttons">Buttons</a>
        </li>
        <li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom">
            <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="/Examples/Validation">Validation</a>
        </li>
    </ul>
    <h4 class="ui-state-default ui-button-text"><span class="ui-icon-triangle-1-e ui-icon"></span>JS related</h4>
    <ul style="display: none;">
        <li class="ui-state-default ui-priority-secondary no-border-top">
            <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="/Examples/Widgets">Widgets</a>
        </li>
        <li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom">
            <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">????</a>
        </li>
    </ul>
    <h3 class="ui-widget-header no-border-top">Navigation h3</h3>
            <h4 class="first ui-state-default ui-button-text"><span class="ui-icon-triangle-1-e ui-icon"></span>Tests navi 0</h4>
            <ul style="display: none;">
                <li class="ui-state-default ui-priority-secondary no-border-top">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 0.0</a>
                </li>
                <li class="ui-state-default ui-priority-secondary no-border-top">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 0.1</a>
                </li>
                <li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 0.2</a>
                </li>
            </ul>
            <h4 class="ui-state-default ui-button-text no-border-top"><span class="ui-icon-triangle-1-e ui-icon"></span>Tests navi 1</h4>
            <ul style="display: none;">
                <li class="ui-state-default ui-priority-secondary no-border-top">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 1.0</a>
                </li>
                <li class="ui-state-default ui-priority-secondary no-border-top">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 1.1</a>
                </li>
                <li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 1.2</a>
                </li>
            </ul>
            <h4 class="ui-state-default ui-button-text no-border-top"><span class="ui-icon-triangle-1-e ui-icon"></span>Tests navi 2</h4>
            <ul style="display: none;">
                <li class="ui-state-default ui-priority-secondary no-border-top">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 2.0</a>
                </li>
                <li class="ui-state-default ui-priority-secondary no-border-top">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 2.1</a>
                </li>
                <li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 2.2</a>
                </li>
            </ul>
        <h3 class="ui-widget-header no-border-top">Another title</h3>
            <h4 class="first ui-state-default ui-button-text"><span class="ui-icon-triangle-1-e ui-icon"></span>Tests 0</h4>
            <ul style="display: none;">
                <li class="ui-state-default ui-priority-secondary no-border-top">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 0.0</a>
                </li>
                <li class="ui-state-default ui-priority-secondary no-border-top">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 0.1</a>
                </li>
                <li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 0.2</a>
                </li>
            </ul>                
            <h4 class="ui-state-default ui-button-text no-border-top"><span class="ui-icon-triangle-1-e ui-icon"></span>Tests 1</h4>
            <ul style="display: none;">
                <li class="ui-state-default ui-priority-secondary no-border-top">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 1.0</a>
                </li>
                <li class="ui-state-default ui-priority-secondary no-border-top">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 1.1</a>
                </li>
                <li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 1.2</a>
                </li>
            </ul>                          
    </nav>

Any clue about what might cause this ? I suspect a CSS-related problem…

Answer 1

This seems to be a hasLayout issue. You have used display:inline-block; for the positioning of the arrows to the left of the navigation text for those items that don’t appear. IE7 doesn’t support (or supports it badly, I can’t remember which) inline-block so you need to either change this to something else, like the absolute positioning you have for the menu items you have that do appear, or introduce a “fix” for it, some of which can be found here – http://www.brunildo.org/test/InlineBlockLayout.html.