Left Navigation Style sheet issue - SOLVED

[aidank]

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

[Dr.CSS]

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;
}

[aidank]

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

[Dr.CSS]

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

Good old IE needs...

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

[aidank]

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

[Dr.CSS]

#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;
}

[aidank]

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

[aidank]

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

[aidank]

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

[Dr.CSS]

Looks like you fixed it... no?

[aidank]

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

[Dr.CSS]

I get a Database Connection failed...

[aidank]

Hi Mark,

The site should be back available, hosting issues!!

Aidan

[Dr.CSS]

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

[aidank]

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;
}