Forum Moderators: not2easy
Im using the rather cool Blm Multi-level Effect menu from
<snip>
Now I have had trouble with this menu as what is happening that when the second tier is opened with the cursor - the wording from the client is too long and needs widening. Within the current CSS there seems to be no way to do this (or is there?!).
I have also tried putting a class I made up called "wide_menu" that i set with a wider amount for the text box - and it still wont work! any ideas?!
<li><a class="wide_menu" href="#">Mediation Services</a></li>
In firefox it is worst as the text overlaps but in IE it is "ok". I would prefer the text to be on one line:
Thanks guys - hope someone can save me!
Sarah
[edited by: SuzyUK at 12:39 pm (utc) on Mar. 15, 2007]
[edit reason] No site specifics, thanks. See TOS #13 [WebmasterWorld.com] [/edit]
Firstly those links will be removed sooner or later, try avoid posting external links and post the html/css here so we can copy the example and see whats going on.
Regarding the issue, it looks as tho a height is being set for the sub menu which is most likely the cause of the problem you are seeing, i havent looked at the css just yet but find the style related to the sub menu and remove any height styling from it and see if that helps.
I noticed you said you would like it all on one line, you will need to adjust the width of the sub menus (in the css) to a width that will allow the largets sub link name to fit on one line.
Im just speculating here as i have no code to go with but see if the sub menu list is contained in a div element i.e. <div class="sub_menu">....</div> and locate the styling associated to it, you will probably find the bits to edit there.
On the down side tho the root menu and sub menus may use the same base styling (sorry for terminology im crap with that) thus the width if adjusted may have an adverse effect on the root menu. If thats the case then wrap the sub menu in a div and apply the styling you require (width in this case) and see if that helps.
If you can post a code example here of the menu and the css to go with it, no need for the rest of the html.
[edited by: PSWorx at 12:44 pm (utc) on Mar. 15, 2007]
/*this is the css for the vertical version*/
.vertical ul{
list-style-type: none;
padding: 0px;
border-top: 1px solid;
font-size: 95%;
font-family: verdana, serif;
width: 100px;
}
.vertical li a{
display: block;
width: 100px;
text-decoration: none;
height: 1.2em;
padding: .1em 1px;
border: 1px solid;
font-size: 72%;
font-family: verdana, serif;
border-top: 1px;
}
.vertical li{
/*Needed for IE. Don't ask me why, It was a lucky guess.*/
display: inline;
}
.vertical li ul{
position: absolute;
margin-top: -1.3em;
margin-left: 100px;
}
/*this is the css for the horizontal version*/
.horizontal ul{
list-style-type: none;
padding: 0px;
border-left: 1px solid;
display: block;
height: 1.4em;
}
.horizontal li{
float: left;
display: inline;
}
.horizontal li a{
text-decoration: none;
height: 1.2em;
float: left;
display: block;
width: 125px;
padding: .1em 1px;
border: 1px solid;
border-left: none;
}
.horizontal li li a{
border-top: none;
border-left: 1px solid;
}
.horizontal li ul{
position: absolute;
margin-top: 1.3em;
margin-left: -1px;
width: 129px;
border: none;
display: block;
height: auto;
border-top: 1px solid;
}
.horizontal li li ul{
position: absolute;
margin-top: .1em;
margin-left: 125px;
}
.horizontal li ul li a{
width: 125px;
}
/*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*/
/*Not sure if I recommend this or not*/
.inaccesible li ul{
display: none;
}
/*Arrow code - looks like <a class="haschild" href="#">Text <span>Arrow</span></a> can be turned on/off with arrow class*/
.arrow a span{
padding-left: 1em;
font-size: 85%;
}
.arrow a:hover span{
padding-left: 2em;
}
.arrow a span.noshow{
visibility: hidden;
}
/*Plus code*/
.plus a span{
padding-left: .5em;
}
/*colors for menu*/
.blackwhite li a{
background-color: white;
color: black;
border-color: 003300;
}
.blackwhite li a:hover{
background-color: 003300;
color: white;
border-color: black;
}
.blackwhite ul{
border-color: black;
}
.bluewhite li a{
background-color: white;
color: #000033;
border-color: #000033;
}
.bluewhite li a:hover{
background-color: #000033;
color: white;
border-color: #000033;
}
.bluewhite ul{
border-color: #000033;
}
class="mlmenu vertical blindv blackwhite arrow inaccesible delay"
Which from the css looks like its linking to multi styles, which looks like the heart of the problem
Ok so going of that (what i see to be a) problem, you need to add this:
.vertical li ul li{
width: whateveryouneedpx;
}
after this this:
.vertical li ul{
position: absolute;
margin-top: -1.3em;
margin-left: 100px;
}
See if that works, basically the sub menu is inheriting the style from the root menu thus the restricted height and width.
.vertical li ul li
{
width: 250pixels;
}
to the CSS and it didn't do anything. I tried to add a class to the <ul> in the html as in:
.second_tier { width: 250pixels; }
and it made no difference
:(
.vertical li a{
display: block;
width: 100px;
text-decoration: none;
height: 1.2em;
padding: .1em 1px;
border: 1px solid;
font-size: 72%;
font-family: verdana, serif;
border-top: 1px;
}
to this:
.vertical li a{
display: block;
width: 100px;
text-decoration: none;
/*we removed the height*/
padding: .1em 1px;
border: 1px solid;
font-size: 72%;
font-family: verdana, serif;
border-top: 1px;
}
This fix will let the link contents go onto another line, regarding width im not sure didnt play around with it but as its inherited from the root menu it might have an effect on that which you dont want, also i think the javascript is playing havock with the css as i tried to apply additional classes and they wernt playing, i could set them as ID's but the html/xhtml wont validate but then that might not be needed.
As i said before it looks like the height was being inherited, not sure on the effects this will have on the root altho i dare say it means you can have longer names in the root menu same as the sub, hope it works!
[edited by: PSWorx at 1:28 pm (utc) on Mar. 15, 2007]
.vertical li{
/*Needed for IE. Don't ask me why, It was a lucky guess.*/
display: inline;
}
was that you or was it in the code you got? regardless this means the li's will not accept a width - only block elements can take widths - I see the width is actually declared on the
.vertical li a (width: 100px;}.vertical li li a {width: 250px;}and Yes PSWorx, it's quite legal to have classes like that, I presume there are so many in this case because it's a multifunctional menu (download code for every eventuality). When using multiple classes the cascade still applies it will be the class name nearest the element content that trumps the others
e.g.
.red {color: red; font-weight: bold;}
.blue {color: blue;}<p class="red blue">text will blue and bold</p>
Suzy
[edited by: SuzyUK at 1:37 pm (utc) on Mar. 15, 2007]
"Did you ever know that you're my hero!"
Thanking you!
So do you think i can take that "inline" out?
at the moment the previous posters suggestion worked - although it wasnt on one line - but it now appears as IE had been displaying it.
So do you think i can take that "inline" out?
no not if the rest of the menu is working.. I have a feeling that it's there to fix an IE whitespace in lists bug, and if you remove it you would need float the li's instead. Just be aware that you can't set the widths or heights on the li.
at the moment the previous posters suggestion worked - although it wasnt on one line - but it now appears as IE had been displaying it.
The height removal works by taking away it's restriction allowing the box to stretch vertically, IE6 and below stretches boxes incorrectly tis why it was doing it before.
a combination of both my and PSWorx's solutions should cover both eventualities though I admit to missing the fact that there is also a width on ul! so along with removing height if you add
.vertical ul ul, .vertical li li a {width: 250px;}adjust the 250px to suit your needs you should be able to get your text all one one line too.
Suzy
