Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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;.
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?
<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.
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?
@alchymyth has a much simpler solution
I was taking the complicated way without looking at things closely! 🙂 The .ie class makes things simple!
@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?
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…
