Main Navigation Menu displaying vertically in IE8

Topics: Writing themes
Nov 9, 2012 at 1:28 PM

Hi - I styled a new theme and was testing it at work in IE8 and the unordered list for the main navigation was displaying vertically instead of horizontally.The on hover was still working.

After digging around for solutions I also see the same behaviour for the orchard documentation page:
http://docs.orchardproject.net/

You can also see the behaviour using:
http://netrenderer.com/index.php

I am just wondering what I did wrong with my new theme?

I had added a div (around the @Display(Model.Body), @Display(Model.Tail)) and stylesheet reference to document.cshtml in my new theme. I found moving this to layout.cshtml solved my problems with viewing in IE8. Firefox and IE9 never had any problems. I started using Orchard 1.4.x and I am currently on 1.5.1.

Nov 13, 2012 at 12:31 AM
Edited Nov 13, 2012 at 12:37 AM

I don't know your markup and style sheets but for docs.orchardproject.net applying float: left; to the li elements would help. If you want to get help with your theme you should add the markup and CSS of your menu.

BTW: on docs.orchardproject.net this happens because the navigation-ul is wrapped in a nav-element. Since IE8 is not aware of a nav-element, it is closed it immediately. Hence the style (float: left;) is not applied to nav#navMain ul li (nav#navMain is closed immediately and ul is not a child of nav#navMain).

Nov 14, 2012 at 10:19 AM

Thanks JasperD for your response. I had a quick look and yes the ul is wrapped in a nav-element for my theme too. I will have to post up what I am doing. Thanks