Background color not showing in IE8? Why??

[Joejacks]

Hi

On the following code does anyone have any ideas why the background image and colour is not showing up in IE8, it works fine in IE9, Chrome, Firefox etc

Code Snippets are shown below, it’s really frustrating so I would appreciate any fix for this please

CSS Code Snippet

HTML Web snippet

• Link
  Link

  • Link
  • Link

  • Link

    • Link
    • Link

[Paulie_D]

typo?

navi#top

[Senff]

Yup. <NAVI> is not an HTML element that IE8 understands.

[Joejacks]

Sorry it should say

etc not navi across all the snippet code

[Paulie_D]

Well fix that and you’re set.

[Kitty Giraudel]

By the way: don’t qualify your selectors. Especially when using ID.

[Joejacks]

I have and it still is not working. Is

If this is the case, how can I build in the functionality required so the menu background shows in IE8 and below

[Paulie_D]

Have you linked in the HTML5 Shiv?

I would do that but a quick fix would be to change [nav] to [div]

[Anonymous]

One other thing that might help is clearing the floats you have set on your menu items.

There are a couple methods to do this. First is you add a div with a class of clear (class could be anything really) after the list item just before the closing ul tag (if the menu in generated place before the closing nav tag). Then in your stylesheet add a rule for clear with an attribute of clear both.

.clear { clear: both; }

Another method that has less browser support (does not work in old IE) is to use a pseudo element instead of an extra div to clear.

nav ul:after {
content: “”;
display: table;
clear: both;
}

This may not solve the issue outright however, I would do as Paulie_D suggests and include HTML5Shiv on your page too. Place the following in your head to get HTML5 tag support in old versions of IE.

src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”

EDIT: I just can NOT get the code highlighter working like it should! *grumble*

[Joejacks]

Many thanks the HTML5Shiv did the trick

The only issue I have now is when viewing the menu on iPAD/touch screen tablets when pressing the menu item which fires the mega menu, when pressing the link to open the menu, the mega menu appears briefly but then the resulting page loads so the user is unable to access any of the links in the drop down menu.

Is there a way to stop this or to show an Ipad only menu? or can the nav be adjusted to cater for touch screen tablets?

[Author]

Posts