arial font makes submenus disappear [Archive]

mcolton

07-18-2009, 05:13 PM

Script: jQuery Multi Level CSS Menu #2

You guys are not gonna believe this. I played with this code for 2 hours. It seems that the following code:

<HTML>
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="Page2.htm">Team Members</a></li>
<li><a href="Page3.htm">Past Performances</a></li>
<li><a href="Page4.htm">This Year </a></li>
<li><a href="Page5.htm">Dance Videos</a>
<ul style="width:500px">
<li><A HREF="locmoti2.rm">Valentine</A></li>
<li><A HREF="rockit.mpg">Local Motion</A></li>
<li><A HREF="local.wmv">Local Motion</A></li>
<li><A HREF="hillbilly.mpg">Hillbilly</A></li>
<li><A HREF="girls.wmv">Girls Night</A></li>
<li><A HREF="mib.wmv">Men In Black</A></li>
<li><A HREF="tango.wmv">Tango</A></li>
<li><A HREF="west.wmv">WestCoast</A></li>
<li><A HREF="renegade.wmv">Rengade</A></li>
<li><A HREF="bluefing.wmv">BlueFingr</A></li>
<li><A HREF="cotton.wmv">CottonEye</A></li>
</ul>
</li>
<li><a href="Page6.htm">Photo Album</a></li>
<li><a href="Page7.htm">Contact/Booking</a></li>
<li><a href="Page8.htm">Dance List</a></li>
</ul>
 
</div>
</HTML>

partial css below:
<CSS>
.jqueryslidemenu{
font: bold 16px verdana;
background: #e5febc;
width: 100%;
}
</CSS>

it works correctly. However, if I change verdana to arial, the submenus disappear
whenever I move the mouse on the submenus but overlapping some other code. Can anyone tell me why?

mcolton

07-25-2009, 10:22 AM

Sorry I don't understand your reply

monicasaha

07-29-2009, 06:35 AM

have u used more css or javascript.. for this? if yes plz add this with it..
moreover i have chnaged the font with ur given code..nothing disappear

mcolton

07-29-2009, 05:05 PM

That's because I only included part of the html. Below is all of it. When I change verdana to arial and mouseover the submenu, the submenu disappears when I get to the other code.

<!DOCTYPE HTML>

<HTML>
<HEAD>
<TITLE>Team Members</TITLE>

<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="jqueryslidemenu.js"></script>

</HEAD>

<BODY BGCOLOR="#99ffcc" LINK="red" VLINK="blue" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" rightmargin="0">

 
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="Page2.htm">Team Members</a></li>
<li><a href="Page3.htm">Past Performances</a></li>
<li><a href="Page4.htm">This Year's Performances</a></li>
<li><a href="Page6.htm">Photo Album</a></li>
<li><a href="Page7.htm">Contact/Booking Info</a></li>
<li><a href="Page8.htm">Dance List</a></li>
<li><a href="Page5.htm">Dance Videos</a>
<ul style="width:500px">
<li><A HREF="locmotion2.rm">Valentine's Day on Club Dance, Knoxville, TN (.rm)</A></li>
<li><A HREF="rockit.mpg">Local Motion signature dance, Atlanta, 2002 (.mpg)</A></li>
<li><A HREF="localmotion.wmv">Local Motion (.wmv)</A></li>
<li><A HREF="hillbillyshoes.mpg">Hillbilly Shoes (.mpg)</A></li>
<li><A HREF="girlsnightout.wmv">Girls' Night Out (.wmv)</A></li>
<li><A HREF="mib.wmv">Men In Black (.wmv)</a></li>
<li><A HREF="tango.wmv">Tango (.wmv)</A></li>
<li><A HREF="westcoast.wmv">West Coast Swing (.wmv)</A></li>
<li><A HREF="renegademixer.wmv">Renegade Mixer (.wmv)</A></li>
<li><A HREF="bluefingerlou.wmv">Blue Finger Lou (.wmv)</A></li>
<li><A HREF="cottoneyedjoe.wmv">Cotton Eyed Joe (.wmv)</A></li>
</ul>
</li>
</ul>
 
</div>

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="100%">
 
<TR>
<TD VALIGN="BOTTOM" ALIGN="CENTER" WIDTH="40%">
<applet
code = Tracker.class
Width = "250"
Height = "40"
ALT ="Local Motion">
<param name=AppBGColor value = "#99ffcc">
<param name=TextColor value = "#0000ff">
<param name=HighlightColor value = "#ff0000">
<param name=TextCount value="1">
<param name=text1 value="Local Motion">
<param name=DelayBetweenChars value="50">
<param name=DelayBetweenRuns value="1200">
<param name=HorizCenter value="true">
<param name=VertCenter value="true">
<param name=style value="bold">
<param name=pointsize value="40">
</applet>
</TD>
<TD rowspan="3">
<img src="team-bra2008.jpg" width="512" height="320" ALT="Team Picture">
</TD>

</TR>
<TR>
<TD VALIGN="TOP" ALIGN="CENTER">

Team Members 

</TD>
</tr>
<tr>
<td VALIGN="TOP" ALIGN="LEFT">

Standing -*


<A HREF="#ED">Ed</A>
<A HREF="#VIRGINIA">Virginia</A>
<A HREF="#KEN">Ken</A>
<A HREF="#MARYNELL">Mary Nell</A>
<A HREF="#MARTY">Marty</A>
<A HREF="#DOROTHY">Dorothy</A>
<A HREF="#SHERRIE">Sherrie</A>
<A HREF="#RICK">Rick</A>
<A HREF="#JACKIE">Jackie</A>
<A HREF="#BUD">Bud</A>
<A HREF="#LISA">Lisa</A>
<A HREF="#JIM">Jim</A> 


Kneeling -**


<A HREF="#NIKKI">Nikki</A>
<A HREF="#DEBRA">Debra</A>
<A HREF="#LESLIE">Leslie</A> 


Missing -   


<A HREF="#PAM">Pam</A>
<A HREF="#JERRY">Jerry</A>
<A HREF="#BILL">Bill</A>
<A HREF="#BARRY">Barry</A>

</TD>
</TR>
</TABLE>


<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="100%">
<TR>
<td width="5%">
<img src="clecklers.jpg" width="170" height="144">
</td>
<TD width="95%">

<A NAME=DEBRA>Debra Cleckler   </A>
<A HREF="#TOP" color="red">Top</A> 
Debra is a retired finance manager from BellSouth Telecommunications. She is Executive Vice
President of NTA (National Teacher's Association) for Country and Western dance instructors. 
<A NAME=JIM>Jim Cleckler***</A>
<A HREF="#TOP" color="red">Top</A> 
Jim is Debra's Dancing Dummy. 
</TD>
</TR>

<TR>
<td width="5%">
<img src="marty.jpg" width="170" height="137">
</td>
<TD width="95%" valign="top">
<A NAME=MARTY>Marty Colton***</A>
<A HREF="#TOP" color=red>Top</A> 
Marty is a retired computer programmer living in Greensboro, GA. Other interests are tennis, golf,
the Oconee Regional Humane Society, and the Atlanta Braves. He also designed this website and the ORHS'. 
</TD>
</TR>

<TR>
<td width="5%">
<img src="leslie.jpg" width="170" height="122">  
</td>
<TD width="95%" valign="top">
<A NAME=LESLIE>Leslie Thompson***</A>
<A HREF="#TOP" color=red>Top</A> 
Leslie dances socially and competitively for fun, travel, and to meet new people. She teaches line dancing at
The Club at Towne Lake in Woodstock, Cherokee Recreation and Parks in Woodstock, Cowboy's in Kennesaw, The Wild Mustang
in Atlanta, and Chambrel Assisted Living in Roswell. 
</TD>
</TR>

<TR>
<td width="5%">
<img src="lisa.jpg" width="170" height="144">
</td>
<TD width="95%" valign="top">
<A NAME=LISA>Lisa Morrison</A>
<A HREF="#TOP" color=red>Top</A> 
Lisa is an Entertainment Director of Rocky Branch Railroad And Old West Town in Haralson County. She enjoys Ballroom and Swing dancing.
Other interests are horseback riding, diving, and travel. She loves to dance socially and is proud to be a part of the team. 
</TD>
</TR>

<TR>
<td width="5%">
<img src="bill.jpg" width="170" height="140">
</td>
<TD width="95%" valign="top">
<A NAME=BILL>Bill Morrison</A>
<A HREF="#TOP" color=red>Top</A> 
Bill works as a computer and network security analyst though his passions are dancing and "staying busy". He started ballroom
dancing over 10 years ago, and then discovered Swing, Country-Western, Salsa.... His addiction to dance has become much worse
over the years. If you happen to know a cure for dancing addiction, don't tell him -- he doesn't want to know. 
</TD>
</TR>

<TR>
<td width="5%">
<img src="virginia.jpg" width="170" height="137">
</td>
<TD width="95%" valign="top">
<A NAME=VIRGINIA>Virginia Spencer**</A>
<A HREF="#TOP" color=red>Top</A> 
By day, Virginia is a mild mannered manager for a manufacturing facility. But by night and weekends and special events, she morphs into
her alter ego, 'Dance Girl'. Using her vast array of disguises and dance powers, she is able to leap, swing, whip, and rockstep her way
in and out of many dancing disasters. Look for her soon, on a dancefloor near you. 
</TD>
</TR>

<TR>
<td width="5%">
<img src="dorothy.jpg" width="170" height="137">
</td>
<TD width="95%" valign="top">
<A NAME=DOROTHY>Dorothy Rothbart**</A>
<A HREF="#TOP" color=red>Top</A> 
</TD>
</TR>

<TR>
<td width="5%">
<img src="porters.jpg" width="170" height="113">
</td>
<TD width="95%" valign="top">
<A NAME=JACKIE>Jackie Porter</A>
<A HREF="#TOP" color=red>Top</A> 
 
<A NAME=BUD>Bud Porter</A>
<A HREF="#TOP" color=red>Top</A> 
 
</TD>
</TABLE>

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR VALIGN="TOP" ALIGN="LEFT">
<TD NOWRAP VALIGN="TOP" ALIGN="RIGHT" WIDTH=335>
<IMG SRC="SPACER.gif" WIDTH=1 HEIGHT=240 BORDER=0 ALT="spacer">
</TD>
</TR>
</TABLE>

</BODY>
</HTML>

TheJoshMan

08-03-2009, 09:01 PM

Please post a link to the page on your site that contains the problematic script so we can check it out.

To properly analyze the problem, we will have to be able to see it in action... The HTML you posted above does not help as it does not include the CSS and accompanying script which creates the drop down menus to begin with...

If you would like help with this problem, please post a link to a demo page so that we can find what is causing the issue.

mcolton

08-03-2009, 10:18 PM

ok. I put the form online.
www.localmotiondanceteam.com
go to "Team Members" and mouseover "Dance Videos"
as you mouse down over the submenus, if you go near the team picture, the submenu disappears. If I change arial to verdana on line 3, it works fine. Here is the css

.jqueryslidemenu{
font: bold 16px arial;
background: #e5febc;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
color: black;
padding: 12px 15px;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-top: 1px solid black;
text-decoration: none;
width: 100%;
}

.jqueryslidemenu ul li a:hover{
background: white; /*tab link background during hover state*/
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
text-indent: 15px;
display: block;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none; /* allows 2 submenu tabs in 1 horiz line */
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
/*.jqueryslidemenu ul li ul li ul{
top: 0;
}*/

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 16px verdana;
padding: 5px;
margin: 0;
border-top-width: 0;
border-left: 1px solid black;
background-color: #eff8d2;
color: red;
}

/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 10px;
}
.rightarrowclass{
position: center;
top: 6px;
right: 5px;
}

TheJoshMan

08-03-2009, 10:24 PM

Hmm, I'm not getting the same results... If I move the mouse down onto the submenu after changing the submenu font-family to arial in firebug, and move my mouse towards the team picture, the submenu still stays there for me.

mcolton

08-04-2009, 12:38 AM

ok I changed it to verdana and put it online. Now it works correctly

TheJoshMan

08-04-2009, 09:15 AM

Glad its working for you now, and sorry I couldn't be of more help

mcolton

08-04-2009, 10:31 AM

but why should a font change make a difference. It works with verdana and doesn't work with arial. That doesn't make sense

Snookerman

08-04-2009, 10:49 AM

Verdana is a bit special. There are a bunch of articles out there that explain how it's different and why it should be avoided in web design. Here are a few:
http://virtuelvis.com/archives/2004/01/avoid-verdana (http://virtuelvis.com/archives/2004/01/avoid-verdana)
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html (http://www.xs4all.nl/~sbpoley/webmatters/verdana.html)

I'm guessing you designed for Verdana (on purpose or accidentally) and when you changed the font to Arial, the significant inconsistency in font width broke your design. This will also happen for users who don't have Verdana on their computers, since the browsers usually default to Arial in this case.

mcolton

08-04-2009, 01:41 PM

Now I'm really confused. You say avoid verdana. The program only works correctly with verdana (I haven't tried a third font). When I change to arial, it doesn't work.

I have always used arial in the past. I found that the same thing happens on a second website of mine.

raja

08-04-2009, 06:05 PM

And also ur site is not centered i think

mcolton

08-05-2009, 02:22 AM

Sorry but I don't know how that is affected by font