Rounded corners & css hover menu popup trouble w/ firefox 1.5.0.(5|6)

[rich8715]

CMSMS v 0.13.

I am attempting to use the technique detailed here: http://www.webreference.com/programming/css_borders/ to add rounded corners to a horizontal CSS menu in cmsms.

Here is the blurb from my template where I "attach" the rounded corner lines to the horizontal menu:

       
          Navigation
         
           
              {cms_module module='menumanager' template='cssmenu-accessible.tpl'}   
           
         
       

This works, in that the fake "curves" are stacked on top and bottom of the menu.  The trouble comes when I hover the mouse over one of the menu items to pop open a submenu.  The tags that create the fake rounded corners end up displaying above the pop-up hover menu instead of below the pop-up hover menu.

The setup works in IE for windows (6.0) in that the tags remain below the popup menu.  But I suspect that is due to the IE javascript that compensates for IE's lack of :hover for all elements in CSS.

In Firefox 1.5.0.6 for windows, and 1.5.0.5 for Linux, the tags display above the drop down menu, and I can't figure out what is causing them to display above the menu.  I've tried position: relative and z-depth: on the tags, but neither fixes the display in FF Linux or FF Windows.

The CSS that is being applied to the tags for the round borders on the menu-bar is the following:

.b1, .b2, .b3, .b4 {
  display: block;
  height: 1px;
  overflow: hidden;
  background: #385C72;
  font-size: 1px;
}
.b1 { margin: 0 5px; }
.b2 { margin: 0 3px; }
.b3 { margin: 0 2px; }
.b4 {
  margin: 0 1px;
  height: 2px; 
} 

div#menu_horiz * b { background: #ECECEC; }
#menuwrapper { border-bottom: none; }

Does anyone have any ideas as to what might be going wrong?

[Dr.CSS]

If you are using Firefox you can get the Web Dev. toolbar and it will do outlines of the divs and you may see that the menu on expansion gets a little bigger.

Have you tried niftyCubes?

Mine using it http://www.multiintech.com/index.php?page=niftycubes

[rich8715]

Have you tried niftyCubes?

Actually, no, I was not aware of niftyCubes.  I've looked at it now, and I'm going to make a test switch to it and see if it fixes the troubles.  If it does, then I'll go with it.

PS - I did forget to mention one tidbit in my origional posting.  If I remove the "overflow: hidden;" from the b elements in my CSS, then firefox renders the css pop-up window properly.  Unfortunately, then sometimes ie completely messes up the layout and makes the elements the same height as the fonts.

[Dr.CSS]

Problem with IE? no realy (just kidding)

You can make a call just to IE with the style that works for it by using...

    Firefox and others...
.b1, .b2, .b3, .b4 {
  display: block;
  height: 1px;
  background: #385C72;
  font-size: 1px;
}

        IE only...
* html body .b1, .b2, .b3, .b4 {
  display: block;
  height: 1px;
  overflow: hidden;
  background: #385C72;
  font-size: 1px;
}

You just need to put it right below your regular call.

[rich8715]

I'm not sure I completely understand what you are saying.

Are you saying that inside of one single stylesheet, I should have:

.b1, .b2 { styles for non-ie }
* html body .b1, .b2 { styles for ie }

?

The reason I'm asking is that I did to my stylesheet what I think you meant, which is what I wrote above.  I copied my .b1... set and added * html body in front of the first .b1, and deleted "overflow: hidden;" from the "non-ie" set.

However, Linux Firefox 1.5.0.5 still picks up the overflow: hidden from the "*  html body .b1 ... " entry and still messes up the rendering (the elements end up displayed above the drop down menu).

If I comment out the "overflow: hidden;" in the "* html body " section of the stylesheet, then Linux Firefox again renders the elements beneath the popup menu.

So as far as I can see, if this trick was supposed to hide the second style grouping from Firefox, then linux Firefox 1.5.0.5 is still picking it up.

So, therefore, I'm thinking that maybe I missed something subtle in your posting and didn't do my stylesheets properly or something.

[Dr.CSS]

I've no experience with Linux so I can't help you there.

Does it work in IE? if so maybe you could use the same trick the menu uses.


style type="text/css">
.b1, .b2, .b3, .b4 {
  display: block;
  height: 1px;
  overflow: hidden;
  background: #385C72;
  font-size: 1px;
}

[rich8715]

I've no experience with Linux so I can't help you there.

Yesterday, FF 1.5.0.6 for Windows and FF 1.5.0.5 for Linux were rendering the layout identically, including rendering the elements above the drop down CSS menu.  So I suspect that the * html body item would have resulted in the same rendering on windows FF as on Linux FF.

Does it work in IE? if so maybe you could use the same trick the menu uses.

That is actually what I ended up doing.  I added a small stylesheet snippet inside the conditional comment block that was already part of the template that feeds ie the overflow: hidden; setting, and I don't have overflow: hidden; set for the main stylesheet.

I would have preferred determining why the CSS popup's for the CSS menu's did not pop above everything else on the page, but the conditional comment item above fixes the problem for the moment.