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

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

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