Transparent FS MENUS

1) mircea1980 Group: Members
Posts: 4 Joined: 11 Jan 2008 Location: IP: 80.97.--.--

Posted:

   Hi, mircea here.
   I use *.pgn for menu backgrounds to make them transparent.
   I tried your iepgnfix... couldn't make it work ... dont know why.
   Then i found this pgn fix on the forum:

.menulist2 li {
float: left;
position: relative;
margin-right: 0px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizing Method=scale src='../afbeeldingen/tool/green.png');
}
.menulist2[class] li {
background-image: url(../afbeeldingen/tool/green.png);
}

This worked ok on my menu... at first.
I have a 3 lvl menu, the interesting part is that on the first 2 levels it works great, but the 3 level isn't even show up. I mean it reacts as if the level 2 element has no children althogh it has, they are there, in FireFox works great. If i modify the background and enter some color, again the 3 lvl pops, change back to AlphaImageLoader doesn't pop up again. :(

     I dont know why this is happening ... hope you can help me.

2) mircea1980 Group: Members
Posts: 4 Joined: 11 Jan 2008 Location: IP: 80.97.--.--

Posted:

Actually the iepgnfix works ... but my image is 1x1 px, so with the repeat problem i could not see it. Made the scale modification and now is streches the image... it looks oki to me.
Still the problem with the lvl 3 elements is still there .... help required :(

4) mircea1980 Group: Members
Posts: 4 Joined: 11 Jan 2008 Location: IP: 80.97.--.--

Posted:

Hi Angus, thaks for your reply.

Actually the item is clickable, as if I click on the item, who should open the new submenu, it goes to the specifeid link assigned to it.
I use the list from your exemaple:

<ul class="menulist" id="listMenuRoot">
<li><a href="#">Home</a></li>
<li><a href="#">Demo Submenu</a>
<ul>
<li><a href="#">Here's a submenu item.</a></li>
<li><a href="#">Items auto-size based on the text they contain.</a></li>
</ul>
</li>
<li>
<a href="#">Submenu #2</a>
<ul>
<li>
<a href="#">Nested menu 1</a>
<ul>
<li><a href="#">As many levels as you need.</a></li>
<li><a href="#">All styled via CSS.</a></li>
</ul>
</li>
<li>
<a href="#">Nested menu 2</a>
<ul>
<li><a href="#">Another nested menu.</a></li>
<li><a href="#">It's still built with nested lists.</a></li>
</ul>
</li>
<li><a href="#">These menus have true 'switch' timers.</a></li>
<li><a href="#">Imprecision doesn't mean collapse!</a></li>
</ul>
</li>
<li><a href="#">Easy to use!</a></li>
</ul>

And the only change in css is in .menulist class, the png background :

.menulist
{
margin: 0;
padding: 1px;
width: 170px;
list-style: none;
behavior: url("/javascripts/fsmenu/iepngfix.htc");
background-image: url("/javascripts/fsmenu/transp.png");
background-repeat: repeat;
border: 1px solid #654;
}

Sorry for the long post .... but i'm stuck here :(
P.S I forgot to mention that the in FireFox it works great. And the problem is the png, because if i take it out the menu works ok. Still I have to make the menu transparent.

5) Angus Turnbull Group: Moderators
Posts: 4042 Joined: 7 Dec 2003 Location: New Zealand IP: 203.109.--.--

Posted:

Ah, OK then! I've never really used PNGs with the menu as I've encountered all sorts of bugs like this.

You might have better luck with putting the PNG onto a DIV somewhere and overlying the UL using absolute positioning (i.e. don't put the UL inside the DIV).

- Angus.

Post a Reply: