CMS Made Simple Forums

Hi Guys,

I am a new user of this great tool. I'm trying to build a pretty basic site but I have ran into a problem when I tried editing the look and feel of my left navigation.

For your reference here is my test site - http://www.naomhmearnog.ie/index.php (Excuse my design skills, a lot more changes planned!! )

I changed the colour scheme for the left nav link blocks and it worked fine. Here is an extract of my "Navigation: CSSMenu - Vertical" stylesheet code after I just changed the basic colours and added some background images:

#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 Default 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 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.menuparent:hover,
#primary-nav li.menuparenth {
   background-image: url(uploads/images/sub_menu2.gif); /* Main Default Sub Menu 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 Hover Bkg Image */
   background-position: left;
   background-repeat: no-repeat;
}

As you can see from accessing my test site the sub menu link (Teams) isn't working correctly. I have tried editing the code for the sub menu code to reflect the background images I wanted but I can't get it to work 100%. I can't work out where to place the hover(sub_menu1.gif) and active(sub_menu.gif) "background-image: url(etc);" code so that they are displayed correctly.
I don't understand where and how the "#primary-nav li.menuparenth { " tag applies?

Apologies if this is a basic question but I'm only starting to learn the tool and css in general.

Any help appreciated

Regards,
Aidan

If you want a diff. image for menuparent and menuparent hover you need to separate them in your style sheet, now you have the same for both...

#primary-nav li.menuparent,  make one for this
#primary-nav li.menuparent:hover,  and another for this
#primary-nav li.menuparenth  this is for IE, the h on the end, same as the first one

Something like this...

#primary-nav li.menuparent,
#primary-nav li.menuparenth {
  background-image: url(uploads/images/sub_menu2.gif); /* Main Default Sub Menu Bkg Image */
  background-position: left;
  background-repeat: no-repeat;
}


#primary-nav li.menuparent:hover{
  background-image: url(uploads/images/sub_menu1.gif); /* Main Default Sub Menu Bkg Image */
  background-position: left;
  background-repeat: no-repeat;
}

Thanks for the feedback Mark but I still can't get this to work. My code now reads as

#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); /* arrow on left navigation */
  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); /* arrow on left navigation */
  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); /* Main Default Sub Menu Bkg Image */
  background-position: left;
  background-repeat: no-repeat;
}
#primary-nav li.menuparent:hover{
  background-image: url(uploads/images/sub_menu1.gif); /* Main Hover Sub Menu 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); /* arrow on left navigation */
  background-position: left;
  background-repeat: no-repeat;
}

I added the code you suggested but if you check my test site the "Team" hover link still displays the default hover image and not the sub_menu1 hover image. Sorry to be a pain but can you guys suggest anything else? As I said, I'm generally new to the system and CSS.

Regards,
Aidan

Sorry I only gave you the code for Firefox...

Good old IE needs...

#primary-nav li.menuparent:hover,
#primary-nav li.menuparenth:hover {

Hi Mark,

Sorry to annoy but I see it working fine in Firefox but I can't get it working for IE. I made the code change as you suggested, here it is

#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); /* arrow on left navigation */
  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); /* arrow on left navigation */
  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); /* Main Default Sub Menu Bkg Image */
  background-position: left;
  background-repeat: no-repeat;
}

#primary-nav li.menuparent:hover,
#primary-nav li.menuparenth:hover {
  background-image: url(uploads/images/sub_menu1.gif); /* Main Hover Sub Menu 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); /* arrow on left navigation */
  background-position: left;
  background-repeat: no-repeat;
}

Not sure where I went wrong but it still isn't been displayed correctly in IE?

Tks
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); /* arrow on left navigation */
  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); /* arrow on left navigation */
  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); /* Main Default Sub Menu Bkg Image */
  background-position: left;
  background-repeat: no-repeat;
}

#primary-nav li.menuparent:hover,
#primary-nav li.menuparenth:hover  delete this... {
  background-image: url(uploads/images/sub_menu1.gif); /* Main Hover Sub Menu 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,  Delete this.. including..  , ...
#primary-nav li.menuactiveh {
  background-color: #645B5B; /* changed the hover link colour from E7AB0B to 645B5B*/
  background-image: url(uploads/images/hover_bkg.gif); /* arrow on left navigation */
  background-position: left;
  background-repeat: no-repeat;
}

Hi Mark,

That worked!! Thank you very much for the help, I really appreciate you taking the time to help a newbie like me out. Now I have to just go figure out the "Team" active link part!! 


Thanks again

Aidan

Hi Mark,

Your going to stop talking to me soon!!

I have got the active bkg image working perfectly on firefox but I can't get IE to work. If you go to my test site you will see the default active background has now been set to the sub menu bkg image. I must be missing something small but I can't find it.

Apologises for annoying you but I think I'm close to resolving the issue. I would really appreciate it if you took a quick look at my revised code:

#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 Default 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 Default Active 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); /* Main Active Sub Menu 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); /* Main Default Sub Menu 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); /* Main Default Hover Sub Menu 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 Hover Bkg Image */
  background-position: left;
  background-repeat: no-repeat;
}


Does anything stand out that might be causing this active bkg image issue to occur in IE only?

Thanks
Aidan

Hi Guys,

Sorry to be a pain but does anyone have any tips on how to resolve this issue? After much help from Mark my test site (http://www.naomhmearnog.ie/index.php) appears fine in Firefox but I can't get it to appear correctly in IE. I have tried many different code combinations today but can't get a fix on it, i'm at a dead end. My code is in the post below.

The two issues in IE are the active sub menu bkg image (sub_menu.gif) is been display be default instead of default active bkg image (active_bkg2.gif) and secondly when you select the sub menu link i.e. Teams section, it doesn't display the active sub menu bkg image (sub_menu.gif). It must be some small coding error I have made.

Any help for this newbie would be much appreciated!

Tks
Aidan

Looks like you fixed it... no?

Hi Mark,

Thanks for getting back to me, apologises for not replying earlier, I have been on vacation.

Unfortunately I am still trying to sort the issue. The issue remains that when I access my test site in Firefox its fine but when I try IE 6.0, the background link images aren't appearing correctly. It has to be something small but I can't find the piece of code I'm missing.

As stated before the two issues in IE are the active sub menu bkg image (sub_menu.gif) is been display by default instead of default active bkg image (active_bkg2.gif) and secondly when you select the sub menu link i.e. Teams section, it doesn't display the active sub menu bkg image (sub_menu.gif). It must be some small coding error I have made.

I would really appreciate it if you could take a quick look at my code and maybe point me in the right direction. With your help previously the hover now appears fine in both browsers.

Tks

Aidan

I get a Database Connection failed...

Hi Mark,

The site should be back available, hosting issues!!

Aidan

For IE6 everything in the menu li has to have an h on the end of it, menuh, menuactiveh, menuparenth, etc. ...

So for every style in Firefox that works make/ add an h to it copied...


#primary-nav li.menuparent.menuactive,
#primary-nav li.menuparenth.menuactiveh

Hi Mark,

I have added a h to all the elements you have suggested but still no luck.

If you look at the following extract from my code for styling the active page links, I have added a background color of #480FED as a test to see if IE is picking up on the new code changes:

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


Firefox picks up the colour change but IE doesn't. Any idea on why this is occuring? Its like IE is skipping/ignoring the code?

Not sure if it helps but I have pasted my links code in full below.

Apologies for hounding you on this issue, just can't get a resolution. I really appreciate the help.

Tks
Aidan

#primary-nav li,
#primary-nav li.menuparent,
#primary-nav li.menuparenth {
  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 Default 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,
#primary-nav li.menuactiveh {
  background-color: #480FED; /* changed the active colour from F6B30A to 480FED*/
  background-image: url(uploads/images/active_bkg2.gif); /* Main Default Active Bkg Image  */
  background-position: left;
  background-repeat: no-repeat;
}

#primary-nav li.menuparent.menuactive,
#primary-nav li.menuparenth.menuactiveh {
  background-color: #F6B30A; /* changed the active colour from C7C7C7 to F6B30A*/
  background-image: url(uploads/images/sub_menu.gif); /* Main Active Sub Menu 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); /* Main Default Sub Menu 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); /* Main Default Hover Sub Menu 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 Hover Bkg Image */
  background-position: left;
  background-repeat: no-repeat;
}