suckertree hoizontal menu css + javascript questions

[ajfmrf]

Now explain what you are looking for.............

[wtronic-germany]

Hi Bud and hello again

meanwhile I embedded the menu in my site.

The above link leads to a simplified version on a place in my webspace, where it can be "forever".
Maybe I'm not the last one with this issue...

My questions became rather more then less,
but one of the most important is the "CSS Pie round corners" problem, when using the internet explorer:

CSS Pie works fine in the top level menu and all other areas (and all other tested browsers), but not in the suckertree submenus. The background.png is not shown (tested with IE 8 ).

How to manage this?

Greetings and thanks a lot!
wimi

<style type="text/css">

.wtronicmenuboxwhite {
background-image:url(bg75w.png);
border-radius:5px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
behavior: url(PIE-1.0.0/PIE.htc);
width:920px;
height:25px;
}

.wtronicmenuwidth1 {
width:190px; /*Width of the first top level menu link items*/
padding-left:5px;
}
.wtronicmenuwidth2 {
width:190px; /*Width of the second top level menu link items*/
padding-left:15px;
}
.wtronicmenuwidth3 {
width:190px; /*Width of the third top level menu link items*/
}
.wtronicmenuwidth4 {
width:60px; /*Width of the third last top level menu link item*/
padding-top:4px;
padding-left:130px;
}
.wtronicmenuwidth5 {
width:60px; /*Width of the last two top level menu link items*/
padding-top:4px;
}

/*** SuckerTree Menu *****************************/

.suckertreemenu ul,
.suckertreemenu2 ul {
list-style-type:none;
margin:0;
padding:0;
}

/*Top level list items*/
.suckertreemenu ul li,
.suckertreemenu2 ul li {
position:relative;
display:inline;
float:left;
text-align:center;
}
/*Top level menu link items style*/
.suckertreemenu ul li a,
.suckertreemenu ul li a.nogo,
.suckertreemenu2 ul li a,
.suckertreemenu2 ul li a.nogo {
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
font-style:normal;
line-height:1.5; /*change along with top:*/
font-weight:700;
font-variant:normal;
color:#39A851; /*green*/
display:block;
text-decoration:none;
}
.suckertreemenu ul li a span,
.suckertreemenu ul li a.nogo span,
.suckertreemenu2 ul li a span,
.suckertreemenu2 ul li a.nogo span {
font-size:14px;
}
.suckertreemenu ul li a:link,
.suckertreemenu ul li a.nogo:link,
.suckertreemenu2 ul li a:link,
.suckertreemenu2 ul li a.nogo:link,
.suckertreemenu ul li a:visited,
.suckertreemenu ul li a.nogo:visited,
.suckertreemenu2 ul li a:visited,
.suckertreemenu2 ul li a.nogo:visited {  
color:#39A851; /*green*/
}
.suckertreemenu ul li a:hover,
.suckertreemenu2 ul li a:hover { 
color:#000;
}
.suckertreemenu ul li a.nogo:hover,
.suckertreemenu2 ul li a.nogo:hover {  
color:#39A851; /*green*/
}

.suckertreemenu ul li a:focus,
.suckertreemenu ul li a.nogo:focus,
.suckertreemenu2 ul li a:focus,
.suckertreemenu2 ul li a.nogo:focus {
color:#FF6A00; /*orange*/
}
.suckertreemenu ul li a:active,
.suckertreemenu2 ul li a:active {
color:#277538; /*darkgreen*/
}
.suckertreemenu ul li a.nogo:active,
.suckertreemenu2 ul li a.nogo:active {  
color:#39A851; /*green*/
}

/*1st sub level menu*/
.suckertreemenu ul li ul,
.suckertreemenu2 ul li ul {
left:50px;
position:absolute;
top:1em; /* no need to change, as true value set by script */
display:block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li {
display:list-item;
float:none;
background-image:url(bg75w.png);
border-radius:5px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
behavior: url(PIE-1.0.0/PIE.htc);
top:0px;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu2 ul li ul li {
display:list-item;
float:none;
background-image:url(bg75w.png);
border-radius:5px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
behavior: url(PIE-1.0.0/PIE.htc);
top:-127px; /*change along with line-height:*/
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul { 
left:159px; /* no need to change, as true value set by script */
top:0px;
}
/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu2 ul li ul li ul { 
left:159px; /* no need to change, as true value set by script */
top:27px; /*change along with line-height - in 25er Schritten hoch-/runterrechnen*/
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a,
.suckertreemenu2 ul li ul li a,
.suckertreemenu ul li ul li a:link,
.suckertreemenu2 ul li ul li a:link,
.suckertreemenu ul li ul li a:visited,
.suckertreemenu2 ul li ul li a:visited { 
width:90px; /*width of sub menu levels*/
font-size:14px;
line-height:1.8; /*change along with top:*/
text-align:left;
padding-left:15px;
padding-right:15px;
color:#39A851; /*green*/
}
.suckertreemenu ul li ul li a:hover,
.suckertreemenu2 ul li ul li a:hover { 
color:#000;
}
.suckertreemenu ul li ul li a:focus,
.suckertreemenu2 ul li ul li a:focus {
color:#FF6A00; /*orange*/
}
.suckertreemenu ul li ul li a:active,
.suckertreemenu2 ul li ul li a:active {
color:#277538; /*darkgreen*/
}

* html p#iepara { /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top:1em;
}

/* Holly Hack for IE 4-6\*/
* html .suckertreemenu ul li, .suckertreemenu2 ul li { float: left; height: 1%;}
* html .suckertreemenu ul li a, .suckertreemenu2 ul li a { height: 1%;}
* html .suckertreemenu ul li ul li, .suckertreemenu2 ul li ul li { float: left;}
/* End */

/**** SuckerTree Menu end ****************************/

</style>

[ajfmrf]

well the only thing I have to say about that is the same as the others

Do you have the url/addy for the pie thing?

.wtronicmenuboxwhite {
background-image:url(bg75w.png);
border-radius:5px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
behavior: url(PIE-1.0.0/PIE.htc);
width:920px;
height:25px;
}

Is this a link that is good? do you have it downloaded and if so is the location correct?

[wtronic-germany]

Hi Bud,

this is the link: http://css3pie.com/.

PIE makes nice corners everywhere, but not in my <ul><li> elements.
Syntax and path are ok, I checked this twice and triple.

When I began to style my menu, I thought it will be better not to work with opacity, so I used a background.png.
May be, it is necessary to use opacity in the sub menus.

If I comment out the "behavior:" in the CSS instruction for the sub menus, the background is indicated, but - of course - without rounded corners.

I try to solve this issue by myself and in the CSS3 PIE Forum and then I'll come back with the results.
Perhaps you can help me meanwhile with my other questions?

For the clarity I put the next question in a new post.

Happy Easter greetings from wimi!

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li {
display:list-item;
float:none;
background-image:url(bg75w.png);
border-radius:5px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
behavior: url(PIE-1.0.0/PIE.htc);
top:0px;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu2 ul li ul li {
display:list-item;
float:none;
background-image:url(bg75w.png);
border-radius:5px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
/*behavior: url(PIE-1.0.0/PIE.htc);*/
top:-127px; /*change along with line-height:*/
}

[wtronic-germany]

My next open question is:

<p id="iepara"></p> <!--For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE-->

This is exactly needed for what?
After each menu?
And where is the right place to set it in?