Why does my navigation bar look so bad in IE

HTML & CSS
1

New Life Christian Center

It’s looks fine in the other browsers

2

It’s that spry script I told you to get rid of before :slight_smile:

Looking at the generated DOM in IE I see this.


<DIV class="MenuItemContainer">
<A class="MenuItem MenuItemWithSubMenu MenuItemFirst" href="file:///C:/Documents%20and%20Settings/User/My%20Documents/websites/testing2/index.html" spryEventListenerID="e1"><SPAN class="MenuItemLabel">Home</SPAN></A>
<DIV class="SubMenu MenuLevel1">
    <DIV class="SubMenuView">
        <DIV class="MenuItemContainer"> <A class="MenuItem MenuItemFirst" href="file:///C:/Documents%20and%20Settings/User/My%20Documents/websites/testing2/whoweare.html" spryEventListenerID="e4"><SPAN class="MenuItemLabel">Who We Are</SPAN></A> </DIV>
        <DIV class="MenuItemContainer"> <A class="MenuItem" href="file:///C:/Documents%20and%20Settings/User/My%20Documents/websites/testing2/pastor.html" spryEventListenerID="e7"><SPAN class="MenuItemLabel">Meet the Pastor</SPAN></A> </DIV>
        <DIV class="MenuItemContainer"> <A class="MenuItem" href="file:///C:/Documents%20and%20Settings/User/My%20Documents/websites/testing2/vision.html" spryEventListenerID="e10"><SPAN class="MenuItemLabel">Vision and Mission</SPAN></A> </DIV>
        <DIV class="MenuItemContainer"> <A class="MenuItem" href="file:///C:/Documents%20and%20Settings/User/My%20Documents/websites/testing2/values.html" spryEventListenerID="e13"><SPAN class="MenuItemLabel">Our Values</SPAN></A> </DIV>
        <DIV class="MenuItemContainer"> <A class="MenuItem" href="file:///C:/Documents%20and%20Settings/User/My%20Documents/websites/testing2/faith.html" spryEventListenerID="e16"><SPAN class="MenuItemLabel">Statement of Faith</SPAN></A> </DIV>
        <DIV class="MenuItemContainer"> <A class="MenuItem" href="file:///C:/Documents%20and%20Settings/User/My%20Documents/websites/testing2/future.html" spryEventListenerID="e19"><SPAN class="MenuItemLabel">Where we are going</SPAN></A> </DIV>
        <DIV class="MenuItemContainer"> <A class="MenuItem MenuItemLast" title="Christian and Missionary Alliance" href="http://www.cmalliance.org/" target="_new" spryEventListenerID="e22"><SPAN class="MenuItemLabel">C&amp;MA</SPAN></A> </DIV>
    </DIV>
</DIV>
</DIV>

There doesn’t seem to be any uls or lists in there so the styling misses it all.

In Firefox the DOM looks like this:


                <li class="MenuItemContainer"><a tabindex="0" class="MenuItem MenuItemWithSubMenu MenuItemFirst" href="index.html"><span class="MenuItemLabel">Home</span></a>
                    <div class="SubMenu MenuLevel1">
                        <ul class="SubMenuView">
                            <li class="MenuItemContainer"><a tabindex="-1" class="MenuItem MenuItemFirst" href="whoweare.html"><span class="MenuItemLabel">Who We Are</span></a></li>
                            <li class="MenuItemContainer"><a tabindex="-1" class="MenuItem" href="pastor.html"><span class="MenuItemLabel">Meet the Pastor</span></a></li>
                            <li class="MenuItemContainer"><a tabindex="-1" class="MenuItem" href="vision.html"><span class="MenuItemLabel">Vision and Mission</span></a></li>
                            <li class="MenuItemContainer"><a tabindex="-1" class="MenuItem" href="values.html"><span class="MenuItemLabel">Our Values</span></a></li>
                            <li class="MenuItemContainer"><a tabindex="-1" class="MenuItem" href="faith.html"><span class="MenuItemLabel">Statement of Faith</span></a></li>
                            <li class="MenuItemContainer"><a tabindex="-1" class="MenuItem" href="future.html"><span class="MenuItemLabel">Where we are going</span></a></li>
                            <li class="MenuItemContainer"><a tabindex="-1" class="MenuItem MenuItemLast" href="http://www.cmalliance.org/" title="Christian and Missionary Alliance" target="_new"><span class="MenuItemLabel">C&amp;MA</span></a></li>
                        </ul>
                    </div>
                </li>

That means you’d need to change the css to match the classnames rather than elements.

e.g.


[B]#MenuBar li a {[/B]
    padding-top: 6px;
    /* [disabled]padding-right: 10px; */
    padding-bottom: 6px;
    padding-left: 20px;
    background-image: url(http://www.nlccenter.com/Pictures/ArrowMenuDown.gif);
    background-repeat: no-repeat;
    background-position: 10px 10px;display:block
}

#MenuBar li a won’'t be found in IE so you would need to say:

#MenuBar .MenuItemContainer a {

You’d need to do the same for any other lists or uls that were mention by element rather than classname (if possible).I don’t know why IE gets a different DOM but it may be a bug somewhere as that seems very strange to me.

3

well I will never use this menu again for sure. Does that include the element “a” do I need to change it to .MenuItemLabel or .MenuItem? This was the reason I didn’t go about messing with it because I couldn’t figure it out.

4

Also where do I find the DOM for IE. I use firebug for firefox but I can’t figure it out for IE

5

changing the “li” to “.MenuItemContainer” took care of it. Thank you very much. Would still be interested in knowing how to find the DOM in IE.

6

Use the developer tools in IE8/9 (Tools > Developer Tools) then View Source from the panel and select DOM.:slight_smile: