Spry Menu Issues in IE
So I have this Spry menu I want to use for navigation. I did
not like the default styling of text etc so I changed some stuff in
the CSS. But now a submenu appears strange in IE and I can´t
figure out what is wrong.
Take a look at:
www.bignert.com/susan
And if anyone reckognizes the problem please let me know!
Don´t know if you will be able to see the Spry CSS from
"view source" soo see attached Spry CSS
Regards,
Update your Spry to the latest version first.
http://labs.adobe.com/technologies/spry/home.html
- This is the official Spry homepage. There you will be able to
download the update package. Inside this package you will find a
ton of samples and an Extension. Install the Extension and restart
DW. Then you will see a new option under the Sites menu to update
your Spry. Once you do that be sure to re-upload the SpryAssets
folder back to your server.
If the problem still persists after doing this please post
back.
Similar Messages
-
Spry Menu issues in Internet Explorer
I have created a Spry menu for my website and although the menu appears to look fine in Firefox and Safari, the formatting changes in Internet Explorer(IE).
1.sub menu bar is not dropping down below the main menu bar it is appearing at the top of the screen.
2.When you hover over the sub menu bar items the font should be white however in IE it is appearing as an aqua color.
3.The menu bar is not straight across the page, at the beginning and end there are chunks of the menu bar that appear white.
Are there any fixes for these issues that would help to make the menu look consistent across all browsers. The website page is
www.applmgt.net/LMNtestpage/html, below is the code. Any help would be appreciated as soon as possible.
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Process operators – woodbuffalo.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="mystylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<link href="print.css" rel="stylesheet" type="text/css" media="print"/>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
a:link {
color: #300;
-->
</style></head>
<!-- Start Superstats code version 7.0b. Copyright 2007 MyComputer.com, Inc. More info available at http://www.mycomputer.com --><script language="JavaScript" type="text/javascript">/* You may give each page an identifying name, server, and channel on the next lines. */var pageName = "CostIntro";var pageType = "";var pageValue = "0";var product = "";/**** DO NOT ALTER ANYTHING BELOW THIS LINE! ****/var code = ' '; </script>
<script src="http://code.superstats.com/code/ss/applicationswb/0/30b" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
br = navigator.appName + parseInt(navigator.appVersion);
if (code != ' ' || br == 'Netscape2') {
document.write(code);
} else {
document.write(' <im'+'g src="http://code.superstats.com/b/ss/applicationswb/1'+ '?pageName=' + escape(pageName) + '" alt="" border=0>'); }</script>
<noscript><img src="http://stats.superstats.com/b/ss/applicationswb/1" alt="" border=0></noscript><!-- End Superstats tracking code. -->
<body vlink="#4E2C03">
<table width="760" border="0" cellspacing="0" cellpadding="2">
<tr>
<td bordercolor="#CCCCCC" bgcolor="#CCCCCC"><img src="images/buffalobanner2.jpg" width="760" height="142"></td>
</tr>
</table>
<table width="764" border="0" bgcolor="#4E2C03"cellspacing="0" cellpadding="0">
<tr>
<td width="311" "height="60"><font color="#FFFFFF" size="1" face="Arial, Helvetica, sans-serif"><a href="index.html" class="navbar">www.woodbuffalo.net</a> > <a href="LMNtestStart.html" class="navbar">Labour
Market News</a></font></td>
<td width="136" height="65"><!-- BEGIN: Constant Contact Border Email List Button -->
<div align="center">
<table width="135" border="0" cellspacing="1" cellpadding="2" bgcolor="#330000">
<tr>
<td bgcolor="#FFFFFF" align="center"><div style="float: right; margin-right:3px; margin-top:2px; background-color: #330000;"><a href="http://visitor.constantcontact.com/d.jsp?m=1102570618937&p=oi" target="_blank"><img src="http://img.constantcontact.com/ui/images1/visitor/email5_trans.gif" alt="Email Newsletter icon, E-mail Newsletter icon, Email List icon, E-mail List icon" border="0" align="center"></a></div>
<a href="http://visitor.constantcontact.com/d.jsp?m=1102570618937&p=oi" style="text-decoration:none; font-weight:bold; font-family:Arial; font-size:13px; color:#000000;" target="_blank">Join our FREE Subscriber List</a></td>
</tr>
</table>
</div>
<!-- END: Constant Contact Border Email List Button --> </td>
<td width="299" height="65"><form action="http://www.applmgt.net/SearchResults.html" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="011832208051241677611:jmojvtncciq" />
<input type="hidden" name="cof" value="FORID:9" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
</table><ul id="MenuBar1" class="MenuBarHorizontal">
<table width="780" border="0" >
<tr>
<td><li><a class="MenuBarItemSubmenu" href="index.html"> Home</a>
<li><a class="MenuBarItemSubmenu" href="#"> Employment
</a>
<ul>
<li><a href="employINTRO.html">Introduction</a></li>
<li><a href="aboutWages.html">Wages</a></li>
<li><a href="employOG.html">Oil & Gas</a></li>
<li><a href="employSERV.html">Service/Retail</a></li>
<li><a href="employCONST.html">Construction</a></li>
<li><a href="employGOVED.html">Gov't/Education</a></li>
<li><a href="employFOREST.html">Forestry</a></li>
<li><a href="employTRANS.html">Transportation</a></li>
<li><a href="employHEALTH.html">Health</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#"> Training & Education</a>
<ul>
<li><a href="trainINTRO.html">
<script type="text/javascript" src="SpryAssets/SpryMenuBar.js"></script>
Introduction</a></li>
<li><a href="trainSKILLS.html">General Skills</a></li>
<li><a href="trainSAFE.html">Safety</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#"> About Wood Buffalo</a>
<ul>
<li><a href="aboutINTRO.html">Introduction</a></li>
<li><a href="MediaEvent.html">Coming Events</a></li>
<li><a href="AboutCostIntro" font size"12" class="MenuBarItemSubmenu">Cost of Living</a>
<ul>
<li><a href="AboutCostHouse.html">Housing</a></li>
<li><a href="AboutCostAcc.html">Other Accommodations</a></li>
</ul>
</li>
<li><a href="aboutStats.html">What's it like in Fort McMurray?</a></li>
<li><a href="aboutBeforeMove.html">Before You Move</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#"> Labour Market News</a>
<ul>
<li><a href="mediaINTRO.html">Introduction</a></li>
<li><a href="mediaLMN.html">Labour Market News</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#">Links</a>
<ul>
<li><a href="linksINTRO.html">Introduction</a></li>
<li><a href="AboutCostIntro" class="MenuBarItemSubmenu">Cost of Living</a>
<ul>
<li><a href="AboutCostHouse.html">Housing</a></li>
<li><a href="AboutCostAcc.html">Other Accommodations</a></li>
</ul>
</li>
<li><a href="linksEMPLIntro.html">Employer Websites</a></li>
<li><a href="linksRESIntro.html">Resources</a></li>
<li><a href="linksFACTSIntro.html">Fast Facts</a></li>
<li><a href="ContactUS.html">Contact Us</a></li>
<li><a href="privactStatement.html">Privacy Statement</a></li>
<li><a href="disclaimer.html">Disclaimer</a></li>
<li><a href="siteMAP.html">Site Map</a></li>
</ul>
<ul>
</td>
</tr> </td>
</tr>
</table>
</table>
<table width="764" border="0" cellspacing="0" cellpadding="4">
<tr>
<td width="760" height="40" bgcolor="#FFFFFF"><p><font color="#4E2C03" size="4" face="Arial, Helvetica, sans-serif"><strong>Process
operators: Maintaining a career in the oil sands industry</strong></font><img src="images/darkLine.gif" width="750" height="3"></p>
</td>
</tr>
</table>
<table width="764" border="0" cellspacing="0" cellpadding="4">
<tr>
<td colspan="2" valign="top"><table width="760" border="0" cellspacing="0" cellpadding="4">
<tr>
<td width="135" valign="top"><table width="165" height="188" border="0" cellpadding="1" cellspacing="0" bgcolor="FFFFFF">
<tr>
<td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong>Main
story</strong></font></td>
</tr>
<tr>
<td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong><img src="images/mediumLine120.gif" width="120" height="10"></strong></font></td>
</tr>
<tr>
<td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong>What's in a Name?</strong></font></td>
</tr>
<tr>
<td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong><img src="images/mediumLine120.gif" width="120" height="10"></strong></font></td>
</tr>
<tr>
<td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong>Schools Offering Programs</strong></font></td>
</tr>
<tr>
<td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong><img src="images/mediumLine120.gif" width="120" height="10"></strong></font></td>
</tr>
<tr>
<td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong>Apply for an Oilsands Job</strong></font></td>
</tr>
<tr>
<td><p><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong><img src="images/mediumLine120.gif" width="120" height="10"></strong></font></p></td>
</tr>
</table>
<p> </p>
<table width="155" height="188" border="1" cellpadding="10" cellspacing="0" bordercolor="4e2c03" bgcolor="ddcb8f">
<tr>
<td><div align="left">
<p><font color="#4E2C03" size="3" face="Arial, Helvetica, sans-serif"><em>"A
process operator, whether in Fort McMurray, or in a gas
plant in Medicine Hat, basically processes the upstream
oil and gas until it's purified enough to go through
a pipeline outside the gates of the plant." </em></font></p>
<p align="right"><font color="4e2c03" size="2" face="Arial, Helvetica, sans-serif"><strong>John Cook,<br>
associate dean of technology, Keyano College</strong></font></p>
</div></td>
</tr>
</table> <p> </p>
<table width="155" height="188" border="1" cellpadding="10" cellspacing="0" bordercolor="4e2c03" bgcolor="#FFFFFF">
<tr>
<td><div align="left">
<p align="center"><font color="#4E2C03" size="3" face="Arial, Helvetica, sans-serif"><strong><a href="contactUS.html"><img src="images/bulletin/LMNWB200810vFinal1.gif" width="121" height="158" border="0"></a></strong></font><font color="#000000" size="3" face="Arial, Helvetica, sans-serif"><strong>Free Subscribe
Now!</strong></font></p>
</div>
</td>
</tr>
</table> <p> </p>
<table width="155" height="188" border="1" cellpadding="10" cellspacing="0" bordercolor="4e2c03" bgcolor="#FFFFFF">
<tr>
<td><div align="left">
<p align="center"><a href="mediaLMN1208.html"><font color="#000000" size="4.5" face="Arial, Helvetica, sans-serif"><strong>Next
issue...</strong></font></a></p>
<p align="center"><a href="mediaLMN1208.html"><strong><font color="333399" size="3" face="Arial, Helvetica, sans-serif"><img src="images/htmlbulletinimages/1008v5.png" width="125" height="159" border="0"></font></strong></a></p>
<p align="center"><a href="mediaLMN1208.html"><strong><font size="3" face="Arial, Helvetica, sans-serif">Janitoral</font></strong></a></p>
<p align="center"><a href="mediaLMN1208.html"><img src="images/htmlbulletinimages/1008v6.png" width="123" height="141" border="0"> </a></p>
<p align="center"><a href="mediaLMN1208.html"><strong><font size="3" face="Arial, Helvetica, sans-serif">Security</font> </strong></a></p>
</div>
</td>
</tr>
</table> <p> </p> <table width="155" height="141" border="1" cellpadding="10" cellspacing="0" bordercolor="4e2c03" bgcolor="#FFFFFF">
<tr>
<td><div align="left">
<p align="center"><font color="#000000" size="2" face="Arial, Helvetica, sans-serif"><strong><font color="#FF9933">If
you like this article, you might also like:</font></strong></font></p>
<p align="center"><font color="#FF0000" size="3.5" face="Arial, Helvetica, sans-serif"><strong><a href="mediaLMN1206.html">Employment in the oilsands</a></strong></font></p>
</div>
</td>
</tr>
</table> <p> </p></td>
<td width="605" valign="top"><p><div class="floatrightgrey">
<p><img src="images/htmlbulletinimages/1008v1" width="325" height="221"> </p>
<p><font size="1" face="Arial, Helvetica, sans-serif"><em>Process operators are expected to be in high demand in the next few years. One study reported that between 2006 and 2020, over 5,000 new plant and facility operators will be needed in the oil sands.</em></font></p>
</div>
<font size="2" face="Arial, Helvetica, sans-serif">One study reported that between 2006 and 2020, over 5,000 new plant
and facility operators will be needed in the oil sands. As construction
of more and more oil sands projects ends and production begins, there
is a change in the kind
of workers most needed. More maintenance trades are needed and less
construction trades workers are needed. Also, companies now need more
operating and technical employees, such as process operators, power
engineers, and instrumentation technicians.<p>A study recently put out by the Government of Alberta (Report on Phase
2 of the Oil Sands Labour Resource Study) found that from 2006 to 2020,
15,000 new employees would be needed for operations and maintenance
in the oil sands industry. The study says there will be a need for
over 5,000 plant and facility operators between 2006 and 2020. This
includes process operators
(noc 9232) and power engineers (noc 7351).
</p><p><div class="floatleft">
<p><img src="images/htmlbulletinimages/1008v2" width="356" height="235">
<em><font size="1"><br>
Over the next few years, more plants and facilities will open up and the
demand for process operators and power engineers will increase. There is
advancement in this industry and even movement between industries.</font></em></p>
</div>
</font>
<p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Opportunities</strong><br>
Recently, there have been over 80 job postings for process operators
and power engineers, so there is great opportunity in Wood Buffalo
for this occupation.
</font><font size="2"> </font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">“Attrition
is one reason (for the increased need) because a lot of the older
guys are going to be coming to the age of retirement within a
very short time and they will have to be replaced,” says
John Cook, associate dean of technology with Keyano College. “The
other reason is expansion of the existing plants and new plants
starting up.”</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">Hazel White,
recruitment advisor with Syncrude Canada Ltd. says they recently
had a large number of process operator
positions
posted online
because of their practice to promote staff within the company.While
this is an entry-level position, most companies require that
their employees have at least a high school diploma and their fourth
class power engineering ticket. For more information on education,
see Schools
on page 4.</font><font face="Arial, Helvetica, sans-serif"> </font> </p>
<p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Process operators</strong><br>
There are a few different kinds of process operators: refinery/upgrader
process operator, gas plant operator, and oil and gas pipeline operator,
to name a few. The jobs found in Fort McMurray are generally related
to mineral and hydrocarbon processing in the oil sands industry.</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">When
searching for jobs, be aware that there are a number of different
job titles for process operators. Usually, the title of the job
is based on the process the employee is involved with or by the
unit
in which the employee works. See the list on this page for
other common
job titles found recently on Job Bank.<img src="images/htmlbulletinimages/1008v3.png" width="209" height="365" align="right" class="floatrightnocut"></font></p> <p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Movement between
industries</strong><br>
There are industries other than oil and gas where process operators
can work, such as pulp mills and chemical plants. They may process
different products, but employers will often consider hiring workers
from these other industries.</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">“We have been successful in taking people that had previously worked
in a paper mill,” says White with Syncrude. “The processes
are certainly different. They’re dealing with paper, rather
than oil, but we recently hired 18 (previous mill workers) and
it’s
my understanding that all 18 have gotten their fourth class tickets
since coming to Syncrude. We still need people with refinery experience,
but it is possible.” </font></p> <p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Power engineering</strong><br>
Process operators in the Fort McMurray area generally have their
fourth or third class power engineering certificate, which allows
them to
process steam and operate boilers. Other process operators, such
as pulp mill operators, don’t necessarily need this. </font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">In
order to be called a power engineer, a person must be certified
through the Alberta Boilers Safety Association to operate pressure
equipment (www.absa.ca). </font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">There are
four different levels of power engineer—the lowest
is fourth class, going up to first class. For more information
on the Alberta Boilers Safety Association, contact their Fort
McMurray office
at 780-714-3067.</font></p> <p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Field and control
room operators</strong><br>
There are basically two levels of process operators in Fort McMurray:
field operators and control room operators (or board operators). </font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">“</font><font size="2" face="Arial, Helvetica, sans-serif">Primarily
when someone is starting out, they’re in the field,” says
Cook. “After a few years they can become a board
operator if they want to do that. They are more experienced
and are
kind of like
the team lead. They tell the field people what needs to
be done and if it needs manual operation, (the field operators)
go out and do it—turning
valves, adjusting an instrument to control temperature,
pressure, flow, or level.”</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">Process
operators are responsible for the initial separation processes
or the special treatment
required to ensure that
impurities such
as water and sediments are removed from oil and gas in
the field. Once
separated, the oil or gas is transported by pipeline
to refineries, gas plants or markets.</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">Some duties
of a process operator are operating equipment to ensure that
the oil meets
specifications before it
goes into
a pipeline.
Some of the equipment could be:<img src="images/htmlbulletinimages/1008v4" width="302" height="201" class="floatrightnocut"></font></p>
<ul>
<li><font size="2" face="Arial, Helvetica, sans-serif">compressors</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">dehydration
units</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">vacuum and atmospheric
distillation columns</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">cokers</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">fractionators</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">pumps</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">compressors</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">steam
turbines</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">heat exchangers</font></li>
</ul> <p><font size="2" face="Arial, Helvetica, sans-serif">“A process operator, whether in Fort McMurray, or in a gas plant
in Medicine Hat, basically processes the upstream
oil and gas until it’s
purified enough to go through a pipeline
outside the gates of the plant,” says
Cook. </font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Co-op education</strong><br>
There are many power engineering programs around northern Alberta
(see below) and some process operating courses. Keyano College
offers co-ops
for both courses and one of the advantages of this program,
besides being in Fort McMurray, is the job placements which
are provided.</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">“We only take as many students as we can guarantee work placement
spots, and students have to compete for a seat,” says Cook. “We
look at their educational background, their marks and then
there’s
an interview process with Keyano staff and industry people—just
like applying for a job.”</font></p> <p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Salary and benefits</strong><br>
The pay range for this occupation varies greatly depending
on experience and training, but the range is about $20
to $47 per
hour, but averages
about $30 to $40 per hour. </font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">Because these
positions are for ongoing production and maintenance of oil
sands projects,
employees are expected
to move to
Fort McMurray, regardless of whether they are doing shift
work or
not.</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">Over the
next few years, there will be many more opportunities for people
wanting to get into a career in process
operating
or power engineering.</font></p></td>
</tr>
</table></td>
</tr>
<tr>
<td width="586"> </td>
</tr>
</table>
<table width="760" border="0" cellspacing="0" cellpadding="4" bgcolor="FFFFFF">
<tr>
<td height="10" colspan="2" bgcolor="#FFFFFF"><img src="images/darkLine.gif" width="750" height="3"></td>
</tr>
<tr>
<td width="160" height="20" bgcolor="#FFFFFF"><div align="left"><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif">This
website is funded by the Government of Alberta. </font></div>
</td>
<td width="199" align="center" valign="middle" bgcolor="#FFFFFF"><div align="right"><img src="images/GoA - EI 2Color C.PNG" width="170" height="31" border="0"></div>
</tr>
<tr>
<td height="8" colspan="2" bgcolor="#DDCB8F"><table width="760" border="0" cellspacing="0" cellpadding="4">
<tr>
<td width="108"><div align="center"><font size="2"><strong><font color="#DDCB8F" face="Arial, Helvetica, sans-serif"><strong><font color="#4E2C03" face="Arial, Helvetica, sans-serif"><a href="index.html">Home</a></font></strong></font></strong></font></div>
</td>
<td width="104"><div align="center"><font size="2"><strong><font color="#DDCB8F" face="Arial, Helvetica, sans-serif"><strong><font color="#4E2C03" face="Arial, Helvetica, sans-serif"><a href="linksINTRO.html">Links</a></font></strong></font></strong></font></div>
</td>
<td width="117"><div align="center"><font size="2"><strong><font color="#DDCB8F" face="Arial, Helvetica, sans-serif"><strong><font color="#4E2C03" face="Arial, Helvetica, sans-serif"><a href="contactUS.html">Contact
Us</a></font></strong></font></strong></font></div>
</td>
<td width="151"><div align="center"><font size="2"><strong><font color="#4E2C03" face="Arial, Helvetica, sans-serif"><a href="privacyStatement.html"> Privacy
Statement</a></font></strong></font></div>
</td>
<td width="119"><div align="center"><font size="2"><strong><font color="#4E2C03" face="Arial, Helvetica, sans-serif"><a href="disclaimer.html">Disclaimer</a></font></strong></font></div>
</td>
<td width="113"><div align="center"><font size="2"><strong><font color="#4E2C03" face="Arial, Helvetica, sans-serif"><a href="siteMAP.html">Site
Map</a></font></strong></font></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>Hi Nadia thanks for your help in trying to fix the spry menus.
I am new to Dreamweaver and therefore would appreciate a bit more help with the issues you identified.
I did replace the doctype. As for removing the menu from a table and putting it into a div, would you be able to identify in the code below how I would do that? Thanks
Spry Menu Code
</table><ul id="MenuBar1" class="MenuBarHorizontal">
<table width="780" border="0" >
<tr>
<td><li><a class="MenuBarItemSubmenu" href="index.html"> Home</a>
<li><a class="MenuBarItemSubmenu" href="#"> Employment
</a>
<ul>
<li><a href="employINTRO.html">Introduction</a></li>
<li><a href="aboutWages.html">Wages</a></li>
<li><a href="employOG.html">Oil & Gas</a></li>
<li><a href="employSERV.html">Service/Retail</a></li>
<li><a href="employCONST.html">Construction</a></li>
<li><a href="employGOVED.html">Gov't/Education</a></li>
<li><a href="employFOREST.html">Forestry</a></li>
<li><a href="employTRANS.html">Transportation</a></li>
<li><a href="employHEALTH.html">Health</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#"> Training & Education</a>
<ul>
<li><a href="trainINTRO.html">
<script type="text/javascript" src="SpryAssets/SpryMenuBar.js"></script>
Introduction</a></li>
<li><a href="trainSKILLS.html">General Skills</a></li>
<li><a href="trainSAFE.html">Safety</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#"> About Wood Buffalo</a>
<ul>
<li><a href="aboutINTRO.html">Introduction</a></li>
<li><a href="MediaEvent.html">Coming Events</a></li>
<li><a href="AboutCostIntro" font size"12" class="MenuBarItemSubmenu">Cost of Living</a>
<ul>
<li><a href="AboutCostHouse.html">Housing</a></li>
<li><a href="AboutCostAcc.html">Other Accommodations</a></li>
</ul>
</li>
<li><a href="aboutStats.html">What's it like in Fort McMurray?</a></li>
<li><a href="aboutBeforeMove.html">Before You Move</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#"> Labour Market News</a>
<ul>
<li><a href="mediaINTRO.html">Introduction</a></li>
<li><a href="mediaLMN.html">Labour Market News</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#">Links</a>
<ul>
<li><a href="linksINTRO.html">Introduction</a></li>
<li><a href="AboutCostIntro" class="MenuBarItemSubmenu">Cost of Living</a>
<ul>
<li><a href="AboutCostHouse.html">Housing</a></li>
<li><a href="AboutCostAcc.html">Other Accommodations</a></li>
</ul>
</li>
<li><a href="linksEMPLIntro.html">Employer Websites</a></li>
<li><a href="linksRESIntro.html">Resources</a></li>
<li><a href="linksFACTSIntro.html">Fast Facts</a></li>
<li><a href="ContactUS.html">Contact Us</a></li>
<li><a href="privactStatement.html">Privacy Statement</a></li>
<li><a href="disclaimer.html">Disclaimer</a></li>
<li><a href="siteMAP.html">Site Map</a></li>
</ul>
<ul>
</td>
</tr> </td>
</tr>
</table> -
CS6 Spry Menu issue with iPads
I created a website using Dreamweaver CS6 and everything is working fine except that iPads are having an issue with the Spry menu. When they make a selection they can't select another menu option where it is another menu from the main tree or a submenu item.
Spry uses a hover event, something that touch screens do not understand. You could go into the JS and change the hover into a click event, but then you are still stuck with old and discarded technology. Have a look here http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l.
There are a number of alternatives to choose from. Just Google the subject.
Want to know what I use? Have a look here http://foundation.zurb.com/docs/components/topbar.html -
Spry Menu Issues - Not functioning correctly in Microsoft IE
Hi there,
I am fairly new to web design and dreamweaver.
I have constructed a simple page that I am happy with complete with Spry Menu which again I am happy with. However this spry menu works perfectly in firefox but for some reason on IE my spry menu does not function correctly and goes all over my page!
CORRECT VERTICAL MENU - FIREFOX -
INCORRECT MENU FUNCTION! - IE -
See my CSS Code below for the spry menu in questions - if this helps -
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: inherit;
font-size: 100%;
cursor: default;
width: 1000px;
height: 47px;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: medium;
position: relative;
text-align: center;
cursor: pointer;
width: 318px;
float: left;
height: auto;
background-color: #000000;
border: 2px solid #FFF;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: auto;
cursor: default;
width: auto;
position: absolute;
left: -1000em;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 318px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin-top: -5%;
margin-right: 0;
margin-bottom: 0;
margin-left: 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0px;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #FFFFFF;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #bcbdb9;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #000;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #000;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inherit;
f\loat: left;
background: #FFF;
** I am also using Windows 8 and Dreamweaver CS6 If this helps.**
Any help with this would be fantastic as I need this to be resolved before the end of the week.
Any further information required please message me to find out.
Thanks,
JamieTHE CONFLICT IS BETWEEN YOUR DOCUMENT CSS AND THE SPRY CSS.
It is because the <li> and <a> TAGS have been styled and therefore OVERRIDDEN THE SPRY CSS.
Use CLASS TAGS e.g. <li class="anyclass"> and <a class="anyclass">
and STOP USING THE <a> TAGS.
N.b. you may need to unstyle any <a> or other TAGS that conflict with the SPRY CSS. (However it's best to start over knowing that styling basic tags may affect the SPRY CSS). -
I am using a Spry horizontal menu, which looks fine in
firefox and opera, but in IE7 & IE8 there is a small (maybe
3px) unwanted gap between the top of the menu and the bottom of the
header element above it. I've been looking all over, and it sounds
like the "white space" bug, but none of the listed fixes I try seem
to have any effect.
Does anyone know what I'm missing? Is this a normal problem?
Am I just too dense to notice the obvious?any ideas? anyone?
-
My page is here: http://www.healthquestpt.com/lwh/
The first 2 tabs dropdown menus work fine, the rest just arent there. Please help.
Thanks!!Have a look at the border here
ul.MenuBarHorizontal a
display: block;
background-color: #6d6f71;
text-decoration: none;
text-align: center;
padding: 4px 0;
color: #fff;
border-top: 1px solid #6d6f71;
border-right: 1px solid #6d6f71;
border-left: 1px solid #6d6f71;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-khtml-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
and compare that to this border
ul.MenuBarHorizontal a:hover
background-color: #fff;
color: #1b75bc;
border-top: 2px solid #6d6f71;
border-right: 2px solid #6d6f71;
border-left: 2px solid #6d6f71;
They are both applied to the same element, just a different state. Sure it will jump around. To see what I mean, exaggerate the result by increasing the border width on one of the states.
Gramps -
Spry Menu code patch for IE browser?
Does anyone remember the Adobe e-blast with the coding patch that was suppose to fix spry menu issues with IE browser? Now that I need it, I can not find it anywhere.
Hi PBSOakley,
You've posted your question in a forum for BrowserLab, a web service for cross-browser testing of web pages. I think you'll have much better luck if you repost your question in the Spry forums here:http://forums.adobe.com/community/labs/spry
Hope this helps,
Mark -
Spry menu Bar I.E. positioning issues?
Hi,
I, like many folks I've seen on various forums have the same problem with my spry menu appearing at the top of I.E browsers instead of under the menu bar. I've tried all sorts of fixes that I've found and have updated to the latest version of Spry. I am using CS3. Could anyone please, please help? I'm not sure where else to go as I've spent the last week on the web trying to resolve the issue. Everything works great on Safari and Firefox. My URL is http://www.visiongreeninvestments.org
Thanks in advance to anyone who can point me in the right direction.
My CSS is:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 130px;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
background-image: none;
ul.MenuBarHorizontal ul li a
width: 7.8em;
background-image: none;
background-color: #669933;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 0px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #669933;
color: #000066;
text-decoration: none;
font-family: Times;
font-size: 14px;
font-weight: normal;
background-image: url(../homepagelayout/greenbarbg.jpg);
background-repeat: repeat;
padding-top: 0.5em;
padding-right: 0.75em;
padding-bottom: 0.5em;
padding-left: 0.75em;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #669933;
color: #FFF;
background-image: none;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #669933;
color: #FFF;
background-image: none;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(../homepagelayout/greenbarbg.jpg);
background-repeat: repeat;
background-color: #669933;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: none;
background-position: 95% 50%;
background-color: #669933;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: none;
background-position: 95% 50%;
background-color: #669933;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: none;
background-repeat: repeat;
background-position: 95% 50%;
background-color: #669933;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
/*insert this bracket/*I see that the online version has already been upgraded to Spry 1.61 and that it now works.
Gramps
PS Before you change anything, have a look here http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one. This will ensure that you don't make a mess of it this time around. -
Hi,
I have a slight problem with a spry menu bar when viewed in IE9beta, when you hover over a menu item the hover background does not always complety fill the area immediately, eventualy it does. This problem only affects IE9beta, I have tested it in the latest versions of safari, opera, firefox, and chrome.
Any help with this would be appreciated,
Richard.
You can view the menu at www.eandhbaxendale.com and I have included the css and widget script below
<script type="text/javascript">
// BeginOAWidget_Instance_2141544: #BaxMenuBar
var BaxMenuBar = new Spry.Widget.MenuBar2("#BaxMenuBar", {
widgetID: "BaxMenuBar",
widgetClass: "MenuBar BaxMenuBarFixedLeft",
insertMenuBarBreak: true,
mainMenuShowDelay: 100,
mainMenuHideDelay: 200,
subMenuShowDelay: 200,
subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
</script>
/*menu bar start*/
#BaxMenuBar {
background-color:#000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 10px;
font-style: normal;
padding:0;
border: #fff solid 1px;
.MenuBar br {
display:none;
.BaxMenuBarLeftShrink {
float: left;
width: auto;
.BaxMenuBarRightShrink {
float: right;
width: auto;
.BaxMenuBarFixedLeft {
float: left;
width: 882px;
.BaxMenuBarFixedCentered {
float: none;
width: 80em;
margin-left:auto;
margin-right:auto;
.BaxMenuBarFixedCentered br {
clear:both;
display:block;
.BaxMenuBarFixedCentered .SubMenu br {
display:none;
.BaxMenuBarFullwidth {
float: left;
width: 100%;
#BaxMenuBar .MenuItemContainer {
padding: 0px;
margin: 0;
#BaxMenuBar .MenuItem {
padding: 0px 14px 0px 0px;
background-color:#000000;
border-width:1px;
border-color: #fff;
border-style: none solid none none;
#BaxMenuBar .MenuItemFirst {
border-style: none solid none none;
#BaxMenuBar .MenuItemLast {
border-style: none solid none none;
#BaxMenuBar .MenuItem .MenuItemLabel {
text-align:center;
line-height:1.4em;
color:#fff;
background-color:#000;
padding: 6px 15px 6px 29px;
width: 10em;
width:auto;
.SpryIsIE6 #BaxMenuBar .MenuItem .MenuItemLabel {
width:1em;
#BaxMenuBar .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 10px;
font-style: normal;
background-color:#666;
padding:0px 2px 0px 0px;
border-width:1px;
border-color: #fff;
border-style: solid solid none solid;
#BaxMenuBar .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#BaxMenuBar .SubMenu .MenuItemFirst .MenuItemLabel {
padding-top: 6px;
#BaxMenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#BaxMenuBar .SubMenu .MenuItemLast .MenuItemLabel {
padding-bottom: 6px;
#BaxMenuBar .SubMenu .MenuItem .MenuItemLabel {
text-align:left;
line-height:1em;
background-color:#666;
color:#ffffff;
padding: 6px 12px 6px 5px;
width: 7em;
width:auto;
#BaxMenuBar .MenuItemHover {
background-color: #666;
border-color: #fff;
#BaxMenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel {
background-color: #666;
color: #fff;
#BaxMenuBar .MenuItemHover .MenuItemLabel {
background-color: #666;
color: #fff;
#BaxMenuBar .SubMenu .MenuItemHover {
background-color: #999;
border-color: #fff;
#BaxMenuBar .SubMenu .MenuItemHover .MenuItemLabel {
background-color: #999;
color: #fff;
#BaxMenuBar .SubMenuVisible {
background-color: #666;
min-width:100%;
border: #fff 0px none;
#BaxMenuBar.MenuBar .SubMenuVisible {
top: 100%;
left:0px;
z-index:10;
#BaxMenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px;
#BaxMenuBar .MenuLevel1 .SubMenuVisible {
background-color: #666;
min-width:0px;
top: 0px;
left:100%;
.SpryIsIE6 #BaxMenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel {
background-color: #666;
color: #fff;
.SpryIsIE6 #BaxMenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel {
background-color: #999;
color: #fff;
.SpryIsIE6 #BaxMenuBar .SubMenu .SubMenu {
margin-left: -0px;
/*menu bar end*/I must have looked at it in another browser, sorry.
Had another look at it and indeed it may become an issue in IE9, but because IE9 is still in beta, anything can change.
Watch this space.
Gramps.
Oh, you could always add <meta http-equiv="X-UA-Compatible" content="IE=7" /> to your document. -
Spry Menu Bar 2.0 auto-width issues for sub items
I am testing the spry menu bar 2.0 and it displays perfectly in IE 9.0/8.0 but the auto width is not working for Firefox (testing 3.6.16), Chrome (testing 10.0.648.205), or Safari for windows. Content is being driven by PHP and MySQL. This is the first time I have come across something working better in IE than the other browsers. Great job on the IE patch script. How do I get the other browsers to cooperate? I moved the in page CSS generated by the widget browser to it's own CSS (called spry_menubar2_horizontal_sample_layout.css) and am including the files below in the head. The links below point to an exact copy of the files as the working copy of the files is located elsewhere.
SpryMenuBasic.css - link
SpryMenuBasicSkin.css - link
spry_menubar2_horizontal_sample_layout.css - link
SpryDOMUtils.js - link
SpryDOMEffects.js - link
SpryWidget.js - link
SpryMenu.js - link
SpryMenuBarKeyNavigationPlugin.js - link
SpryMenuBarIEWorkaroundsPlugin.js - link
the in page script is loacated directly under the <ul> lists.
Similar example with php removed:
<div id="navigation">
<ul id="MenuBar">
<li> <a href="http://www.videoonpointe.com/">Home</a> </li>
<li> <a href="#">Gallery</a>
<ul>
<li> <a href="#">View Gallery</a></li>
<li> <a href="#">Select Gallery</a>
<ul>
<li> <a href="#">Main Gallery</a>
<ul>
<li> <a href="#">a gallery</a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">Edit this Gallery</a></li>
<li> <a href="#">Create Gallery</a> </li>
<li> <a href="#" onClick="return confirm('This action cannot be undone. Are you sure?');">Delete this Gallery</a></li>
</ul>
</li>
<li> <a href="#">Photo</a>
<ul>
<li> <a href="#">Edit Photo</a> </li>
<li> <a href="#" onClick="return confirm('Deletion of this image cannot be undone. Are you sure?');">Delete Photo</a> </li>
<li> <a href="#">Set as Gallery Thumbnail</a> </li>
<li> <a href="#">Change Watermark</a> </li>
</ul>
</li>
<li> <a href="#">Pricesheet</a>
<ul>
<li> <a href="#">Pricesheet Admin</a> </li>
</ul>
</li>
</ul>
<script type="text/javascript">
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
widgetID: "MenuBar",
widgetClass: "MenuBar MenuBarLeftShrink",
insertMenuBarBreak: true,
mainMenuShowDelay: 100,
mainMenuHideDelay: 200,
subMenuShowDelay: 200,
subMenuHideDelay: 200
</script>
</div>
Has anyone encountered this issue before? Any thoughts on how it can be fixed? Thank you for your help.I am surprised no one has responded yet. Surely someone has encountered this before. Any thoughts?
-
Spry Menu 2.0 issues in IE7.. yes another one!
I have CS4, and have used the widget browser to create a Spry Menu 2.0 and have imported it to my site. It displays fine in every browser except for IE7. I have been reading a LOT of threads on issues similiar to this one, so I'm prepared to tell everyone I know to upgrade to at least IE8!! However, I would like to fix it if possible. The menu bar is located in an include file and is attached to all my pages through the php function. I have made zero changes to the css code since I imported it into the site.
I also am wondering why there are two css pages for the menu bar.??
Any help would be appreciated..
One of the pages on the site is: michaelandrewshairstudio.com/offers.php
That page is: ( I have taken out some meta tags and content, but the div's are all still in place.) I also deleted some commented tags by accident when I imported it..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Michael Andrews Hair Salon Offers</title>
<link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBar.css" rel="stylesheet" type="text/css" />
<link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src="Spry-UI-1.7/includes/SpryDOMUtils.js"></script>
<script type='text/javascript' src="Spry-UI-1.7/includes/SpryDOMEffects.js"></script>
<script type='text/javascript' src="Spry-UI-1.7/includes/SpryWidget.js"></script>
<script type='text/javascript' src="Spry-UI-1.7/includes/SpryMenu.js"></script>
<script type='text/javascript' src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js"></script>
<script type='text/javascript' src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js"></script>
<link href="CSS/stylesA.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outerwrapper">
<div id="header">
<div id="navbar">
<?php include("Spry-UI-1.7/includes/SpryMenuBar.php"); ?>
</div>
</div>
<div id="mainbody">
<div id="logo">
</div>
<hr />
<div id="content">
</div>
</div>
<div id="footer">
<div id="footernav">
</div>
<div id="footertext">
</div>
</div>
</div>
</body>
</html>
SpryMenuBar.css
#MenuBar {
background-color:#333;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
MenuItem, and MenuItemLabel
at a given level all use same definition for ems.
Note that this means the size is also inherited to child submenus,
so use caution in using relative sizes other than
100% on submenu fonts. */
font-weight: normal;
font-size: 14px;
font-style: normal;
padding:0;
border-color: #999999 #999999 #999999 #999999;
border-width:3px;
border-style: outset outset outset outset;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 80em;
.MenuBarFixedCentered {
float: none;
width: 80em;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
For most items, we have to do top or bottom padding or borders only on the MenuItem
or a child so we keep the entire submenu tiled with items.
Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
padding: 0px 24px 0px 0px;
background-color:#333333;
border-width:1px;
border-color: #cccccc #ffffff #cccccc #999999;
border-style: none none none solid;
#MenuBar .MenuItemFirst {
border-style: none none none none;
#MenuBar .MenuItemLast {
border-style: none none none solid;
#MenuBar .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#cccccc;
background-color:#333333;
padding: 6px 15px 6px 39px;
width: 10em;
width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
font-style: normal;
background-color:#666666;
padding:0px 2px 0px 0px;
border-width:1px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:#666666;
color:#cccccc;
padding: 6px 12px 6px 5px;
width: 7em;
width:auto;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: #333333;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: #333333; /* consider exposing this prop separately*/
color: #ffffff;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: #333333;
color: #ffffff;
#MenuBar .SubMenu .MenuItemHover {
background-color: #666666;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: #666666;
color: #ffffff;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color:#333;
min-width:100%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
and your personal taste.
0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
on MenuItemContainer and MenuItem on the parent
menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
the dropdown with the left of the menu item label.*/
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: #ffffff;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: #333333; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: #666666; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
SpryMenuBasic.css
/* SpryMenuBasic.css - version 0.5 - Spry Pre-Release 1.7 */
/* Copyright (c) 2010. Adobe Systems Incorporated. All rights reserved. */
/* This is the css for a basic Spry 2 MenuBar.
* The first section is basic layout, and should in general not need to be modified.
* The final section of this file specifies images to use for arrows for the menu. These
* are either down or right-pointing as required by horizonatal or vertical layouts. You
* can either replace the referenced images with your own, or you can modify these rules to
* point to your won images.
* These rules are supplemented by those specified in the OAM file for inclusion in the html document,
* or alternatively, the file SpryMenuBarBasicSkin.css which is included with this widget. */
/* Resets for ul and li in menus */
.MenuBar .MenuBarView, .MenuBar .SubMenuView {
display:block;
list-style:none;
margin:0;
padding:0;
/*** Layout Rules for Basic Menu ***/
/* Top Level MenuBar
* Because we float the MenuItemContainers in the MenuBar, we have to make sure the menubar wrapper expands to hold them all.
* The simplest way is to float the widget wrapper
.MenuBar { /* overridden by .MenuBarVertical version of this rule */
float:left;
width:100%;
.MenuBarVertical {
float:left; /* Used to make menubar shirink to fit contents */
width:auto;
/* SubMenus */
.MenuBar .SubMenu {
display:block;
position:absolute;
top:0;
left:-10000px; /* By default, all non-visible submenus are hidden by moving way to the west */
padding:0;
/* First level of submenus - pulls down from horizontal menubar, right from vertical */
.MenuBar .SubMenuVisible{ /* overridden by .MenuBarVertical version of this rule */
top:100%;
left:0px;
.MenuBarVertical .SubMenuVisible {
top:0px;
left:100%;
/* All submenus below level 1. All pullout to the right */
.MenuBar .SubMenu .SubMenuVisible {
display:block;
position:absolute;
top:0px;
left:100%;
/* MenuItems, MenuItemLabels, and MenuItemContainers */
.MenuBar .MenuItem {
display:block;
text-decoration:none;
.MenuBar .MenuItemLabel {
display:block;
.MenuBar .MenuItemContainer {
position:relative;
white-space:nowrap;
float:left; /* overridden by .MenuBarVertical version of this rule */
display:block;
margin:0;
padding:0;
.MenuBarVertical .MenuItemContainer {
float:none;
.MenuBar .SubMenu .MenuItemContainer {
float:none;
/* Layout Rules needed by IE6 - excluded from other browsers */
.SpryIsIE6 .SubMenu .SubMenu {
width:100px;
height:1%;
.SpryIsIE6 .MenuBar .SubMenuVisible .SubMenuVisible {
width:auto;
/* End Layout section */
* Arrows - This section specifies arrow images for a submenu dropdowns in Basic SpryMenu.
.MenuBar .MenuItemLabel{
background-image:none;
/* For all arrows used here, we depend upon the image to push itself away from right edge, or the user can add right padding to the MenuItem */
.MenuBar .MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuDownGrey.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBar .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuDownWhite.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBarVertical .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBarVertical .MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBar .SubMenu .MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBar .SubMenu .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
/* IE6 rules for Arrows */
.SpryIsIE6 .MenuBar .MenuItemWithSubMenuHover .MenuItemLabel{
background-image:url("images/ArrowMenuDown.gif");
background-position:right center;
background-repeat:no-repeat;
.SpryIsIE6 .MenuBarVertical .MenuItemWithSubMenuHover .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.SpryIsIE6 .MenuBar .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;I love your subject line
Spry Menu 2.0 issues in IE7.. yes another one!
It is us as designers/developers that need to create websites for all current browsers. No sense in blaming the browsers, although in this case we could blame Spry Menu 2.0.
Problem with that is that Spry Menu 2.0 has been successfully tested in all modern browsers.
This leaves us with just one possibility, the designer/developer has erred somewhere along the line. After having checked the support files (JS and CSS) and looked at the markup, we now go to the constructor and see the following
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
widgetID: "MenuBar",
widgetClass: "MenuBar MenuBarLeftShrink",
insertMenuBarBreak: true,
A comma after the last value.
I also am wondering why there are two css pages for the menu bar.??
One is the standard CSS for the menubar and under normal circumstances, should not be touched; the other is for the convenience of the designer/developer so that he/she can tweak the menubar to suit. If you wish, you can combine both. In all cases, keep in mind that the CSS for the standard (basic) menubar should come first, so that the other CSS can override the first.
This needs to be corrected in your document
Gramps -
Parenting issue with Spry menu boxes...
Ok, I'm using my spry menu and have sub menus hooked to them. Now the problem I'm having is that every time I change the size of the sub menu box, it changes the size of the main menu box. This is fustrating since I've got only 3 links in the sub menu box and about 6 inches of colorized box space below. Also, when I move one sub menu box it effects all of the other sub menu boxes but not the main one. I believe there's a parent-child issue to where they are connect but I don't know how to unlink these boxes so that they can act independently. Please help!!!
I managed to change the widths of the submenus on my 'test' spry menu and it didn't effect the topbar at all. The changes show in red below:
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 10.2em; /* was 8.2 */
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 10.2em; /* was 8.2 */
As for moving the boxes, not sure what you mean here.. -
Having issues linking spry menu bar to my other pages
Hey everyone,
I am brand new to web development. I am currently using the trial of DW and I must say I love it. I am having issues with my spry menu bar though. I will click on a certain box in the menu bar and use the properties page at the bottom and insert a link to another one of my webpages that I have created. However when I test my webpage, it will not be linked to it. Instead it is linked to #, or my index page. Now my domain name is: thecampuscocktail.com. I have created two other pages "feedback.html" and "speedydrinks.html" and even when I enter those manually into my browser (i.e. "thecampuscocktail.com/feedback.html") it gives me a page not found error. So I may be doing something incorrectly with uploading my pages however I have used the "put" option with all of them and I have used the "sync site wide" option. I am also using a template though that shouldn't affect it. Being brand new I know very, very little about coding. But here is the code to my template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>The Campus Cocktail</title>
<!-- TemplateEndEditable -->
<link href="../twoColLiqLtHdr.css" rel="stylesheet" type="text/css" /><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]-->
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<div class="container">
<div class="header">
<p><a href="../index.html"><img src="../images/newlogo.gif" alt="logo" width="331" height="189" class="logo" /></a></p>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Drinking Games</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">Recipes</a>
<ul>
<li class="subsubmenu"><a href="#" class="MenuBarItemSubmenu">By Ingredient</a>
<ul>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">By Type</a>
<ul>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">By Form</a>
<ul>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="../Pages/speedydrinks.html">Speedy Drinks</a> </li>
<li><a href="#">Drinks by Occasion</a></li>
<li><a href="../index.html">Local Bars</a></li>
<li><a href="../Pages/speedydrinks.html">Submit Your Own</a></li>
</ul>
<p> </p>
<!-- end .header --></div>
<div class="sidebar1"><!-- TemplateBeginEditable name="EditRegion3" -->
<ul class="nav">
</ul>
<p> Whats New:</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<!-- end .sidebar1 -->
<!-- TemplateEndEditable --></div>
<div class="content"><!-- TemplateBeginEditable name="EditRegion4" --><span class="drinklabel">Drink Of The Day:</span>
<p> </p>
<!-- end .content -->
<!-- TemplateEndEditable --></div>
<div class="footer">
<p> © 2012 Brandon Hall</p>
<!-- end .footer --></div>
<!-- end .container --></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
any help will be appreciated! Sorry for the length of this post.DW_Noobie wrote:
can anyone help
It depends. I can see your two pages as in this link:
<http://www.thecampuscocktail.com/speedydrinks.html>
<http://www.thecampuscocktail.com/feedback.html>
You need to describe what these issues are. -
I have a vertical spry menu bar and it opens up to the right
over the text on the page.
In Firefox it displays correctly, but in iExplorer, when the
cursor hovers over the drop down menu, it only stays highlighted
and open when the curser is directly over the text in the spry box,
or if there is no text on the page. But when the cursor is over
empty space in the box and there is text on the page behind it, the
box closes.
How do I fix this?Hello Beth,
The piece of CSS you see there is actually a fix for Internet Explorer 6. It has bug where form elements such as selects will go through divs and other elements, in this case the <ul>'s of the menu bar. To resolve this issue, a iframe is generated and carefully placed under the <ul> elements. This way the form elements will no longer pass through the <ul>'s
If you menu is no where near a form element you could remove the iframe generation code form the javascript and savely remove that related stylesheet rule. But i do not recommend such practices. But that would be the only fix for the validation issue. Well.. Thats not true actually you could apply those styles through JavaScript... So that might actually be another option.
So it all depends on how hefty you weight validations. Validations are guid lines. Because a page doesn't "validate" it doesn't necessary mean the page is doomed and will crash all browser that comes on its path . But clients are usally verry narrow minded. So good luck with that .
So without further ado, the fixes:
- do nothing as it doesn't harm your page, it merly fixes internet explorer.
- removal of the iframe from JS:
line 289, remove:
if(Spry.is.ie && Spry.is.version < 7)
this.createIframeLayer(menu);
line 317, remove:
if(Spry.is.ie && Spry.is.version < 7)
this.removeIframeLayer(menu);
- move the css to JavaScript:
line 243 find:
layer.style.left = menu.offsetLeft + 'px';
layer.style.top = menu.offsetTop + 'px';
layer.style.width = menu.offsetWidth + 'px';
layer.style.height = menu.offsetHeight + 'px';
and add under:
layer.style.position = 'absolute';
layer.style.zIndex = 20010;
layer.style.style.filter = "alpha(opacity=0.1)";
Happy hacking -
Alignment Issues with Spry Menu Bar in Safari
www.laurentambard.com
I am new to CS5 and currently building a site for a friend. Having issues with aligning then far right spry menu bar so that it is flush with the page. It only shows a problem on Safari (as far as I know). Also the second tab (About) is dropping down slightly when the drop down menu is selected and not sure how to fix it.If you place the menubar in a container with an ID of nav or similar and a background color of #EEE so that it blends in with the background colour of the menu items, the centralise the menubar and menu items as per http://labs.adobe.com/technologies/spry/samples/menubar/CenteringHorizontalMenuBarSample.h tml, it should go a long way to meeting your requirements.
Gramps
Maybe you are looking for
-
Subscription is current but why does it say it is expiring in 67 days?
We pay monthly for Creative cloud but one of our users keeps getting an information window popping up at connection saying the subscription is running out in 67 days. We are current in payments monthly???
-
dear all, can anyone tell me why a simple snapshot without putting database in backup mode is not efficient? suppose I have taken a snapshot on all database folders and then back them to tape isn't it like the scenario when a power prolbem occurs? th
-
How to create instance object of Attachments2
I am trying to add attachments to Activities i.e. contacts. I read in 2005, Attachments2 replaces Attachments. 1) Just want to to know how to attach documents to Activities using Attachments2. 2) Or How to create an instance for Attachments2? Many Th
-
I cant get my music on my ipod from itunes
-
DRIVER_POWER_STATE_FAILURE on windows 8.1
I got a Lenovo Ideapad S510p Touch in December of 2013 and it worked completely fine up until last month. I'm starting to get more and more DRIVER_POWER_STATE_FAILURE errors, and I've looked up countless ways to fix it but none of them work. I've tri