Forums
View unanswered posts | View active topics It is currently Sat Nov 22, 2014 3:15 pm



Reply to topic  [ 1 post ] 
 Background.png disappears on <ul><li> elements 
Author Message

Joined: Thu Mar 28, 2013 10:16 am
Posts: 1
Post 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


Fri Mar 29, 2013 10:44 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 1 post ] 

Who is online

Users browsing this forum: Google [Bot] and 3 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.