Spry not working

I'm trying to get this to work and am having some difficulty.
I've got ax XML file of about 900 dog shows that I'm trying
to display the following information. The Sponsoring club, the
date, and the state in which the show is taking place. I'd like to
be able to sort alphabetically by club, by state and sort by date.
The basic Spry table seems to be the logical place to start. I've
managed to get this to work on my local machine. File references in
the code however are of the following format
<script src="file:///C|/Users/Ben
Galkin.LJDwork-PC/Documents/ESAA-Development4/SpryAssets/xpath.js"
type="text/javascript"></script>
When I change this to <script src= "SpryAssets/xpath.js"
type ="text/javascript"></script> It does not work locally
or on my hosted site.
Obviously I'm doing something wrong. Any help would be
appreciated. Thanks
Ideally I'd like to "page thru" this data displaying 15
shows at a time with details about each show in a column to the
right. I've managed to get a detail region working (again locally)
but have not been able to understand how to do the paging. I've
looked at the examples from the PagedView and the Paging examples
with no luck
Here's the url for the site .
http://www.whiskyridge.com/Shows.html
The xml file is at www.whiskyridge.com/data/Events5to11-2.xml Many
thanks if someone can help
LJD

its because your SpryData.js is empty, there is no data in
the file, i suggest reuploading the file and i should work

Similar Messages

  • Accordion panel spry not working...

    Can someone please look at this site and see what I am doing wrong?
    My accordion is not working on the "heaven" page, but does work on the "about" page. ???
    This link is the problem page.
    This link, with the same accordion (on the same site) works fine!
    I am not sure if it is a file location problem or what.
    My SpryAssets folder is inside the root folder.
    BTW, it works fine on my local machine, just not when i upload it.
    At a loss,
    Thank you!
    MG
    Also posted on the spry forum (with no responses).

    OK.  I'll have a go.
    Have you thought about comparing the top section of code in the two pages.  i.e. in the <head>
    Take a look at this bit in particular.
    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
    <link href="cbc.css" rel="stylesheet" type="text/css" />
    </head>
    Have you got your site management set up?
    Also, checking your page in the validator shows a few stray closing tags.  </p> in the good page and a </div> in the bad page.  I'm not sure, but a missed matched <div> tag might cause difficulties.
    Martin

  • AJAX Spry not working on a page

    I recently upgraded to CS3 from MX and bought the Adobe
    Training Source Book by Bardzell and Flynn. No problems until
    chapter 9. I have attached XML data sets, Get Schema and built Spry
    Tables literally dozens of times by modifying or starting
    completely from scratch over the last few days with no luck at all.
    I am able to preview the data in the Spry XML Data Set dialog
    window, so it seems to be able to correctly read it, however, when
    saved, uploaded to live server and viewed in browser, the page
    contains only the HTML heading and the footer and no dynamic tables
    or data whatsover.
    I do not want to continue not understanding what is not
    working properly and why. Any suggestions?
    Thanks in advance.

    Thank you for the response.
    However, even after correcting the <h1
    spry:detailregion="ds1"> it is still not working.
    I am on Vista Ultimate and use IE, Opera, Maxthon and Firefox
    browsers and have tested on all four.
    No data shows up in DW design window. Just a small table
    representing:
    <table>
    <tr>
    <th spry:sort="countryName">Country Name</th>
    <th spry:sort="region">Region</th>
    </tr>
    <tr spry:repeat="ds1" spry:setrow="ds1">
    <td>{countryName}</td>
    <td>{region}</td>
    </tr>
    </table>
    With blue {countryName} {region} fields.
    I am unsure about the xpath.js and SpryData.js files as I had
    deleted the initial ones that were created on my first try in an
    attempt to recreate them but upon subsequent attempts, the dialog
    window that informs that the files were created did not appear
    again upon recreation. I manually added them from the CD and
    uploaded them. Can I force a recreation of these files? Can I test
    these files to ensure that they are working properly? My remote
    server is not as current as it could be: PHP 4.3.11, MySQL 3.23 on
    Apache Tomcat 4, Linux ES 2.1 - Could that be an issue for any of
    this?
    Thanks again.

  • Spry Not Working in IE but Working in FF and Chrome

    http://www.graphalloy.com/html/base_page_gray_theme_DD.html
    I am including a link of a webpage that is in the design phase. This page includes a Spry Menu Bar. The bar works perfectly in Firefox and Chrome but not in IE. In fact, it "deletes" everything within the container. Please use the link to open the page in Firefox and in Chrome before attempting to open it in IE so that oyu can see what the porblem is.
    Thanks - HELP!!!

    In response to Grant H's response, I did the browser compatibility check.BTW - I am using IE8.
    Here is what I was given:
    File
    W:\www\html\base_page_gray_theme_DD.html
    Error
    Found 1 errors  in external css files
    Firefox 1.5, 2.0; Internet  Explorer 6.0, 7.0; Internet Explorer for Macintosh 5.2; Netscape 8.0; Opera 8.0,  9.0; Safari 2.0
    line 93
    <link  href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css"  />
    Error
    Unsupported  property: max-width
    Internet Explorer 6.0;  Internet Explorer for Macintosh 5.2
    line 19
    #container { font-family: Arial, Helvetica,  sans-serif; font-size: medium; color: #666666; text-decoration: none;  background-color: #FFFFFF; margin-right: auto; margin-left: auto;  list-style-position: outside; list-style-image: none; list-style-type: disc;  max-width: 900px; min-width: 825px; padding-right: 3px; padding-left: 3px;  height: 900px; }
    Error
    Unsupported  property: min-width
    Internet Explorer 6.0;  Internet Explorer for Macintosh 5.2
    line 20
    #container { font-family: Arial, Helvetica,  sans-serif; font-size: medium; color: #666666; text-decoration: none;  background-color: #FFFFFF; margin-right: auto; margin-left: auto;  list-style-position: outside; list-style-image: none; list-style-type: disc;  max-width: 900px; min-width: 825px; padding-right: 3px; padding-left: 3px;  height: 900px; }
    Warning
    CSS property  max-width is only partially supported
    Safari  2.0
    line 19
    #container { font-family: Arial, Helvetica,  sans-serif; font-size: medium; color: #666666; text-decoration: none;  background-color: #FFFFFF; margin-right: auto; margin-left: auto;  list-style-position: outside; list-style-image: none; list-style-type: disc;  max-width: 900px; min-width: 825px; padding-right: 3px; padding-left: 3px;  height: 900px; }
    Warning
    CSS property  min-width is only partially supported
    Safari  2.0
    line 20
    #container { font-family: Arial, Helvetica,  sans-serif; font-size: medium; color: #666666; text-decoration: none;  background-color: #FFFFFF; margin-right: auto; margin-left: auto;  list-style-position: outside; list-style-image: none; list-style-type: disc;  max-width: 900px; min-width: 825px; padding-right: 3px; padding-left: 3px;  height: 900px; }
    Warning
    Unsupported  value: 'blink'
    Internet Explorer 6.0, 7.0;  Internet Explorer for Macintosh 5.2; Safari 2.0
    line 79
    a:hover { text-decoration: blink; color: #FF6633;  }
    End of report.

  • Spry not working properly in IE (again !)

    Hello everybody,
    I have put multiple vertical spry menu bars on my page, they are working as expected on all other major browsers except IE :S ....as usual. When you go to the page on any other browser you shall see that the sub menus overlap the other spry menus, but when you go through IE they don't overlap instead the sub menus come under the other spry menus. I've tried many a things to resolve the situation here but all have deemed fruitless :|
    http://bonzo.bonzoline.com/
    I would appreciate any help from any of you guys, looking forward to you response(s). Cheers !
    Kamil

    There are still many errors left in your markup. Doubling up on links to CSS and JS do not help. Also, unneccessary markup, style rules and JS does not help. The following illustrates this
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var MenuBar3 = new Spry.Widget.MenuBar("MenuBar3", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var MenuBar4 = new Spry.Widget.MenuBar("MenuBar4", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var MenuBar5 = new Spry.Widget.MenuBar("MenuBar5", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var MenuBar6 = new Spry.Widget.MenuBar("MenuBar6", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var MenuBar7 = new Spry.Widget.MenuBar("MenuBar7", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var MenuBar8 = new Spry.Widget.MenuBar("MenuBar8", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var MenuBar9 = new Spry.Widget.MenuBar("MenuBar9", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var MenuBar10 = new Spry.Widget.MenuBar("MenuBar10", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var MenuBar11 = new Spry.Widget.MenuBar("MenuBar11", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var MenuBar12 = new Spry.Widget.MenuBar("MenuBar12", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    Remember KISS
    Look at the following where I have linked the support files to Adobe to ensure that we use un-adulterated versions.
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarVertical.css" rel="stylesheet">
    <style>
    body {
        width: 980px;
        margin: auto;
    ul.MenuBarVertical {
        height: 100px;
        background-color: #EEE;
        display: block;
        float: left;
        margin: 20px;
    ul#MenuBar1.MenuBarActive {
        z-index: 2000;
    </style>
    </head>
    <body>
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a class="MenuBarItemSubmenu" href="#">Community</a>
        <ul>
          <li><a href="#">Item 1.1</a></li>
          <li><a href="#">Item 1.2</a></li>
          <li><a href="#">Item 1.3</a></li>
        </ul>
      </li>
    </ul>
    <ul id="MenuBar2" class="MenuBarVertical">
      <li><a class="MenuBarItemSubmenu" href="#">Jobs</a>
        <ul>
          <li><a href="#">Item 1.1</a></li>
          <li><a href="#">Item 1.2</a></li>
          <li><a href="#">Item 1.3</a></li>
        </ul>
      </li>
    </ul>
    <script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryMenuBar.js"></script>
    <script>
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>
    Gramps

  • Spry not working properly in IE (what a surprise!)

    Hi all,
    I have create a menu bar using spry.
    Problem is the drop down lists appear to the far left in IE and not underneath each dropdown link. An example can be found here http://www.thesketchcollective.co.uk/spry-test.php
    I've tested in IE8, 7 and 6 and happens in all three. I've also tested in Safari, Google Chrome and Firefox and they work as expected.
    I've fiddled with the positioning of the menu bar so it may be the CSS but I've tried for hours to figure it out and without a windows computer it's very hard to de-bug.
    If anyone can see what the problem is it would be much appreciated.
    Cheers
    Tom

    I found this:
    http://labs.adobe.com/technologies/spry/ui/samples/MenuBar2Sample.html
    It is using a newer version. The script is totally different and the CSS
    is totally rewritten.
    I realize you do not like me, but the facts are the facts. A company
    that cares about its users would have an updating mechanism so that said
    users always have access to the latest updated code.
    I know that we certainly do.
    That said, you really need to put a muzzle on taking threads off-topic
    just to show me up. You do the original poster a great disservice.
    Al Sparber - PVII
    http://www.projectseven.com
    The Finest Dreamweaver Menus | Galleries | Widgets
    Since 1998

  • Spry not working in preview only blue non-styled text

    When in Preview or Live View the Spry Menu only displays the links vertically with no CSS.  I had added the Spry Nav earier and it had worked just fine but I erased it and all of its components to start again later and now I have this.  BTW, I tried setting it up in a new blank page in the same site folder and I had the same result.

    Thanks, Arnout.  All the files were present but you are were right, they were obviously not linked to the correct location.  I deleted the head and added the element again and poof all worked fine. Thanks for responding!
    Blessings-

  • Spry not working in IE6-Please Help!

    I put this site together using Spry framework. The content is filled in using spry. It works well in Firefox, Safari and seems to work well in IE7 and IE8, however don't appear to work in IE6. Could someone please take a look at this and let me know what needs to be changed so that it works in IE6. Here's the URL:
    http://massageforwellbeing.biz/
    Thanks.

    Well, that's progress. Unfortunately I work on a MAC so it's a bit rough to try to fix the problems in realtime. In any case, I did look at it newly and the last problem is that it makes the whole thing out of whack. Doesn't happen in older versions of IE. Any suggestions on how to fix this?

  • Spry not working in IE

    I'm trying to create a page that uses a html table to make a
    dataset that I am able to sort. It works perfect in Firefox but
    doesn't work at all in IE. I am hoping someone will have some
    suggestions to what I could be doing wrong?

    here's the code:
    <script src="spryscript/SpryData.js"
    type="text/javascript"></script>
    <script src="spryscript/SpryHTMLDataSet.js"
    type="text/javascript"></script>
    <script type="text/javascript">
    var ds = new Spry.Data.HTMLDataSet(null, "newAppList");
    </script>
    <table spry:region='ds'>
    <tr>
    <th></th>
    <th spry:sort="Name">Company Name</th>
    <th spry:sort="City">City</th>
    <th spry:sort="State">State</th>
    </tr>
    <tr spry:repeat='ds'>
    <td class='select'><form method="post"
    action="viewpage.cfm"><input type="hidden" name="id"
    value="{id}"/><input class="submit" type="submit"
    value="Select" /></form></td>
    <td>{Name}</td>
    <td>{City}</td>
    <td>{State}</td>
    </tr>
    </table>
    <!-- NewAppList TABLE SOURCE -->
    <table id="newAppList">
    <tr>
    <td><strong>id</strong></td>
    <td
    scope="col"><strong>Name</strong></td>
    <td
    scope="col"><strong>City</strong></td>
    <td
    scope="col"><strong>State</strong></td>
    </tr>
    <tr>
    <td>1</td>
    <td>Sup 1</td>
    <td>city 1</td>
    <td>FL</td>
    </tr>
    <tr>
    <td>2</td>
    <td>Sup 4</td>
    <td>City 3</td>
    <td>MI</td>
    </tr>
    <tr>
    <td>5</td>
    <td>Sup 8</td>
    <td>City 8</td>
    <td>NY</td>
    </tr>
    <tr>
    <td>10</td>
    <td>Sup 5</td>
    <td>City 7</td>
    <td>OH</td>
    </tr>
    </table>

  • Horizontal menu bar (spry) not working in live view

    action taken - simply add a horizontal spry menu to
    a blank page, then go to live view.....
    when select "item 1" - item 2 briefly disappears...any thoughts - this is making me nuts!   pls email me at [email protected]
    here is the code
    <%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>
    <!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>Untitled Document</title>
    <!-- TemplateEndEditable -->
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <style type="text/css">
    <!--
    #apDiv1 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:1;
    left: 182px;
    top: 281px;
    #apDiv2 {
    position:absolute;
    width:463px;
    height:243px;
    z-index:1;
    left: 350px;
    top: 135px;
    -->
    </style>
    <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
            <ul>
                <li><a href="#">Item 1.1</a></li>
                <li><a href="#">Item 1.2</a></li>
                <li><a href="#">Item 1.3</a></li>
            </ul>
        </li>
        <li><a href="#">Item 2</a></li>
        <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
            <ul>
                <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
                    <ul>
                        <li><a href="#">Item 3.1.1</a></li>
                        <li><a href="#">Item 3.1.2</a></li>
                    </ul>
                </li>
                <li><a href="#">Item 3.2</a></li>
                <li><a href="#">Item 3.3</a></li>
            </ul>
        </li>
        <li><a href="#">Item 4</a></li>
    </ul>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>

    You will have better luck here in the Forum if you can post a link to your page. Just the HTML doesn't give us enough information; we need to see the CSS stylesheets as well, and in context...working...it's easier to pin down.
    Beth

  • ASP to XML and Spry not working

    I'm using ASP to create the XML, when I look at it in the
    browser it's well formed XML. But spry doesn't seem to see it that
    way or I'm missing something in my code. I saw someone ran into
    this same problem but the fix wasn't mentioned or maybe just not
    found. Can someone help out? Thanks
    My code looks like:
    quote:
    <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
    <%
    Dim MM_conn_STRING
    MM_conn_STRING =
    "Provider=SQLOLEDB;Server=*****;Database=*****;UID=*****;PWD=*****"
    %>
    <%
    Dim rsProject
    Dim rsProject_cmd
    Dim rsProject_numRows
    ' Query the database and get all the records from the Images
    table
    Set rsProject_cmd = Server.CreateObject ("ADODB.Command")
    rsProject_cmd.ActiveConnection = MM_conn_STRING
    rsProject_cmd.CommandText = "SELECT * FROM projects WHERE
    archive = 0 ORDER BY pName ASC"
    rsProject_cmd.Prepared = true
    Set rsProject = rsProject_cmd.Execute
    ' Send the headers
    Response.ContentType = "text/xml"
    Response.AddHeader "Pragma", "public"
    Response.AddHeader "Cache-control", "private"
    Response.AddHeader "Expires", "-1"
    %>
    <?xml version="1.0" encoding="utf-8"?>
    <data>
    <projects>
    <% While (NOT rsProject.EOF) %>
    <project>
    <ID><![CDATA[<%=(rsProject.Fields.Item("projectID").Value)%>]]></ID>
    <startDate><![CDATA[<%=(rsProject.Fields.Item("startDate").Value)%>]]></startDate>
    <endDate><![CDATA[<%=(rsProject.Fields.Item("endDate").Value)%>]]></endDate>
    <creationDate><![CDATA[<%=(rsProject.Fields.Item("creationDate").Value)%>]]></creationDat e>
    <issues><![CDATA[<%=(rsProject.Fields.Item("issues").Value)%>]]></issues>
    <customerName><![CDATA[<%=(rsProject.Fields.Item("customerName").Value)%>]]></customerNam e>
    <objective><![CDATA[<%=(rsProject.Fields.Item("objective").Value)%>]]></objective>
    <deliverables><![CDATA[<%=(rsProject.Fields.Item("deliverables").Value)%>]]></deliverable s>
    <audience><![CDATA[<%=(rsProject.Fields.Item("audience").Value)%>]]></audience>
    <forAndy><![CDATA[<%=(rsProject.Fields.Item("forAndy").Value)%>]]></forAndy>
    </project>
    <%
    rsProject.MoveNext()
    Wend
    %>
    </projects>
    </data>
    <%
    rsProject.Close()
    Set rsProject = Nothing
    %>
    And here's my html page:
    quote:
    <script src="SpryAssets/xpath.js"
    type="text/javascript"></script>
    <script src="SpryAssets/SpryData.js"
    type="text/javascript"></script>
    <script type="text/javascript">
    <!--
    var ds1 = new Spry.Data.XMLDataSet("data/getProjectXML.asp",
    "data/projects/project",{distinctOnLoad:true,useCache:false});
    //-->
    </script>
    </head>
    <body>
    <div spry:region="ds1">
    <table>
    <tr>
    <th spry:sort="ID">ID</th>
    <th>StartDate</th>
    <th>EndDate</th>
    <th>CreationDate</th>
    <th>Issues</th>
    <th>CustomerName</th>
    </tr>
    <tr spry:repeat="ds1">
    <td>{ID}</td>
    <td>{startDate}</td>
    <td>{endDate}</td>
    <td>{creationDate}</td>
    <td>{issues}</td>
    <td>{customerName}</td>
    </tr>
    </table>
    </div>

    Looks to me as if you have two root nodes. Both data and
    projects appear to
    do the same thing. Why is that?
    Nancy
    "Mark.P." <[email protected]> wrote in message
    news:[email protected]...
    > I'm using ASP to create the XML, when I look at it in
    the browser it's
    > well
    > formed XML. But spry doesn't seem to see it that way or
    I'm missing
    > something
    > in my code. I saw someone ran into this same problem but
    the fix wasn't
    > mentioned or maybe just not found. Can someone help out?
    Thanks
    >
    > My code looks like:
    >
    quote:
    > <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
    > <%
    > Dim MM_conn_STRING
    > MM_conn_STRING =
    >
    "Provider=SQLOLEDB;Server=*****;Database=*****;UID=*****;PWD=*****"
    > %>
    >
    > <%
    > Dim rsProject
    > Dim rsProject_cmd
    > Dim rsProject_numRows
    >
    > ' Query the database and get all the records from the
    Images table
    > Set rsProject_cmd = Server.CreateObject
    ("ADODB.Command")
    > rsProject_cmd.ActiveConnection = MM_conn_STRING
    > rsProject_cmd.CommandText = "SELECT * FROM projects
    WHERE archive = 0
    > ORDER BY
    > pName ASC"
    > rsProject_cmd.Prepared = true
    >
    > Set rsProject = rsProject_cmd.Execute
    >
    > ' Send the headers
    > Response.ContentType = "text/xml"
    > Response.AddHeader "Pragma", "public"
    > Response.AddHeader "Cache-control", "private"
    > Response.AddHeader "Expires", "-1"
    > %>
    > <?xml version="1.0" encoding="utf-8"?>
    > <data>
    > <projects>
    > <% While (NOT rsProject.EOF) %>
    > <project>
    >
    <ID><![CDATA[<%=(rsProject.Fields.Item("projectID").Value)%>]]></ID>
    >
    >
    <startDate><![CDATA[<%=(rsProject.Fields.Item("startDate").Value)%>]]></startD
    > ate>
    >
    >
    <endDate><![CDATA[<%=(rsProject.Fields.Item("endDate").Value)%>]]></endDate>
    >
    >
    <creationDate><![CDATA[<%=(rsProject.Fields.Item("creationDate").Value)%>]]></cr
    > eationDate>
    >
    >
    <issues><![CDATA[<%=(rsProject.Fields.Item("issues").Value)%>]]></issues>
    >
    >
    <customerName><![CDATA[<%=(rsProject.Fields.Item("customerName").Value)%>]]></cu
    > stomerName>
    >
    >
    <objective><![CDATA[<%=(rsProject.Fields.Item("objective").Value)%>]]></objectiv
    > e>
    >
    >
    <deliverables><![CDATA[<%=(rsProject.Fields.Item("deliverables").Value)%>]]></de
    > liverables>
    >
    >
    <audience><![CDATA[<%=(rsProject.Fields.Item("audience").Value)%>]]></audience>
    >
    >
    <forAndy><![CDATA[<%=(rsProject.Fields.Item("forAndy").Value)%>]]></forAndy>
    > </project>
    > <%
    > rsProject.MoveNext()
    > Wend
    > %>
    > </projects>
    > </data>
    > <%
    > rsProject.Close()
    > Set rsProject = Nothing
    > %>
    >
    >
    > And here's my html page:
    >
    quote:
    > <script src="SpryAssets/xpath.js"
    type="text/javascript"></script>
    > <script src="SpryAssets/SpryData.js"
    type="text/javascript"></script>
    > <script type="text/javascript">
    > <!--
    > var ds1 = new
    Spry.Data.XMLDataSet("data/getProjectXML.asp",
    >
    "data/projects/project",{distinctOnLoad:true,useCache:false});
    > //-->
    > </script>
    > </head>
    >
    > <body>
    > <div spry:region="ds1">
    > <table>
    > <tr>
    > <th spry:sort="ID">ID</th>
    > <th>StartDate</th>
    > <th>EndDate</th>
    > <th>CreationDate</th>
    > <th>Issues</th>
    > <th>CustomerName</th>
    > </tr>
    > <tr spry:repeat="ds1">
    > <td>{ID}</td>
    > <td>{startDate}</td>
    > <td>{endDate}</td>
    > <td>{creationDate}</td>
    > <td>{issues}</td>
    > <td>{customerName}</td>
    > </tr>
    > </table>
    > </div>
    >
    >

  • Spry not working in IE8

    Its a simple portfolio site that works fine for me in firefox and safari but its a no go on IE8. Any suggestions would be much appreciated. Heres the link georgeramirez.freehostia.com

    Hi,
    Remove width="auto" height="auto" as in
    <td align="left" valign="top"><img name="{image_name}" src="{image1}" width="auto" height="auto"/></td>
    I hope this helps.
    Ben

  • Links not working in Spry Accordian Menu

    When clicked the links in the left side accordian menu do not work. However, the child-links work great. Example: http://www.richartbuilders.com/remodel.php
    HEAD TAGS:
    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal2.css" rel="stylesheet" type="text/css" />
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
    <link href="content.css" rel="stylesheet" type="text/css" />
    HTML:
    <div id="navSide">
        <div id="sideWrapper">
          <div id="Accordion1" class="Accordion" tabindex="0">
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"><a href="../remodel.php">Remodel</a></div>
              <div class="AccordionPanelContent"></div>
             </div>
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"><a href="../windowsdoors.php">Windows &amp; Doors</a></div>
              <div class="AccordionPanelContent"></div>
              </div>
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"><a href="../weatherization.php">Weatherization</a></div>
              <div class="AccordionPanelContent"></div>
             </div>
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"><a href="#">Electrical...</a></div>
              <div class="AccordionPanelContent">
                <ul>
                  <li><a href="residential.php">Residential</a></li>
                  <li><a href="commercial.php">Commercial</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
    </div>
    <script type="text/javascript">
    var Accordion1 = new Spry.Widget.Accordion("Accordion1" ,{ useFixedPanelHeights:false, defaultPanel:0});
    </script>
    external CSS:
    @charset "UTF-8";
    /* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* This is the selector for the main Accordion container. For our default style,
    * we draw borders on the left, right, and bottom. The top border of the Accordion
    * will be rendered by the first AccordionPanelTab which never moves.
    * If you want to constrain the width of the Accordion widget, set a width on
    * the Accordion container. By default, our accordion expands horizontally to fill
    * up available space.
    * The name of the class ("Accordion") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style the
    * Accordion container.
    .Accordion {
        overflow: hidden;
        border: 1px solid #CCC;
        width: 145px;
    /* This is the selector for the AccordionPanel container which houses the
    * panel tab and a panel content area. It doesn't render visually, but we
    * make sure that it has zero margin and padding.
    * The name of the class ("AccordionPanel") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel container.
    .AccordionPanel {
        margin: 0px;
        padding: 0px;
    /* This is the selector for the AccordionPanelTab. This container houses
    * the title for the panel. This is also the container that the user clicks
    * on to open a specific panel.
    * The name of the class ("AccordionPanelTab") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel tab container.
    * NOTE:
    * This rule uses -moz-user-select and -khtml-user-select properties to prevent the
    * user from selecting the text in the AccordionPanelTab. These are proprietary browser
    * properties that only work in Mozilla based browsers (like FireFox) and KHTML based
    * browsers (like Safari), so they will not pass W3C validation. If you want your documents to
    * validate, and don't care if the user can select the text within an AccordionPanelTab,
    * you can safely remove those properties without affecting the functionality of the widget.
    .AccordionPanelTab {
        background-color: #F2F2F2;
        margin: 0px;
        padding: 12px;
        cursor: pointer;
        font-family: "Myriad Pro", Verdana, Geneva, sans-serif;
        font-size: 14px;
        color: #0071BC;
        border-bottom: 1px solid #CCC;
        /* [disabled]text-transform: uppercase; */
    .AccordionPanelTab a {
        text-decoration:none;
        color: #0071BC;
    /* This is the selector for a Panel's Content area. It's important to note that
    * you should never put any padding on the panel's content area if you plan to
    * use the Accordions panel animations. Placing a non-zero padding on the content
    * area can cause the accordion to abruptly grow in height while the panels animate.
    * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
    * Content container.
    * The name of the class ("AccordionPanelContent") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel content container.
    .AccordionPanelContent {
        overflow: auto;
        margin: 0px;
        padding: 0px;
    .AccordionPanelContent ul {
        list-style-type:none;
        margin:0;
        line-height: 22px;
        font-family:"Myriad Pro", "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size:14px;
    .AccordionPanelContent ul li {
        color:#666;
    .AccordionPanelContent ul li a {
        display:block;
        padding-top: 5px;
        padding-right: 0px;
        padding-bottom: 5px;
        padding-left: 0px;
    .AccordionPanelContent ul li a:link, .AccordionPanelContent ul li a:visited {
        text-decoration:none;
        color:#0071BC;
    .AccordionPanelContent ul li a:hover, .AccordionPanelContent ul li a:active {
        color:#FF9900;
    .AccordionPanelTab a:link, .AccordionPanelTab a:visited {
        color:#0071BC;
    .AccordionPanelTabHover a:hover, .AccordionPanelTabHover a:active {
        color:#FF9900;
    /* This is an example of how to change the appearance of the panel tab that is
    * currently open. The class "AccordionPanelOpen" is programatically added and removed
    * from panels as the user clicks on the tabs within the Accordion.
    .AccordionPanelOpen .AccordionPanelTab {
        background-color: #FFFFFF;
    /* This is an example of how to change the appearance of the panel tab as the
    * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
    * and removed from panel tab containers as the mouse enters and exits the tab container.
    .AccordionPanelTabHover {
    .AccordionPanelOpen .AccordionPanelTabHover {
        color: #555555;
    /* This is an example of how to change the appearance of all the panel tabs when the
    * Accordion has focus. The "AccordionFocused" class is programatically added and removed
    * whenever the Accordion gains or loses keyboard focus.
    .AccordionFocused .AccordionPanelTab {
        /* [disabled]background-color: #3399FF; */
    /* This is an example of how to change the appearance of the panel tab that is
    * currently open when the Accordion has focus.
    .AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
        /* [disabled]background-color: #33CCFF; */
    /* Rules for Printing */
    @media print {
      .Accordion {
      overflow: visible !important;
      .AccordionPanelContent {
      display: block !important;
      overflow: visible !important;
      height: auto !important;

    When clicked the links in the left side accordian menu do not work. However, the child-links work great. Example: http://www.richartbuilders.com/remodel.php
    HEAD TAGS:
    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal2.css" rel="stylesheet" type="text/css" />
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
    <link href="content.css" rel="stylesheet" type="text/css" />
    HTML:
    <div id="navSide">
        <div id="sideWrapper">
          <div id="Accordion1" class="Accordion" tabindex="0">
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"><a href="../remodel.php">Remodel</a></div>
              <div class="AccordionPanelContent"></div>
             </div>
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"><a href="../windowsdoors.php">Windows &amp; Doors</a></div>
              <div class="AccordionPanelContent"></div>
              </div>
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"><a href="../weatherization.php">Weatherization</a></div>
              <div class="AccordionPanelContent"></div>
             </div>
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"><a href="#">Electrical...</a></div>
              <div class="AccordionPanelContent">
                <ul>
                  <li><a href="residential.php">Residential</a></li>
                  <li><a href="commercial.php">Commercial</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
    </div>
    <script type="text/javascript">
    var Accordion1 = new Spry.Widget.Accordion("Accordion1" ,{ useFixedPanelHeights:false, defaultPanel:0});
    </script>
    external CSS:
    @charset "UTF-8";
    /* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* This is the selector for the main Accordion container. For our default style,
    * we draw borders on the left, right, and bottom. The top border of the Accordion
    * will be rendered by the first AccordionPanelTab which never moves.
    * If you want to constrain the width of the Accordion widget, set a width on
    * the Accordion container. By default, our accordion expands horizontally to fill
    * up available space.
    * The name of the class ("Accordion") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style the
    * Accordion container.
    .Accordion {
        overflow: hidden;
        border: 1px solid #CCC;
        width: 145px;
    /* This is the selector for the AccordionPanel container which houses the
    * panel tab and a panel content area. It doesn't render visually, but we
    * make sure that it has zero margin and padding.
    * The name of the class ("AccordionPanel") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel container.
    .AccordionPanel {
        margin: 0px;
        padding: 0px;
    /* This is the selector for the AccordionPanelTab. This container houses
    * the title for the panel. This is also the container that the user clicks
    * on to open a specific panel.
    * The name of the class ("AccordionPanelTab") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel tab container.
    * NOTE:
    * This rule uses -moz-user-select and -khtml-user-select properties to prevent the
    * user from selecting the text in the AccordionPanelTab. These are proprietary browser
    * properties that only work in Mozilla based browsers (like FireFox) and KHTML based
    * browsers (like Safari), so they will not pass W3C validation. If you want your documents to
    * validate, and don't care if the user can select the text within an AccordionPanelTab,
    * you can safely remove those properties without affecting the functionality of the widget.
    .AccordionPanelTab {
        background-color: #F2F2F2;
        margin: 0px;
        padding: 12px;
        cursor: pointer;
        font-family: "Myriad Pro", Verdana, Geneva, sans-serif;
        font-size: 14px;
        color: #0071BC;
        border-bottom: 1px solid #CCC;
        /* [disabled]text-transform: uppercase; */
    .AccordionPanelTab a {
        text-decoration:none;
        color: #0071BC;
    /* This is the selector for a Panel's Content area. It's important to note that
    * you should never put any padding on the panel's content area if you plan to
    * use the Accordions panel animations. Placing a non-zero padding on the content
    * area can cause the accordion to abruptly grow in height while the panels animate.
    * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
    * Content container.
    * The name of the class ("AccordionPanelContent") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel content container.
    .AccordionPanelContent {
        overflow: auto;
        margin: 0px;
        padding: 0px;
    .AccordionPanelContent ul {
        list-style-type:none;
        margin:0;
        line-height: 22px;
        font-family:"Myriad Pro", "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size:14px;
    .AccordionPanelContent ul li {
        color:#666;
    .AccordionPanelContent ul li a {
        display:block;
        padding-top: 5px;
        padding-right: 0px;
        padding-bottom: 5px;
        padding-left: 0px;
    .AccordionPanelContent ul li a:link, .AccordionPanelContent ul li a:visited {
        text-decoration:none;
        color:#0071BC;
    .AccordionPanelContent ul li a:hover, .AccordionPanelContent ul li a:active {
        color:#FF9900;
    .AccordionPanelTab a:link, .AccordionPanelTab a:visited {
        color:#0071BC;
    .AccordionPanelTabHover a:hover, .AccordionPanelTabHover a:active {
        color:#FF9900;
    /* This is an example of how to change the appearance of the panel tab that is
    * currently open. The class "AccordionPanelOpen" is programatically added and removed
    * from panels as the user clicks on the tabs within the Accordion.
    .AccordionPanelOpen .AccordionPanelTab {
        background-color: #FFFFFF;
    /* This is an example of how to change the appearance of the panel tab as the
    * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
    * and removed from panel tab containers as the mouse enters and exits the tab container.
    .AccordionPanelTabHover {
    .AccordionPanelOpen .AccordionPanelTabHover {
        color: #555555;
    /* This is an example of how to change the appearance of all the panel tabs when the
    * Accordion has focus. The "AccordionFocused" class is programatically added and removed
    * whenever the Accordion gains or loses keyboard focus.
    .AccordionFocused .AccordionPanelTab {
        /* [disabled]background-color: #3399FF; */
    /* This is an example of how to change the appearance of the panel tab that is
    * currently open when the Accordion has focus.
    .AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
        /* [disabled]background-color: #33CCFF; */
    /* Rules for Printing */
    @media print {
      .Accordion {
      overflow: visible !important;
      .AccordionPanelContent {
      display: block !important;
      overflow: visible !important;
      height: auto !important;

  • Spry Collapsible Panel animation not working

    I've inserted a spry collapsible panel into a web page and it works fine when I preview it. But when I upload it to the server the animation does not work in both Safari and Firefox (haven't tried any other browsers). The panel is just static, showing the tab and the panel is open showing the content. It is supposed to be closed by default.
    I've added CSS styles but I've also tried it with the default CSS and it didn't work then either.
    Both the .css and .js files that were saved in the SpryAssets folder have been uploaded to the server in the same location as the webpage.
    I'm working on a Mac and CS4.
    URL is www.alpinism.com/New/about.html

    Thanks. That didn't resolve my issues unfortunately and the corrections it was suggesting started interfering with other functions on the page so I've gone back to square one, deleted the Spry collapsible panel and inserted javascript from http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm that does the same thing and seems to work in Safari and Firefox. Just need to check in IE but I expect this is going to be the best solution for me.

  • Spry menu bar not working in IE

    Hi there,
    This is the first time I'm using Spry.  Everything was fine until I tested the site in IE. My top menu moves position upon rollover and the submenu doesn't show at all. I looked at the forums and thought I would add the IE hack into the code, but upon doing that I saw that it was already there. I'm not sure where to go from here.  Please help, many thanks in advance!
    Update Note: I just noticed it says it's version 1.4. I did update to 1.6.  When I check for Spry updates it does say I am using 1.6, but appears to be 1.4 in the css code. Any reason why?
    Site:
    http://retouching.zeoproductions.com/
    SpryMenuBarHorizontal.css:
    @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;
        list-style-type: none;
        font-size: 100%;
        cursor: default;
    /* 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
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: relative;
        cursor: pointer;
        width: 9.2em;
        margin: 0;
        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
        list-style-type: none;
        font-size: 20pt;
        cursor: default;
        width: 190px;
        position: absolute;
        font-weight: normal;
        text-decoration: none;
        font-family: century;
        line-height: 13px;
        letter-spacing: 2pt;
        text-align: right;
        left: -1000px;
        z-index: 1020;
        margin-top: -2%;
        margin-right: 0%;
        margin-bottom: 0%;
        margin-left: -55%;
        padding: 1px;
    /* 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: 25pt;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
        background-color: #E8E8E8;
        width: 190px;
        text-align: right;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position: absolute;
    /* 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
        top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts 
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
        border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        background-color: #FFFFFF;
        padding: 0.5em 0.75em;
        color: #999999;
        text-decoration: none;
        font-family: century;
        font-variant: small-caps;
        font-size: 10pt;
        text-align: right;
        text-indent: 40px;
    /* 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: #FFFFFF;
        color: #000000;
    /* 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: #FFFFFF;
        color: #000000;
        left: 20px;
    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%;
        text-align: center;
        background-color: #FFFFFF;
    /* 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(SpryMenuBarDown.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
        white-space: nowrap;
    /* 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(SpryMenuBarDown.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;
    /* 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;

    OK... what I needed was a proper update... not sure why it didn't work the first time, but now I am definitely running 1.6.  My initial problems are no longer relevant.
    However.... this created a few other obstacles. The background color, text color, text-transform, and all hover attributes are not working in IE.  Confused I am.
    @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;
        list-style-type: none; 
        font-size: 100%; 
        cursor: default; 
    /* 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 
        padding: 0; 
        list-style-type: none; 
        font-size: 100%; 
        position: relative; 
        cursor: pointer; 
        width: 9.2em; 
        margin: 0; 
        float: left; 
        background-color: #FFFFFF; 
    /* 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 
        list-style-type: none; 
        font-size: 20pt; 
        cursor: default; 
        width: 190px; 
        position: absolute; 
        font-weight: normal; 
        text-decoration: none; 
        font-family: century; 
        line-height: 13px; 
        letter-spacing: 2pt; 
        text-align: right; 
        left: -1000px; 
        z-index: 1020; 
        margin-top: -2%; 
        margin-right: 0%; 
        margin-bottom: 0%; 
        margin-left: -55%; 
        padding: 1px; 
    /* 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: 25pt; 
    /* Menu item containers are same fixed width as parent */ 
    ul.MenuBarHorizontal ul li 
        background-color: #FFFFFF; 
        width: 190px; 
        text-align: right; 
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ 
    ul.MenuBarHorizontal ul ul 
        position: absolute; 
    /* 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 
        top: 0; 
    DESIGN INFORMATION: describes color scheme, borders, fonts 
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
        border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        background-color: #FFFFFF;
        padding: 0.5em 0.75em;
        color: #999999;
        text-decoration: none;
        font-family: century;
        font-size: 10pt;
        text-align: right;
        text-indent: 40px;
        text-transform: uppercase;
        font-variant: normal;
    /* 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: #FFFFFF;
        color: #000000;
    /* 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: #FFFFFF;
        color: #000000;
        left: 20px;
    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%;
        text-align: center;
        background-color: #FFFFFF;
    /* 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(SpryMenuBarDown.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
        white-space: nowrap;
    /* 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(SpryMenuBarDown.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;
    /* 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;

Maybe you are looking for