IE Compatibility Issue
Posted: Thu Jul 26, 2007 1:44 pm
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;
}
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;
}