SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why does my navigation bar look so bad in IE

    New Life Christian Center

    It's looks fine in the other browsers

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    It's that spry script I told you to get rid of before

    Looking at the generated DOM in IE I see this.

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

    Code:
                    <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.
    Code:
    #MenuBar li a {
        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. #3
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also where do I find the DOM for IE. I use firebug for firefox but I can't figure it out for IE

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rwest View Post
    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.
    Use the developer tools in IE8/9 (Tools > Developer Tools) then View Source from the panel and select DOM.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •