IE Compatibility Issue

[aidank]

Hi Guys,

I am new to this SW and I have (with the help of some of this forum's experts) developed a left navigation that displays background images for a links status - default, active, hover etc. The code works perfectly in Firefox but I can't get it to work correctly in IE.

If you view my test site in Firefox & IE you will see the difference - http://www.naomhmearnog.ie/index.php

Basically IE is not picking up the main menu bkg images and instead displaying the sub menu bkg images. Similarly when you click on a sub menu link it doesn't display the default sub menu active bkg image.

I feel it is only something small I'm missing because it works fine in Firefox and the hover option works perfectly in both IE and Firefox. I have attached my code below.

Any help really appreciated as I have been trying to fix this issue for ages and it is driving me mad!!

Aidan


#primary-nav li, #primary-nav li.menuparent {
  background-color: #000000; /* Default Bkg colour for the link blocks*/
  min-height:1em; /* Fixes IE7 bug*/
  background-image: url(uploads/images/static_bkg.gif); /* Main Menu -  Default Link Bkg Image  */
  background-position: left;
  background-repeat: no-repeat;
}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive {
  background-color: #F6B30A; /* changed the active colour from C7C7C7 to F6B30A*/
  background-image: url(uploads/images/active_bkg2.gif); /* Main Menu - Active Link Bkg Image  */
  background-position: left;
  background-repeat: no-repeat;
}


#primary-nav li.menuparent.menuactive,
#primary-nav li.menuparenth.menuactive {
  background-color: #F6B30A; /* changed the active colour from C7C7C7 to F6B30A*/
  background-image: url(uploads/images/sub_menu.gif); /* Sub Menu - Active Bkg Image  */
  background-position: left;
  background-repeat: no-repeat;
}

/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav li.menuparent,
#primary-nav li.menuparenth
{
  background-image: url(uploads/images/sub_menu2.gif); /*Sub Menu - Default Bkg Image */
  background-position: left;
  background-repeat: no-repeat;
}

#primary-nav li.menuparent:hover,
#primary-nav li.menuparenth{ /*I removed the :hover from the code*/
  background-image: url(uploads/images/sub_menu1.gif); /* Sub Menu - Hover Bkg Image */
  background-position: left;
  background-repeat: no-repeat;
}


/* Styling the apperance of menu items on hover */
#primary-nav li:hover,
#primary-nav li.menuh,
/*#primary-nav li.menuparenth, */
#primary-nav li.menuactiveh {
  background-color: #645B5B; /* changed the hover link colour from E7AB0B to 645B5B*/
  background-image: url(uploads/images/hover_bkg.gif); /* Main Menu - Hover Link Bkg Image  */
  background-position: left;
  background-repeat: no-repeat;
}