PDA

View Full Version : Assistance with the BLM MultiLevel Effect Menu



ebsboards
10-25-2006, 12:43 PM
Hi - I am using the GREAT BLM MultiLevel Effect Menu (found at http://www.dynamicdrive.com/dynamicindex1/blmmenu/index.htm). I have studied the instructions and customized the colors and some other stuff. This is REALLY a powerful and great script. Thanks again for posting it.

My question is this. How can it be stretched to reach each side of a table edge. You can see my example and question in action at http://www.living4adventure.com

On the far right side of the menu, I can not figure out how to get the table to stretch flush to the right side. I have adjusted the options in the css file, but if I go up 1 more size wise - it stretched the entire menu to 2 rows. I am unable to make the rectangle 1/2 sizes bigger, so I am stumped.

if requested I will upload the current css file from where I am using this script and one of the pages so you can see the code.

Brady Mulhollem is the author of this scropt and if he is out there I would welcome the assistance! thanks so much.

THANKS!
:)

blm126
10-25-2006, 07:43 PM
What browser? It looks fine in Opera 9.

ebsboards
10-25-2006, 07:58 PM
hey Brady - thanks for posting back and for such a great script.
Here is where I am at:
1) Today I made a small change in the css file that made it look better in Firefox (but not fixed). Basically I changed one line (the bold one below):
.horizontal ul li a{
display: block;
width: 87px;
text-decoration: none;
height: 1.5em;
*/padding: .1em 1px;*/
overflow: hidden;
border: 1px solid;
border-left: none;

2) This kind of fixed things in Firefox horizontally (not vertically. In Firefox but "left to right" it now fits in the table but added now the table it is in is to tall), but THIS DID NOT fix the issues in IE6 or IE7, which is what the majority of people use

3) In IE6 and IE7 there is a space to the far right, next to the contact us box and no matter what I do it will not line up and fill the table fully from left to right. If i change the width to 88, then the entire menu wraps down to a second line and the contact us box moves to the second line below the home button.

what do you think i should do?

thanks!:)

blm126
10-26-2006, 12:30 AM
Well, I am not quite sure, so these will be mostly guesses(I designed the script to work well in a CSS layout, as that is what I use.)

First, Which version of the script are you using? 1.1 from my site, or 1.0 on DD. It appears you have a mix of the two(I don't think this will cause the problem, but will help me diagnose it)

Second,Try applying negative margins to the container div(div.horizontal)

ebsboards
10-26-2006, 12:51 AM
I think to make this easier I can email you the css file and one of the pages (they are all basically the same template layout) so you can see your code firsthand in action and how the code will not stretch in the table.

Again, any help from you or anyone else would be greatly appreciated.

I will email you the 2 files now

:)

blm126
10-26-2006, 01:17 AM
The file don't really help me much. Opera 9's reload from cache works much faster! So a solution only tested in Opera....
add this to the CSS


.mlmenujs li{
margin-bottom: -20px;
}
.mlmenujs li li{
margin-bottom: -1px;
}

ebsboards
10-26-2006, 01:18 AM
where do i put that - anywhere?

ebsboards
10-26-2006, 01:32 AM
The file don't really help me much. Opera 9's reload from cache works much faster! So a solution only tested in Opera....
add this to the CSS


.mlmenujs li{
margin-bottom: -20px;
}
.mlmenujs li li{
margin-bottom: -1px;
}


ok that worked and it did not work.
1) When I put that code in the css file it squeezed every thing so much i lost the lines in your code between each drop down box
2) It also put the navigation boxontop of the other table below it.

wow i am a little lost here.

blm126
10-26-2006, 01:36 AM
Is the CSS file on your site still modifed(with twhat you posted in the first post)?If so remove it. I want to see what happens.

ebsboards
10-26-2006, 01:40 AM
OK I made the change back to the original code, which is this:
.horizontal ul li a{
display: block;
width: 87px;
text-decoration: none;
height: 1.5em;
padding: .1em 1px;
overflow: hidden;
border: 1px solid;
border-left: none;

Now in FireFox you will see that the navigation menu has wrapped around and the last button is now under the first. In IE6 and IE7 there is not much different.

?? now what

blm126
10-26-2006, 07:08 PM
Ok, found at least one small error. In your CSS file


.bluewhite li a{
background-color: a1b4b4;
color: #000033;
border-color: #000033;
}

should be


.bluewhite li a{
background-color: #a1b4b4;
color: #000033;
border-color: #000033;
}

Also, your page is using a transitional doctype. I have tested the menu under a strict doctype.

Have you made any other changes to the default CSS(besides the color)? Somewhere there is a lot of padding getting added, but don't see where.

ebsboards
10-26-2006, 07:11 PM
thanks Brady - but the color is working. It is the overall horizontal menu size that I can not get to fit in the table? any ideas how to fix this?

blm126
10-26-2006, 09:13 PM
The color doesn't work when you switch to a strict doc type.

Anyway, if you compare your menu to the demos you will notice that your menus are a different size. I think the problems are related. That is why I was asking if you had made any changes.And you still haven't aswered the question of which version you are using. You seem to be using the HTML of one and the CSS of the other.

ebsboards
10-27-2006, 12:09 PM
The color doesn't work when you switch to a strict doc type.

Anyway, if you compare your menu to the demos you will notice that your menus are a different size. I think the problems are related. That is why I was asking if you had made any changes.And you still haven't aswered the question of which version you are using. You seem to be using the HTML of one and the CSS of the other.

OK -
1) I added the missing "#" as you found I was missing to the css file and uploaded it with the change made.

2) I know my menu is a different size then the ones in the demos. I have changed the colors to match my site and as we have been discussing, I am trying to fit your script into the frames of my website. I LOVE the script and have no complaints with it, but just can not get it to fit completely from left to right in the table I have inserted it into. And as you can see in Firfox, now it wraps down to 2 lines. And in IE there is a space to the far left between the far right edge of the menu and the right border of the table it is in.

3) In the "read me" file from the version I used it says the following - "Multi-Level Effect Menu v1.1 by Brady Mulhollem"

Brady, I hope there is some fix for this. I hate asking you, but I am stuck and it has to work in IE. Wether I hate IE or not is irrelebant - the majority of the normal web viewing world still uses it, so I have to make it work in IE also.

Thanks again for the help:)

blm126
10-27-2006, 08:47 PM
Well, I know what the width problem is now...I know you changed the width of each link, but do you happen to design this for IE? This is IE's box model coming into play. Redo the width of the links to work in Firefox, then use conditional comments to supply the width that will work in IE.

ebsboards
10-27-2006, 09:47 PM
Well, I know what the width problem is now...I know you changed the width of each link, but do you happen to design this for IE? This is IE's box model coming into play. Redo the width of the links to work in Firefox, then use conditional comments to supply the width that will work in IE.

Brady, I GREATLY appreciate your continued assistance and help with your script. I hate to sound "dumb" but can you assist me with the "conditional comments to supply the width that will work in IE.
When I get home tonight I will do what you said and redoe the width pixel size to fit horizontally in FireFox. After that I will need assistance with what the conditional comments are and where to put them in the css file.

Can you assist me with this please.

blm126
10-28-2006, 02:35 AM
Sure, read up a little on them here (http://www.quirksmode.org/css/condcom.html).
And not for the brief tour. Just add


<!--[if IE]>
<script type="text/css">
#menu a{
width: 84px;
}
</script>
<![endif]-->

I haven't tested that width by the way(just a guess). Also, you will need to apply an id of "menu" to the container div.

ebsboards
10-28-2006, 04:21 AM
Hi Brady; It is still not working. Am I missing anything. Here is what I did, following your instructions -

1) First I adjusted the width so the menu fits in Firefox. Then I added the additional code you told me to at the end of the css file. But no matter what I change the new code at the end to it does not allow me change way it looks in IE. The new code for that part looks like this:


.horizontal ul li a{
display: block;
width: 85px;
text-decoration: none;
height: 1.5em;
padding: .1em 1px;
overflow: hidden;
border: 1px solid;
border-left: none;
}
.horizontal li li{
float: none;
border-bottom: 1px solid transparent;
margin-bottom: -1px;
}
.horizontal li li.last{
border-bottom: none;
}
.horizontal ul li ul{
position: absolute;
top: 1.3em;
left: -1px;
margin-top: -1px;
}
.horizontal ul ul ul{
width: 230px;
top: -1px;
left: 128px;
margin-top: 0;
}
.horizontal.left ul ul ul,.horizontal .left ul ul{
top: -1px;
left: -128px;
}
.horizontal ul li li a{
border: 1px solid;
border-top: none;
}
.horizontal ul li:first-child>a{
border-left: 1px solid;
}
.horizontal ul li a.first{
border-left: 1px solid;
}
.horizontal ul li li a.first{
border-top: 1px solid;
}
.horizontal ul li li:first-child>a{
border-top: 1px solid;
}
div.horizontal ul li.pixelfix ul{
left: 0;
}
div.horizontal ul li.pixelfix ul ul{
left: 128px;
}
/*here we use a little CSS to make a basic/backup dropdown menu in modern browsers *cough* not IE6 or less *cough* if javascript is disabled.Flickering never happens in these browsers*/
.mlmenu li ul{
display: none;
}
.mlmenu li:hover>ul{
display: block;
}
/*This section makes the menu not work in non-javascript enabled browsers by not showing the menu by default-This can be worked around by making top level links point to a sitemap*/
.accessible li ul{
display: block;
}
/*Code to show an element has a child*/
.mlmenu.plus li a:first-child:not(:last-child):after{
content: '+';
}
.plus a span{
padding-left: .5em;
}
.noshow{
visibility: hidden;
}
/*colors for menu*/
.blackwhite li a{
background-color: white;
color: black;
border-color: black;
}
.blackwhite li a:hover,.blackwhite li a.first:hover,.blackwhite .trail a.hover{
background-color: black;
color: white;
border-color: black;
}
.blackwhite li:first-child>a:hover{
background-color: black;
color: white;
border-color: black;
}
.blackwhite ul{
border-color: black;
}
.bluewhite li a{
background-color: #a1b4b4;
color: #000033;
border-color: #000033;
}
.bluewhite li a:hover,.bluewhite li a.first:hover,.bluewhite .trail a.hover{
background-color: #000033;
color: white;
border-color: #000033;
}
.bluewhite li:first-child>a:hover{
background-color: #000033;
color: white;
border-color: #000033;
}
.bluewhite ul{
border-color: #000033;
}
<!--[if IE]>
<script type="text/css">
#menu a{
width: 88px;
}
</script>
<![endif]-->

ebsboards
10-29-2006, 03:17 PM
anything new to help?
anyone else?

:(

blm126
10-29-2006, 11:30 PM
Sorry, I was away from my computer for a couple days. The conditional comment needs to go in the <head> tag of the file. Not in the css file.

ebsboards
10-30-2006, 01:55 AM
OK I give up.
I highly recommend that you ammend the info on the scipt listing on DD to state clearly that WITHOUT ADVANCED CSS training you will not be able to make this work in IE.
Below is the top portion of the html of my page (not the css file, the actual page). It still does not fit correctly.
Oh well - please change the actual listing for the scipt so others will know about this problem.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<link rel="stylesheet" href="css.css">
<!--[if IE]>
<link rel="stylesheet" href="hack.css">
<script type="text/javascript">
window.mlrunShim = true;
</script>
<![endif]-->
<script type="text/javascript" src="js.js">

/***********************************************
* Blm Multi-level Effect menu- By Brady Mulhollem at http://www.bradyontheweb.com/
* Script featured on DynamicDrive.com
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and more
***********************************************/
</script>

<!--[if IE]>
<script type="text/css">
#menu a{
width: 104px;
}
</script>
<![endif]-->

<title>Living4Adventure: The World Is Our Playground</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

blm126
10-30-2006, 10:18 PM
You missed the second part of the modification. You didn't add an Id of menu to the div(which is required). Also, it should be noted that this isn't the scripts fault. The reason the width's are different is IE's well documented box model problem. This is negated by forcing IE into strict rendering mode. However,(I mentioned in another post) this will require a doctype change, and may cause other problems.

ebsboards
10-31-2006, 04:00 AM
You missed the second part of the modification. You didn't add an Id of menu to the div(which is required).

i guess I still dont understand.
Can you please show me exactly how to do this (code and how it should look in my files)....please

blm126
10-31-2006, 12:12 PM
<div class="mlmenu horizontal blindv bluewhite">
needs to be


<div id="menu" class="mlmenu horizontal blindv bluewhite">

ebsboards
11-01-2006, 06:03 PM
ok i did that and now it made the table larger (taller) then it was before, lol
I am done for now with this.
Thanks for the help.
JA