CSS3 PIE Forums :: View topic - Background.png disappears on <ul><li> elements

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!--
//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
//http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal/ 
 -->

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

[color=#FF0000]/*Sub level menu list items (undo style from Top level List Items)*/[/color]
.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;
[color=#FF0000]behavior: url(PIE-1.0.0/PIE.htc);[/color]
top:0px;
}
[color=#FF0000]/*Sub level menu list items (undo style from Top level List Items)*/[/color]
.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;
[color=#FF0000]/*behavior: url(PIE-1.0.0/PIE.htc);*/[/color]
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>

<script type="text/javascript" language="javascript">

//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
//http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal/ 

var menuids=["treemenu1","treemenu2"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
  for (var t=0; t<ultags.length; t++){
        if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
         ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
      }
      else{ //else if this is a sub level menu (ul)
        ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
      }
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.visibility="visible"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.visibility="hidden"
    }
    }
  }
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)

</script>

</head>

<body bgcolor="#CCCCCC">

<table width="920" border="0" align="center" cellpadding="0" cellspacing="0">

   <tr>
    <td width="920" height="50" align="center"><img src="spacer.gif" alt="" width="920" height="50"></td>
 </tr>

<!--menu 1 ******************-->  

   <tr>
    <td class="wtronicmenuboxwhite">
         
<div class="suckertreemenu">
<ul id="treemenu1">

<li class="wtronicmenuwidth1"><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level <span>1.</span> 1</a></li>

<li class="wtronicmenuwidth2"><a class="nogo" href="#nogo" onMouseOver="title" title="test2.html">Level 1.2</a>
  <ul>
    <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 2.1</a></li>
    <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 2.2</a></li>
    <li><a class="nogo" href="#nogo" onMouseOver="title" title="test2.html">Level 2.3</a>
        <ul>
          <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 3.1</a></li>
          <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 3.2</a></li>
          <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 3.3</a></li>
          <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 3.4</a></li>
          <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 3.5</a></li>
        </ul>
    </li>
    <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 2.4</a></li>
  </ul>
</li>

<li class="wtronicmenuwidth3"><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level <span>1.</span> 3</a></li>

<li class="wtronicmenuwidth4"><a href="test2.html" target="_self" onMouseOver="title" title="test2.html"><span>L 1.4</span></a></li>

<li class="wtronicmenuwidth5"><a href="test2.html" target="_self" onMouseOver="title" title="test2.html"><span>L 1.5</span></a></li>

<li class="wtronicmenuwidth5"><a href="test2.html" target="_self" onMouseOver="title" title="test2.html"><span>L 1.6</span></a></li>
</ul>
<br style="clear:left;">
</div></td>
</tr>

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

<!--menu 1 eof ******************-->

         <tr>
         <td width="920" height="200"><img src="spacer.gif" alt="" width="920" height="200"></td>
         </tr>

         <tr>
         <td width="920" height="20"><img src="spacer.gif" alt="" width="920" height="20">content</td>
         </tr>

         <tr>
         <td width="920" height="200"><img src="spacer.gif" alt="" width="920" height="200"></td>
         </tr>


<!--menu 2******************-->  

<tr>
    <td class="wtronicmenuboxwhite">
         
<div class="suckertreemenu2">
<ul id="treemenu2">

<li class="wtronicmenuwidth1"><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level <span>1.</span> 1</a></li>

<li class="wtronicmenuwidth2"><a class="nogo" href="#nogo" onMouseOver="title" title="test2.html">Level 1.2</a>
  <ul>
  
    <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 2.4</a></li>
    <li><a class="nogo" href="#nogo" onMouseOver="title" title="test2.html">Level 2.3</a>
        <ul>
          <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 3.5</a></li>
          <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 3.4</a></li>
          <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 3.3</a></li>
          <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 3.2</a></li>
          <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 3.1</a></li>
        </ul>
    </li>
    <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 2.2</a></li>
    <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 2.1</a></li>
  </ul>
</li>

<li class="wtronicmenuwidth3"><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level <span>1.</span> 3</a></li>

<li class="wtronicmenuwidth4"><a href="test2.html" target="_self" onMouseOver="title" title="test2.html"><span>L 1.4</span></a></li>

<li class="wtronicmenuwidth5"><a href="test2.html" target="_self" onMouseOver="title" title="test2.html"><span>L 1.5</span></a></li>

<li class="wtronicmenuwidth5"><a href="test2.html" target="_self" onMouseOver="title" title="test2.html"><span>L 1.6</span></a></li>

</ul>
<br style="clear:left;">
</div>

</td>
</tr>

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

<!--menu 2 eof ******************-->

<!--footer **************-->
<tr>
<td width="920" height="400"><img src="spacer.gif" alt="" width="920" height="400"></td>
</tr>

</table>
</body>
</html>

Author:	wtronic [ Fri Mar 29, 2013 10:44 am ]
Post subject:	Background.png disappears on <ul><li> elements
Hello Jason, first to say: thank you for this hack! It works very fine in all areas of my website except the sub menus of the SuckerTree navigation: the background.png disappears and I don't know how to pack it into a <div>container to solve this issue (if this is generally possible). Would you please be so kind and give me a hint? Here is the simplified version of the menu http://fimum.de/lischi/suckertreemenu-test/test.html And here is the whole code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- //SuckerTree Horizontal Menu (Sept 14th, 06) //By Dynamic Drive: http://www.dynamicdrive.com/style/ //http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal/ --> <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; } [color=#FF0000]/Sub level menu list items (undo style from Top level List Items)/[/color] .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; [color=#FF0000]behavior: url(PIE-1.0.0/PIE.htc);[/color] top:0px; } [color=#FF0000]/Sub level menu list items (undo style from Top level List Items)/[/color] .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; [color=#FF0000]/behavior: url(PIE-1.0.0/PIE.htc);/[/color] 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> <script type="text/javascript" language="javascript"> //SuckerTree Horizontal Menu (Sept 14th, 06) //By Dynamic Drive: http://www.dynamicdrive.com/style/ //http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal/ var menuids=["treemenu1","treemenu2"] //Enter id(s) of SuckerTree UL menus, separated by commas function buildsubmenus_horizontal(){ for (var i=0; i<menuids.length; i++){ var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul") for (var t=0; t<ultags.length; t++){ if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item } else{ //else if this is a sub level menu (ul) ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it } ultags[t].parentNode.onmouseover=function(){ this.getElementsByTagName("ul")[0].style.visibility="visible" } ultags[t].parentNode.onmouseout=function(){ this.getElementsByTagName("ul")[0].style.visibility="hidden" } } } } if (window.addEventListener) window.addEventListener("load", buildsubmenus_horizontal, false) else if (window.attachEvent) window.attachEvent("onload", buildsubmenus_horizontal) </script> </head> <body bgcolor="#CCCCCC"> <table width="920" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="920" height="50" align="center"><img src="spacer.gif" alt="" width="920" height="50"></td> </tr> <!--menu 1 **************--> <tr> <td class="wtronicmenuboxwhite"> <div class="suckertreemenu"> <ul id="treemenu1"> <li class="wtronicmenuwidth1"><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level <span>1.</span> 1</a></li> <li class="wtronicmenuwidth2"><a class="nogo" href="#nogo" onMouseOver="title" title="test2.html">Level 1.2</a> <ul> <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 2.1</a></li> <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 2.2</a></li> <li><a class="nogo" href="#nogo" onMouseOver="title" title="test2.html">Level 2.3</a> <ul> <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 3.1</a></li> <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 3.2</a></li> <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 3.3</a></li> <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 3.4</a></li> <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 3.5</a></li> </ul> </li> <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 2.4</a></li> </ul> </li> <li class="wtronicmenuwidth3"><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level <span>1.</span> 3</a></li> <li class="wtronicmenuwidth4"><a href="test2.html" target="_self" onMouseOver="title" title="test2.html"><span>L 1.4</span></a></li> <li class="wtronicmenuwidth5"><a href="test2.html" target="_self" onMouseOver="title" title="test2.html"><span>L 1.5</span></a></li> <li class="wtronicmenuwidth5"><a href="test2.html" target="_self" onMouseOver="title" title="test2.html"><span>L 1.6</span></a></li> </ul> <br style="clear:left;"> </div></td> </tr> <p id="iepara"></p> <!--For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE--> <!--menu 1 eof **************--> <tr> <td width="920" height="200"><img src="spacer.gif" alt="" width="920" height="200"></td> </tr> <tr> <td width="920" height="20"><img src="spacer.gif" alt="" width="920" height="20">content</td> </tr> <tr> <td width="920" height="200"><img src="spacer.gif" alt="" width="920" height="200"></td> </tr> <!--menu 2**************--> <tr> <td class="wtronicmenuboxwhite"> <div class="suckertreemenu2"> <ul id="treemenu2"> <li class="wtronicmenuwidth1"><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level <span>1.</span> 1</a></li> <li class="wtronicmenuwidth2"><a class="nogo" href="#nogo" onMouseOver="title" title="test2.html">Level 1.2</a> <ul> <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 2.4</a></li> <li><a class="nogo" href="#nogo" onMouseOver="title" title="test2.html">Level 2.3</a> <ul> <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 3.5</a></li> <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 3.4</a></li> <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 3.3</a></li> <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 3.2</a></li> <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 3.1</a></li> </ul> </li> <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 2.2</a></li> <li><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level 2.1</a></li> </ul> </li> <li class="wtronicmenuwidth3"><a href="test2.html" target="_self" onMouseOver="title" title="test2.html">Level <span>1.</span> 3</a></li> <li class="wtronicmenuwidth4"><a href="test2.html" target="_self" onMouseOver="title" title="test2.html"><span>L 1.4</span></a></li> <li class="wtronicmenuwidth5"><a href="test2.html" target="_self" onMouseOver="title" title="test2.html"><span>L 1.5</span></a></li> <li class="wtronicmenuwidth5"><a href="test2.html" target="_self" onMouseOver="title" title="test2.html"><span>L 1.6</span></a></li> </ul> <br style="clear:left;"> </div> </td> </tr> <p id="iepara"></p> <!--For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE--> <!--menu 2 eof **************--> <!--footer ************--> <tr> <td width="920" height="400"><img src="spacer.gif" alt="" width="920" height="400"></td> </tr> </table> </body> </html> There are still some other problems with an 1 px overlap in the second menu (IE and Firefox) and I have to change the pseudo-classes (wrong order), but I think this are independent issues, this has nothing to do with the disappearing background in the menu. Thank you for reading! Happy Easter greetings from wimi

CSS3 PIE Forums http://css3pie.com/forum/

Background.png disappears on <ul><li> elements http://css3pie.com/forum/viewtopic.php?f=3&t=2029	Page 1 of 1

Page 1 of 1	All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group http://www.phpbb.com/