Forums

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

<style>
navi#top  {
    background-image:  url('background.png');
    background-repeat:  repeat-x;
   background-color: red !important;
background: red;
    margin:  0;
     padding:  0;
    height:  39px;
    position:  relative;
    z-index:  25;
    width: 100%;
}

ul#main-menu  {
    position:  relative;
    padding:  0;
    width:  966px;
    margin:  0 auto;
}
#main-menu > li  {
    float: left;
    list-style: none;
    height:  39px;
    background-image:  url('divider.png');
    background-repeat:  no-repeat;
    background-position:  right;
  color: #666666;
    font-size: 11px;
    font-family:  arial;
}

</style>




HTML Web snippet

<navi id="top">

    <ul id="main-menu">

        <li>
            <a class="tab" href="#">Link</a> 
            <div class="content">
                <a class="viewAll" href="#">Link</a>
                <ul class="column">
                    <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
                </ul>

                <ul class="column borderless">
                    <li><a href="#">Link</a>
                        <ul class="subMenu">
                           <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
                        </ul>
                    </li>
                </ul>

            </div>
        </li>

    </ul>
</nav>

Paulie_D

typo?

    <navi id="top">

     navi#top

Senff

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

Joejacks

Sorry it should say

    <nav id="top">

etc not navi across all the snippet code

Paulie_D

Well fix that and you're set.

HugoGiraudel

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

Joejacks

I have and it still is not working. Is <nav a HTML 5 feature so that means that why it is not working in IE8 and below?

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]

TheDark12

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?

treehouse : what would you like to learn today?

Forums

Background color not showing in IE8? Why??