Page 1 of 1

CSSMenu Horiz. .menuparent li's not displaying bg images.

Posted: Fri Sep 22, 2006 2:22 am
by fuzzy_one
CMSMS 1.01  Working up a template derived from CSSMenu Horizontal & Two-Column Layout default stylesheets.

I've made a fair few changes to the default sheets, but nothing affecting the various menu uls and lis (except changing bg colors, border colors, etc.)  Then I tried to drop in a little bg image (ye olde arrowe) here:

Code: Select all

#primary-nav ul li.menuparent, 
#primary-nav ul li.menuparent:hover, 
#primary-nav ul li.menuparenth { 
/* arrow for menuparents */
   background-image: url(images/arrow.png); 
   background-position: center right; 
   background-repeat: no-repeat; 
}
But for some freaky reason the image does not display.  I'm using FF 1.5 on Ubuntu (Dapper).  I have copy-pasted the background-image property from the above snippet and paired it with different selectors (in the main layout stylesheet), where it works just fine.  Therefore the path is correct, the image is not corrupt, etc.  I searched this forum but could find no one discussing this exact difficulty (am consequently dreading the inevitable feel-like-an-idiot-because-I-overlooked-something-obvious moment).

So we might as well get it over with ... where did I go wrong here?

Re: CSSMenu Horiz. .menuparent li's not displaying bg images.

Posted: Sat Sep 23, 2006 5:54 am
by Dr.CSS
I think the ul is giving you problems have you tried this...

/* 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(images/cms/arrow.gif); Not sure about this part, yours may be some where else...
  background-position: center right;
  background-repeat: no-repeat;
}

Re: CSSMenu Horiz. .menuparent li's not displaying bg images.

Posted: Sat Sep 23, 2006 5:00 pm
by fuzzy_one
Thanks for the suggestion.  I just tried it.  No joy in FF 1.5.

I've tried both PNG and GIF variants, with "ul li" and just "li".  Nothing works.

BUT, in a reversal of expectation, it renders correctly in IE6 (just checked it on my wife's laptop).  So we're probably dealing with something Gecko-specific.

Has anyone else encountered a similar problem with the CSSMenu stylesheet?  I would assume not, but please shout if you have.

The only unusual thing I can think of about this template is that I've set the pagewrapper div to position: relative so that I could absolutely position an image at the top right corner of the wrapper (enabling it to visually overlap some other divs).  But I've commented out the position: relative to test that theory, and the menuparent arrows still do not appear.

The only other hint I have is a few old references to FF/Gecko having trouble with clearing divs without an explicit height definition.  I assume if this were the problem that other people with Gecko browsers would have found it.  I've changed nothing about the header div other than height, bg-image, and padding; nothing changed about the content div below the nav.

Pretty mystified...

Re: CSSMenu Horiz. .menuparent li's not displaying bg images.

Posted: Sat Sep 23, 2006 6:32 pm
by Dr.CSS
try putting a space between    li .men  (the li and the class)
have you a link i can hit?

Re: CSSMenu Horiz. .menuparent li's not displaying bg images.

Posted: Sat Sep 23, 2006 8:49 pm
by fuzzy_one
You, sir, are a gentleman and a scholar.

My thanks.

Figured it was something small-yet-necessary.