Treehouse: Grow your CSS skills. Land your dream job.

Help with IE Issues in Nav Menu

  • # December 15, 2011 at 7:14 am

    Hi all,

    Just wondering if you can help. I’ve been working on a simple nav menu which can be found here

    The problem I am having is that the menu doesn’t display properly in IE. In IE 6 I’m getting double margin bug, and in IE9 the menu is falling victim of the guillotine bug, where the floated elements are being cut off at the bottom of the sprites.

    Can anyone help me resolve these issues? I’ve included the code below.



    # December 15, 2011 at 9:42 am

    You might want to put the code in a valid HTML document first (including doctype, header, body, etc.) and make sure it validates. There is also an extra right after your that doesn’t belong there.
    As long as your code won’t validate properly, correct display in IE6 is not very likely.

    # December 15, 2011 at 11:21 am

    Thanks for pointing out the extra . However I’ve tried this and it doesn’t work. You’re right, I should have put this code in an a html doc first, but as I will be pasting this code into a CMS it needs to work as a standalone piece of code.

    Anymore suggestions?

    # December 15, 2011 at 11:27 am

    If I put this code in a valid HTML document, I get the same results in every browser:

    If your code/site has problems with certain browsers, it may also be due to other code (not the code you pasted above), which is why I’d have to see a live example in context to see why things break for you.

    # December 15, 2011 at 11:53 am

    Hi Senff,

    You can see it in the following link Your text to link…. You’re right, it probably is some other code that is affecting it, as CMS can often get quite messy. When I view this page in IE6 and 9 it does not display correctly.



    # December 15, 2011 at 1:08 pm

    The menu items (images) are cut off in IE because of the following rule in your schools.css stylesheet:

    #bull ul {
    list-style: disc outside none;

    This is overiding this one:

    ul.opportunities_menu {
    list-style: none outside none;

    . Easiest way to fix this is to add #bull in front of that:

    #bull ul.opportunities_menu

    As for IE6 — I think removing that extra may solve a lot, but not entirely sure unless you try.

    # December 16, 2011 at 3:52 am

    Great stuff. Thanks a lot for your help.


    # December 16, 2011 at 4:08 am

    Hi Senff,

    I can’t find the exact code you’re referring to in schools.css. Is it this piece of code that you mean?

    #bull ul {padding:0px 0px 11px 0px;
    padding-left: 1.2em;

    As for

    #bull ul.opportunities_menu

    Am I adding this into the nav menu itself, or into schools.css?

    # December 16, 2011 at 6:59 am

    Yes, that was the code I meant (I didn’t want to clutter it up so I originally only referred to the relevant property).

    For your second question: the first line of the code you provided at the top of this thread, that’s where it says ul.opportunities_menu. Just place a #bull in front of that.

    If you want to be more consistent, you can place #bull in front of all those UL’s, but that won’t have any effect on this particular problem, which should be solved if you only add it to the first line.

    # December 16, 2011 at 10:46 am

    Thanks, worked a treat.


Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.