Menu issue with Magazine Pro and IE7

[ashWhitney]

Hello all

I'd be grateful if anyone could offer some advice on the following please.

I'm trying to get a site working in IE7 (unfortunately !!) using the Magazine Pro theme.

The primary navigation menu is displaying as a vertical list rather than horizontal as shown on the screen capture below, but I can't see how to change it.

IE7 Screen Capture

The menu is arranged correctly horizontally in new versions of IE (like IE9) as shown below.

IE9 Screen Capture

Thank you in advance.

Ash

[songdogtech]

What is the site URL?

[ashWhitney]

I forgot to add the URL sorry. It is:

http://www.onllwyncommunitycouncil.org/

[songdogtech]

That theme loads an IE7 specific style sheet; you're going to have to work with that. IE7 is very old and finicky. If you've made CSS changes in your child theme, you need to work with the CSS.

Developer tools and the console will allow you to see what's loading on your site and how to work with and change the CSS and HTML. Use the built in developer tools in Firefox by right-clicking on the page and going to "Inspect Element"; or use the Firebug add-on with Firefox; or check these links for Chrome or Safari or IE.

[ashWhitney]

Hello songdogtech

Thanks for your reply and advice.

I'd started working on the issue by adding the IE7 specific style sheet, and hope to have a look at the CSS in more detail later today.

I saw the same issue when I looked at the demo of the Magazine Pro theme on the StudioPress site using IE7, so it doesn't seem to be something I've introduced with slight modifications to the stylesheet on my site.

IE7 is indeed finicky as you say.

Regards

Ash

[songdogtech]

Sounds like a support issue you should send to http://my.studiopress.com/help/

[ashWhitney]

Thanks songdogtech for your time and suggestions.

I found a quick solution that I'm posting here as it may be useful to others experiencing the same issue.

In the 'Site Navigation' section of the stylesheet change:

.genesis-nav-menu .menu-item {
display: inline-block;
text-align: left;
}

To:

.genesis-nav-menu .menu-item {
display: inline-block;
text-align: left;
*display: inline;
zoom: 1;
}

Credit to Kapa on StackOverflow for this IE7 display: inline-block; hack

Regards

Ash

[songdogtech]

Good that works. I'd still send that to studiopress as a bug report/fix.

[ashWhitney]

I'd raised a support request with StudioPress and subsequently let them know about the inline-block hack.

I don't think they'd treat it as a bug report/fix though as the support reply I received mentioned that they'd "stopped supporting IE6 and IE7 due to limitations in the system for HTML5 and CSS3" - which is understandable.

[Author]

Posts