Problems with twentytwelve nav bar in IE8 (8 posts)

  1. leila66
    Posted 3 years ago #

    IE 8 is proving a nightmare with twentytwelve. The latest is that the nav bar flushes all the way left with no padding - see screen shot.

    Website is: http://ccrmediator.com/wp/

    Is there any quick fix that anyone can offer?

    Thank you...

  2. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    I don't see a nightmare.

    You're loading a file named "ie.css" and in that file you have the navigation menu styled with text-align: left;.

  3. Rev. Voodoo
    Posted 3 years ago #

    That's how it looks in IE8 by default. You can see it on my site voodoopress.com

    The big difference being that, by design, the nav menu and bg on 2012 are the same colour so it looks coolio - it only becomes an issue when adding colour to that nav bar

    You might just need to queue up your own IE specific stylesheet from your child theme (since the one bundled with 2012 always loads from parent) to add padding appropriately.

    Are you familiar with enqueuing stylesheets... and doing so conditionally?

  4. Michael
    Forum Moderator
    Posted 3 years ago #

    <smile>I agree - this is really bad that the menu displays the same way in IE8 as it does in FF20 - the way it was designed ;-)</smile>

    quick fix:

    add some formatting like:
    .ie .main-navigation li { margin: 0 20px; }

    this still leaves the same formatting in Firefox and other modern broswers, but that was not the question.

  5. leila66
    Posted 3 years ago #

    Thank you both for replying.

    Andrew - I haven't added in anything to the child style sheet specifying styling for the nav bar in IE. I don't know where that is. And, it has a bit of padding to the left in Firefox, Safari and Chrome.

    Rev. Voodoo - yes, I have done a couple of twentytwelves sites with the white nav, but this client wanted it colored - and I don't run IE at all so I didn't realize it was a problem (I have another client with a colored nav bar and now I am worried about that one). The client, of course, is running IE 8 on his laptop.

    I don't know anything about enqueuing stylesheets, or doing it conditionally. I did copy a little bit of ie CSS I found to fix another IE problem - not sure if that is what you mean?

  6. Rev. Voodoo
    Posted 3 years ago #

    @alchymyth has a much simpler solution

    I was taking the complicated way without looking at things closely! :) The .ie class makes things simple!

  7. leila66
    Posted 3 years ago #

    @alchymyth - thank you.

    I am not seeing the nav bar looking like that in FF or any other browser - it does have some padding at the left. Are you?

  8. Michael
    Forum Moderator
    Posted 3 years ago #

    I checked your site both in IE8 and FF20, and there was no left padding/margin on the menu - this might depend on teh browser screen width; I also see now that you are somehow trying to center the menu (?) which might also have an effect.

    generally, there is also no left padding/margin on the left menu item when you use the default Twenty Twelve as @Rev. Voodoo already mentioned.

    your menu looks good now in IE8 - just a little different from Firefox - but I don't think the average user/viewer will compare browsers...

Topic Closed

This topic has been closed to new replies.

About this Topic