Spry 1.6.1 released

Hi All,
As some of you early risers have noticed, we have formally
released Spry 1.6.1, a dot release for Spry.
This was mostly done to ensure compatibility with Adobe AIR,
which was released today
http://www.adobe.com/products/air/
In order for Spry to work in AIR, we had to make some
addition ways of working available to users. You can read about it
here:
http://labs.adobe.com/technologies/spry/articles/air/photo_gallery.html
These changes introduce some cool new ways of coding your
pages. Check out this new sample:
http://labs.adobe.com/technologies/spry/samples/data_region/Function_colon.html
Lots of good bug fixes, the new Rating widget is formally
released, the Spry Updater for DW was updated.
Download it and check it out.
Thanks,
The Adobe Spry Team

Donald,
Have you validated the javascript code to make sure that the
behavior is the same on both IE7 and Firefox. The Accordion widget
does not properly open large sets on IE7. See
http://www.qualite1.com/ContactUs.html
and select California to see the difference between Firefox and IE.
Notice how the Javascript causes the focus to jump around on
IE.

Similar Messages

SPRY 1.5 pre-release compatibility with CS3

Hi all
Does anyone know if SPRY pre-release v 1.5 will be
backward-compatible with the release version that is integrated
into Dreamweaver CS3? I'm about to start a project that uses AJAX
tabs and need to know if the current methods will be editable with
future versions of Dreamweaver.
Thanks
Paul

Understanding that I work for Adobe and I worked on Spry
features for DW CS3..
There isn't anything special about working in DW8 with Spry.
Your widget will render as exploded markup: easy to see content but
harder to determine layout. But as HTML and CSS, editing should be
straightforward.
But I am spoiled by having widget rendering and Spry code
coloring and hinting in DWCS3 for many months now.
Widgets render as they do in the browser and you can
add/remove tabs and switch between them.
Spry code hinting, esp with the data stuff, is quite fun.
But, for now, DW8 will do just fine for you.
Thanks,
Don

New version of Spry available on Labs!

Hey Spry Fans,
We just uploaded the latest version of Spry to
Labs.
We made many improvements to the framework, adding new
attributes and features requested by forum users.
* Switched to using namespaced attributes. Attributes are
now of the form spry:*. The Spry namespace is defined by adding the
the following attribute to the HTML tag of the document:
xmlns:spry="
http://ns.adobe.com/spry".
* Added support for the new spry:content attribute, which
allows the replacement of static content with dynamic content when
JavaScript is enabled. This allows pages to work in a non scripting
environment.
* Added region state notification mechanism.
* Added Prototype's $() convenience function.
* Added support for descending and toggle sort.
* Added support for non-destructive filtering.
* Added data set load interval.
* Added built-in references:
o {ds_CurrentRowNumber}
o {ds_CurrentRowID}
o {ds_SortOrder}
o {ds_SortColumn}
* Filter callback functions now have the following args
passed to them: function myFilterFunc(dataset, rowObj, rowNumber).
Filter callback functions must now return the rowObj passed in, a
new rowObj, or null.
* Added data set support for retrieving XML data via the
POST method and specifying HTTP headers.
* Added a samples directory. It's pretty bare right now, but
over time will contain examples of things asked most frequently in
the forums. One of the more useful samples is the Data Set Explorer
page.
* Misc bug fixes:
o Text data not stored entity encoded.
o Data reference values need to be escaped in JS
expressions.
o RegExp object forces
Spry.Data.Region.processDataRefString() to bail early in IE.
o Spry attributes still exist in generated region output.
o Data set column (node text value) missing when node has an
attribute.
Download it and check it out!
Thanks,
Donald Booth
Adobe Spry Team

bad link to release notes. here is the correct:
http://www.cisco.com/en/US/products/ps6241/prod_release_notes_list.html

AIR and Spry Visually with DW

I posted this on the AIR forum but thought the Spry world
would like to know too.
I wanted to experiment with JUST using the built in DW
features (visual tools) to build an AIR app. With the Spry plugins
that come with CS3, it's possible!
Though, as a developer, the code might not be that well
written.....it's interesting that even designers have a shot at
making some simple AIR apps.
Check out the AIR app I made here:
Snippet AIR
app

quote:
Note that (re: your comments on the well-formedness of the
visually-generated code) inline event handlers aren't as big a best
practices snafu if you're building specifically to AIR.
Yes I agree! I came to that conclusion myself when I was
messing around with AIR (so I didn't feel as guilty when I inserted
it).
Thanks for the complements. It was fun.
i've found, after my experiment, that designers can have an
easy enough time making a simple AIR app. It would REALLY be easy
for them if there were some filter /search/pagination stuff
integrated into the SPRY plugins for Dreamweaver.
I was REALLY wanting to add some pagination to the app (SPRY
has some great capacity for this) but didn't want to go outside the
realm of Dreamweaver's visual, built-in capabilities. That would be
a great thing to offer in the SPRY toolbar's next release.

Spry Widget - Tooltip

Excuse me for sounding like a wuss, but it seems that the new
widgets like Tooltip include a bunch of instructions about how to
add the container and the constructor script in Code View. Isn't
one of the main points of the included widgets to use the WYSIWYG
interface of Dreamweaver so you don't have to code everything.
I would have thought that when Adobe came out with new
widgets, they would have done so in a way that worked like
extensions, where there were properties to set for things to work.
Not where you would copy files into directories, and then use
sample code to learn syntax.
This is not the reason that people purchase Dreamweaver. I
have just spent 45 minutes learning code for a Spry tooltip widget,
where I could have purchased an extension to do the same thing. I
did not buy Dreamweaver CS3 so I can spend my days coding pages
every time I want a tooltip to show up.
I would rather use Spry. I am just confused as to why the
original Spry widgets are so user friendly, and the new ones are
not simply something updated within the program having their own
toolbar buttons.
Any ideas or suggestions?
Thanks!

Hi Bubba,
Allow me to explain.
While related, the DW deam is separate from the Spry team.
The Spry team designs and releases features and widgets on their
schedule. DW has a much longer schedule than Spry and also, the
work involved in getting first class widget support takes a long
time. It has to be built and tested and that can take many weeks.
The DW team is busy building the next version and they don't
have the bandwidth to keep up with the Spry team as far as widget
support. So there will always be a lag between the widgets that
Spry has and the widgets that DW supports.
That being said, we, along with many of you, do not like this
widget disparity. We are taking steps to solve this, but I can't
say exactly what those plans are or when you will see the results,
but we are doing some cool widget work on the DW side that you can
look forward to.
And, there is nothing wrong with learning a little code!
Hope this helps.
Donald Booth
Adobe Spry Team

Spry 1.2 now available!

Hey Spry:: fans,
We just released the next version of Spry. Download it from
Labs.
We introduced our Widget Model in this release, with more
docs and a finished accordion example.
We have expanded the sample directory to show new
functionality and other common spry patterns.
Check it out.
Thanks,
Donald Booth
Adobe Spry Team

It would be great if eventually (whatever that means) all the
docs could be pushed into pdfs and help files for DW also. It would
be great if someone could write a plugin for DW to add the help
files, the short cuts and more! (Not sure how to go about something
like that with the namespaces being part of the standard HTML tags.
It seems like if you overwrote those tags... and someone else
overwrote those tags there would be a conflict.)
1. PDFs (of stuff like docs/data_set_overview.html)
2. DW Help files
3. Tag Libraries Update
4. Tag Editor Update
Of course this is likely stuff that will also be part of DW9,
but it should be added to one or the other. (So when does the beta
start?)

Horizontal Menu Bar - 2 issues

Hello, I have been here asking questions before and I still
have a couple more.
I am using the horizontal menu bar with the spry 1.5
pre-release files.
LINK
2 things, first:
I want the submenu text to be smaller than the menu text,
i.e. menu text should be 11px and submenu should be 10px, I just
cant seem to rustle it out of the css to make it happen.
ul.MenuBarHorizontal ul li
display: block;
float: none;
width: auto;
white-space: nowrap;
font-size:10px;
the bold addition does not seem to be working.
Secondly:
When this menu is viewed in IE7 it looks as if the border is
sunken/iframe is being used, and there is the text "
false" located inside the submenu.
I have commented out the hacks in the css for IE to no avail.
Wondering why the border looks so weird and the word false is being
imposed on my submenu
Thanks in advance

To change the font-size, try placing the font-size property
on the <a> element of the submenus.
The IE7 sunken/iframe problem is a hack that is necessary to
make the submenus appear above any native windows (Flash, Selects,
etc) that may be in the browser window. It's showing because you
removed the background color off of the <a> elements. Try
making the <li> or the <a> background color white and
it should hide the iframe.
ul.MenuBarHorizontal ul li {
background-color: white;
border-bottom: solid 1px white; /* Workaround IE Gap bug */
ul.MenuBarHorizontal ul a {
font-size:10px;
I also noticed that your menus were suffering from the
infamous link in list gap IE bug. You can either remove *all*
whitespace in your lists to get around the bug *or* use the bottom
border property like I did above.
--== Kin ==--

TextArea Validation Widget don't function with Prototype

I have seen that TextAreaValidationWidget don't function
properly if is loaded also the Prototype library. To verify, I have
also simply insert this code in the HEAD section of the
FormsValidation Demo included in the framework:
quote:
<script type='text/javascript'
src='prototype.js'></script>
By adding this file, the validation of text field is running
properly but the validation of textarea doesn't. The Firefox
console of errors report:
quote:
Invalid Quantifier +);} catch (e) {if!=$continue) {throw
e;}}});} catch(e) {if(e!=$break){thow e; }} return this;}\b
in SpryValidationTextarea.js line 785
Do you know how to solve this?
I use Spry 1.4, prototype 1.5.0 (because I use also lightbox
2.0)

Hi,
Based on a previous report we fixed this bug in the Spry 1.5
preview release. To fix this bug you should edit the
SpryValidationTextarea.js. Search for the:
Spry.Widget.ValidationTextarea.prototype.switchClassName =
function (className){
and inside you should see around line 763 the following code:
for (var k in classes){
if (classes[k] != className){
this.removeClassName(classes[k]);
This code should change to the following:
for (var k = 0; k < classes.length; k++){
if (classes[k] != className){
this.removeClassName(classes[k]);
Please let me know about your results.
Regards,
Cristian MARIN

Latest SpryHTMLDataSet.js available ...

Just an FYI for folks making use of the HTMLDataSet. I fixed a column name bug today that was reported in the ICE forums:
http://forums.adobe.com/message/1950092#1950092
In a nutshell, if your data set was extracting the column names from the first row of the data set, and the columns containing the names used HTML markup, there was a chance that the column names that were generated would have leading/trailing underscores.
We pushed the latest version of the SpryHTMLDataSet.js file up to the Labs site so folks can get the latest version with this patch.
The latest version of SpryHTMLDataSet.js:
// SpryHTMLDataSet.js - version 0.24 - Spry Pre-Release 1.6.1
can be found here:
http://labs.adobe.com/technologies/spry/includes/SpryHTMLDataSet.js
http://labs.adobe.com/technologies/spry/includes_minified/SpryHTMLDataSet.js
http://labs.adobe.com/technologies/spry/includes_packed/SpryHTMLDataSet.js
It contains the patch above and some other fixes:
- Added new removeUnbalancedRows constructor option to control whether or not rows that have fewer/more columns defined than column names specified. Default is false. If false, the data set will normalize all rows so that they have the same number of columns. Any missing values will be set to an empty string.
- Modified the column naming algorithm so that when firstRowAsHeaders:true and not enough column names exist, that we fallback to the "columnN" naming convention for the missing column names.
- Fixed bug that prevented HTMLDataSets, that initially load data from the page, from loading remote content. Converted the internal member usesExternalFile to a function that dynamically returns a bool based on the value of the url property. This was initially only getting set during construction time, but now it gets done on the fly.
- Fixed normalizeColumnName() so that it strips leading/trailing spaces *after* tags have been stripped. We were doing it in the reverse order and stripping tags re-introduced leading/trailing spaces in some cases leading to unexpected column names with leading/trailing underscores.
--== Kin ==--

Kinblas,
Can you tell me if the new Spry data you've released (which will be part of 1.7) now contains the nestedXML functionality or do we still need the seperate javascript file for nested operations etc.
Cheers
Phil

XML retrieval query

Hi folks,
I'm still developing my system monitoring application using
spry, but have noticed a curious issues when monitoring the
xmlhttprequest's through firebug.
The first time the dynamic xml files are called, one
httprequest is run for each ds entry, however, on the second and
later calls, it seems to generate 2 or 3 httprequests per ds entry.
I've included the code below in case i've missed something
completely obvious.
<%@LANGUAGE="VBSCRIPT" 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"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Server Perfomance Monitoring
System</title>
<script src="SpryAssets/SpryAccordion.js"
type="text/javascript"></script>
<script src="SpryAssets/xpath.js"
type="text/javascript"></script>
<script src="SpryAssets/SpryData.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript">

</script>
<style>
body {
color:#666666;
font-family:Arial,Helvetica,sans-serif;
font-size:small;
img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
</style>
</head>
<body>
<p> </p>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">IIS Statistics - Key
Perfomance Stats for IIS Servers (avg. 30 second
refresh)</div>
<div class="AccordionPanelContent">
<div spry:region="ds1">
<table width="100%">
<tr>
<th>Server Name</th>
<th>Active ASP Sessions</th>
<th>Current Connections</th>
<th>Wait Time for Last ASP Request</th>
<th>Queued ASP Requests</th>
<th>Last Updated</th>
</tr>
<tr spry:repeat="ds1">
<td align="center">{servername}</td>
<td align="center">{activeSessions}</td>
<td align="center">{currConnections}</td>
<td align="center">{requestWaitTime}</td>
<td align="center">{requestsQueued}</td>
<td align="center">{timestamp}</td>
</tr>
</table>
</div>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Memory - Free Memory
Indicators for monitored Servers (avg. 30 second refresh)
</div>
<div class="AccordionPanelContent">
<div spry:region="ds2">
<table width="100%">
<tr>
<th>Server Name</th>
<th>Free Memory</th>
<th>Last Updated</th>
</tr>
<tr spry:repeat="ds2">
<td align="center">{servername}</td>
<td align="center">{memAvailable}</td>
<td align="center">{timestamp}</td>
</tr>
</table>
</div>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">CPU - CPU Usage
statistics for monitored servers (avg. 30 second
refresh)</div>
<div class="AccordionPanelContent">
<div spry:region="ds3">
<table width="100%">
<tr>
<th>Server Name</th>
<th>Processor Usage</th>
<th>Last Updated</th>
</tr>
<tr spry:repeat="ds3">
<td align="center">{servername}</td>
<td align="center">{procUsage}%</td>
<td align="center">{timestamp}</td>
</tr>
</table>
</div>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Detailed Server
Statistics - (avg. 30 second refresh)</div>
<div class="AccordionPanelContent">
<div spry:region="ds3">
<table width="100%">
<tr>
<th>Server Name</th>
<th>Disk Statistics</th>
<th>Network Statistics</th>
<th>Services Statistics</th>
</tr>
<tr spry:repeat="ds3">
<td align="center">{servername}</td>
<td align="center"><a
href="disk.asp?server={servername}" target="_blank"><img
src="images/disk.GIF" width="16" height="16"
/></a></td>
<td align="center"><a
href="network.asp?server={servername}" target="_blank"><img
src="images/network.GIF" width="16" height="16"
/></a></td>
<td align="center"><a
href="services.asp?server={servername}" target="_blank"><img
src="images/services.GIF" width="16" height="16"
/></a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
Regards
James
EDIT: Forgot to mention, I'm using spry 1.5
pre-release.

Ok, I think I've tracked this down. It's the loadInterval
that's causing the issue. If I set all three datasets to refresh at
the same time, I get the symptoms as above. However, if I stagger
the loadIntervals (eg, ds1 - 5000, ds2 - 7000,ds3 - 9000) no
repeated xml requests are seen.
Is this a limitation of the xmlhttp request, not being able
to process several requests at the same time?
Regards
James
EDIT
I've confirmed this now with several other pages. Is there a
bug in the code somewhere that multiplies the requests??

New Spry Widgets Released

Hi All,
I know that we have been remiss in keeping up with our
ambitious release schedule.
As I mentioned earlier, we were shooting for a full new
release this month but didn't have the time.
Well, we decided to do a 'light launch' for our new Spry
widgets.
We have posted our new Spry widgets and 2 new beta docs here:
http://labs.adobe.com/technologies/spry/samples/preview.html
As you can see we have:
- Menu Bar
-Collapsible Panel
-Tabbed Panel
- Form Text Field
- Form Text Area
- Form Select
- Form Checkbox
- Tabbed Panel doc
- Collapsible Panel doc
As I say there, we are releasing these in this manner because
they are mostly done, but we don't have complete docs for
everything. Once we have full docs and some updates for data, we
will make a new zip and release Spry 1.4.
For now, you can check out these samples and play around with
them.
Let us know what you think.
We also added a new demo here:
http://labs.adobe.com/technologies/spry/demos/formsvalidation/
Hope you like the new stuff.
Thanks,
The Adobe Spry Team

Hi John,
So the thinking on that is this:
They are widgets because they are pieces of markup that
encapsulate advanced functionality. The actual validation is the
major part of the funtionality, but the actual widget is the span
tag container, the input itself, and then additional markup for the
messages. Basic mark-up, style with CSS and a constructor
script=Spry Widget.
As for structure, the 'widgets' folder is where we keep the
latest versions of the real thing. All required widgets resources,
like CSS and JS, plus the basic example file, go in the 'widgets'
folder.
The 'samples' directory is where we put samples that explain
or add onto the basic widget. This is more of a playing around
area.
But we reference the dependent files in the 'widgets'
directory so that we only need to have one copy of the files on the
site and in the zip. This helps ensure that every sample is working
off the same files.
But for you guys, it makes it a pain to get all the required
source files, I know. I was thinking of zipping the new samples and
putting them up so it's easier to download the new stuff.
Make sense?
Thanks,
Don

Spry 1.6 release

hey guys, what's the expected release for spry 1.6?
thanks.
Marc

sweet, thanks Donald. is there a blog or wiki or something
else i can keep
an eye on? mostly just to see the sneak previews of stuff,
read what's in
store for that release, etc.
Thanks.
Marc
"Donald Booth" <[email protected]> wrote in
message
news:fa7oh7$l9k$[email protected]..
> Hi Marc,
> We are shooting for the first half of October.
> Thanks,
> Donald Booth
> Adobe Spry Team

Spry menu bar woes (add submenu levels and edit width)

So i need some spry menu bar help. Apparently as a graphic designer i'm also expected to webdesign, and while i can solve most problems with a good googling, i seem to be at my wit's end fo this one. So the site i'm doing has a header ith a horizontal spry pop-up menubar (in Dreamweaver CS4). But some problems arise: when i manually add another submenu level, they don't show up in chrome or FF, they do werk perfectly in IE6. I just add the following code to the codepage:
<li><a href="#" class="MenuBarItemSubmenu">audio equipment</a>             <ul>               <li><a href="#">Digital Matrix Systems</a></li>               <ul>               <li><a href="#">R2 Digital Audio Matrix</a></li>               </ul>               <li><a href="#">pre-amplifiers & mixers</a></li>               <ul>               <li><a href="#">PMX124</a></li>               </ul>
the PMX never pops open in FF an chrome.. Should i be adding anything else to another part of the code? i'd like my submenu text to have a slight indent? How ever, when i add the indent to ul.menubarhorizontal ul , it elongates the submeny boxes in IE6, while looking normal (width) in chrome and FF. WHat part of the CSS style should i change to just have the text scoot over a bit without it really affecting the box layout? ALso, if anyone could tell me how to add a wee bit of spacing above the text (and beneath), i'd be eternally gratefull. Also, how do i change the with of the submenus? seing as my main buttons are images, but the names i ned to put in my submenus are turning out to be pretty long...
HTML code for the menu:
<tr>     <td><ul id="MenuBar1" class="MenuBarHorizontal">       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Products','','images/knoppenrollover_01.jpg',1)"><img src="images/knoppenbalk_01.jpg" name="Products" width="169" height="41" border="0" id="Products" /></a>         <ul>           <li><a href="#" class="MenuBarItemSubmenu">audio equipment</a>             <ul>               <li><a href="#">Digital Matrix Systems</a></li>               <ul>               <li><a href="#">R2 Digital Audio Matrix</a></li>               </ul>               <li><a href="#">pre-amplifiers & mixers</a></li>               <ul>               <li><a href="#">PMX124</a></li>               </ul>               <li><a href="#">music Sources</a></li>               <li><a href="#">amplifiers</a></li>               <li><a href="#">paging</a></li>               <li><a href="#">speakers</a></li>               <li><a href="#">microphones</a></li>             </ul>           </li>           <li><a href="#">racks and stands</a></li>           <li><a href="#">cables</a></li>         </ul>       </li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Company','','images/knoppenrollover_02.jpg',1)"><img src="images/knoppenbalk_02.jpg" name="Company" width="165" height="41" border="0" id="Company" /></a>         <ul>           <li><a href="#">Who are we?</a></li>           <li><a href="#">history</a></li>   <li><a href="#">contact us</a></li>   <li><a href="#">philosophy</a></li>   <li><a href="#">careers</a></li>         </ul>       </li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','images/knoppenrollover_03.jpg',1)"><img src="images/knoppenbalk_03.jpg" name="news" width="166" height="41" border="0" id="news" /></a></li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('projects','','images/knoppenrollover_04.jpg',1)"><img src="images/knoppenbalk_04.jpg" name="projects" width="166" height="41" border="0" id="projects" /></a></li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Downloads','','images/knoppenrollover_05.jpg',1)"><img src="images/knoppenbalk_05.jpg" name="Downloads" width="165" height="41" border="0" id="Downloads" /></a>         <ul>           <li><a href="#">catalogs</a>            </li>           <li><a href="#">manuals</a></li>           <li><a href="#">software</a></li>           <li><a href="#">documents</a></li>           <li><a href="#">pricelists</a></li> </ul>       </li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/knoppenrollover_06.jpg',1)"><img src="images/knoppenbalk_06.jpg" name="Contact" width="169" height="41" border="0" id="Contact" /></a></li>     </ul></td>
sprymenuhorizontal.css:
@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: none;      font-size: 14px;      cursor: default;      width: 1010px;      font-family: Arial, Helvetica, sans-serif; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: [url]http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html[/url] */ 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;      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: 100%;      z-index: 1020;      cursor: default;      width: 166px;      position: absolute;      left: -1000em;      background-color: #6C6C6C;      height: 0px;      margin-top: 0px;      margin-right: 0em;      margin-bottom: 10px;      margin-left: 0em;      text-align: right;      text-indent: 0em;      padding-top: 0px;      padding-right: 0em;      padding-bottom: 0px;      padding-left: 0px;      border-top-width: 1px;      border-right-width: 1px;      border-bottom-width: 1px;      border-left-width: 1px;      border-top-style: solid;      border-right-style: solid;      border-bottom-style: solid;      border-left-style: solid;      border-top-color: #666;      border-right-color: #666;      border-bottom-color: #666;      border-left-color: #666; } /* 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;      height: 0px; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li {      width: 166px; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul {      position: absolute;      height: 41px;      margin-top: 0%;      margin-right: 0%;      margin-bottom: 0px;      margin-left: 162px;      float: right; } /* 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: 1px solid #666;      background-color: #6C6C6C;      height: 0px;      padding-left: 0em; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a {      display: block;      cursor: pointer;      background-color: #6C6C6C;      padding: 0em;      color: #FC0;      text-decoration: none;      font-size: 14px;      margin-left: 0em; } /* 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: #FC0;      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: #FC0;      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: 98% 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: 98% 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: 98% 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: 98% 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: inline;           f\loat: left;           background: #FFF;      } }[/SPOILER] any help would be greatly appreciated, as i've been fidgiting with this thing for 2 days now, to no satisfying effect...

since the layout of the pasted text got all weird, here i'm trying it again.
sprymenubarhorizontal.css:
@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: none;
font-size: 14px;
cursor: default;
width: 1010px;
font-family: Arial, Helvetica, sans-serif;
/* 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;
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: 100%;
z-index: 1020;
cursor: default;
width: 166px;
position: absolute;
left: -1000em;
background-color: #6C6C6C;
height: 0px;
margin-top: 0px;
margin-right: 0em;
margin-bottom: 10px;
margin-left: 0em;
text-align: right;
text-indent: 0em;
padding-top: 0px;
padding-right: 0em;
padding-bottom: 0px;
padding-left: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #666;
border-right-color: #666;
border-bottom-color: #666;
border-left-color: #666;
/* 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;
height: 0px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 166px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
height: 41px;
margin-top: 0%;
margin-right: 0%;
margin-bottom: 0px;
margin-left: 162px;
float: right;
/* 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: 1px solid #666;
background-color: #6C6C6C;
height: 0px;
padding-left: 0em;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #6C6C6C;
padding: 0em;
color: #FC0;
text-decoration: none;
font-size: 14px;
margin-left: 0em;
/* 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: #FC0;
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: #FC0;
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: 98% 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: 98% 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: 98% 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: 98% 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: inline;
f\loat: left;
background: #FFF;

Spry menu bar doesn't appear correctly in IE

Hi guys..
I created a spry menu bar in DW CS4. It looks fine in Firefox but in IE 8, the background image of the navigation bar appears white after allowing activecontrol to run. I didn't include any image for ul.MenuBarHorizontal a because I wanted to use the background image for the div containing the navigation bar.(Hope I didn't confuse you there).. I tried using the search box but couldn't find any solution to my problem. Here are my screen shots.
This is in firefox.
This is in IE 8 before allowing activex.
This is in IE 8 after allowing activex. (Part of the navigation bar is white)
Here's the code.Hope you can help me asap. Thanks!
@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: 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: center;
    cursor: pointer;
    width: 9em;
    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: 9em;
    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: 9em;
/* 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: 1px solid #CCC;
    background-image: url(../images/single.jpg);
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    color: #000;
    text-decoration: none;
    padding-top: 1.05em;
    padding-right: 0.75em;
    padding-bottom: 1.05em;
    padding-left: 0.75em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #FFF;
    background-image: url(../images/single.jpg);
/* 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
    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-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-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(../images/single.jpg);
    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-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: inline;
        f\loat: left;
        background: #FFF;

/* 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;
I hope this helps.
Ben

Spry Menu Bar css not compatible with IE7? or compatibility View on IE8?

Well i've made my website
. Swimmerbuddy.com
Problem:I used the spry menu bar on a div tag. I've got it working fine on several browser and so on.. but hmm. i noticed that IE7 and only on compatibility view of IE8 it does not work...
It seems like the drop down menus get cover by the main content underneath it..
I started of with dwt i made my self.This is the DWT and the css that controll the dwt and the spry menu bar.
PLZ HELP ME.. THANKS
THIS IS THE DWT THAT THE PAGE RUNS ON
<!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>Untitled Document</title>

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


<style type="text/css">
a:link {
color: #000;
text-decoration: none;
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:visited {
color: #000;
text-decoration: none;
a:hover {
text-decoration: none;
color: #000;
a:active {
text-decoration: none;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
    <div id="networkicons"><a href="http://www.facebook.com/?ref=logo#!/profile.php?id=100001554936595" target="_blank"><img src="../_images/facebook.png" alt="facebook.com" width="45" height="45" border="0" title="facebook.com"/></a><a href="http://www.myspace.com/swimmerbuddy" TARGET="_blank"> <img src="../_images/myspace.png" alt="myspace.com" width="44" height="45" border="0" title="myspace.com"/></a><a href="http://twitter.com/swimmerbuddy" TARGET="_blank"> <img src="../_images/twitter.png" alt="twitter.com" width="43" height="45" border="0" title="twitter.com"/></a><a href="http://www.youtube.com/swimmerbuddy1" TARGET="_blank"> <img src="../_images/youtube.png" alt="youtube.com" width="44" height="45" border="0" title="youtube.com"/></a></div>
    <div id="buyNow1">
      <p><a href="../order_now.html"><img src="../buynowbutton.png" alt="bt1" width="130" height="25" border="0" longdesc="Order Your Swimmer Buddy Today!!" /></a></p>
    </div>
</div>
<div id="mainNav">
    <ul id="mainNavcontent" class="MenuBarHorizontal">
      <li><a href="../index.htm">Home</a>        </li>
      <li><a href="../swimmer.html">Swimmer Buddy</a></li>
      <li><a href="../order_now.html">Order Now</a>        </li>
      <li><a href="#" class="MenuBarItemSubmenu">Gallery</a>
        <ul>
          <li><a href="../photo_gallery.html">Photos</a></li>
          <li><a href="../video_gallery.html">Videos</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Zinger Products</a>
        <ul>
          <li><a href="http://www.winkyscoop.com/">Winky Scoop</a></li>
          <li><a href="http://www.1800succeed.com/">Hypmovation</a></li>
          <li><a href="http://www.1800succeed.org/">1800SUCCEED</a></li>
          <li><a href="http://www.zingerproducts.com">Zinger Store</a></li>
        </ul>
      </li>
      <li><a href="../about.html">About Us</a></li>
      <li><a href="../contact.html">Contact Us</a></li>
    </ul>
</div>

<div id="pageInfo">
    <div id="info_page">
      <p class="regionID">Region ID</p>
      <hr class="breaklinePageInfo" />
      <p class="breadcrum">> <a href="../index.htm">Breadcrum </a></p>
    </div>
    <div id="mainContent">
      <div id="content">
        <p>Main Content Goes her</p>
      </div>
    </div>
</div>


   <div id="buyNow2"><a href="../order_now.html"><img src="../buynowbutton.png" width="130" height="25" /></a></div>
   
<div id="footer">
<div id="footertext">
        <p class="footertextclass">Copyright © 2010 SwimmerBuddy.com. All rights reserved. SwimmerBuddy.com is part of <a href="http://www.zingerproducts.com" class="footertextclass">Zinger Products</a>. Designated Trademarks and brands are the property of their respective owners. This page was last modified Setember 28,2010. Swimmer Buddy - Pattent Pending 2010</p>
      </div>
    <div id="footerlinks">
        <p classs="footerlinkspacing"> <span class="footerlinkspacing"><a href="../Disclaimer.html">Disclaimer</a><a href="../terms.html"> Term of Service </a><a href="../contact.html">Contact Us</a></span>
</div>
      </div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("mainNavcontent", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
THIS IS THE MAIN.CSS
@charset "utf-8";
#networkicons {
height: 50px;
width: 200px;
margin-top: 160px;
margin-left: 15px;
position: absolute;
#wrapper {
width: 933px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
position: relative;
#mainNav {
text-align: center;
position: relative;
margin-right: auto;
margin-left: auto;
width: 934px;
padding-bottom: 15px;
clear: both;
overflow: visible;
#navwrapper {
width: 935px;
margin-right: auto;
margin-left: auto;
#mainContent {
width: 910px;
padding-left: 10px;
padding-right: 10px;
position: relative;
padding-bottom: 20px;
padding-top: 20px;
#content {
width: 910px;
position: relative;
#wrapper #footer #footerlinks p .footerlinkspacing a {
margin-right: 20px;
#footer {
width: 930px;
background-color: #fff;
position: relative;
margin-top: 5px;
text-align: center;
color: #000;
padding-bottom: 10px;
margin-bottom: 15px;
#header {
width: 930px;
height: 209px;
background-image: url(../_images/header.jpg);
background-repeat: no-repeat;
#buyNow1 {
height: 25px;
width: 140px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
background-repeat: no-repeat;
color: #666;
padding: 5px;
position: absolute;
top: 160px;
right: 150px;
.buyNow1 {
color: #666;
#wrapper #pageInfo #info_page .breadcrum {
color: #003;
#wrapper #pageInfo #info_page .breadcrum a {
color: #003;
html, body {
margin: 0px;
padding: 0px;
#buyNow2 {
height: 25px;
width: 130px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
padding: 5px;
position: relative;
#wrapper #buyNow2 a img {
position: absolute;
top: -30px;
right: 50px;
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;
#pageInfo {
width: 930px;
background-image: url(../_images/pageinfobackground.jpg);
background-repeat: repeat-x;
background-color:#FFF;
text-align: left;
padding-bottom: 15px;
margin-top: 18px;
position: relative;
overflow: visible;
visibility: visible;
#wrapper #mainNav #mainNavcontent {
position: absolute;
left: 0px;
width: 930px;
.regionID {
font-size: 2em;
font-weight: bold;
color: #FFC;
margin-top: 1em;
margin-bottom: 0em;
text-align: left;
margin-left: 5px;
.breaklinePageInfo {
margin-top: 0.5em;
color: #FAFEAB;
.breadcrum {
color: #003;
font-size: 1.1em;
font-weight: bold;
text-decoration: underline;
margin-top: -0.2em;
margin-left: 15px;
#breadcrum {
font-weight: bold;
color: #003;
#footertext {
width: 910px;
font-size: 0.6em;
padding-left: 10px;
padding-right: 10px;
margin-top: 10px;
#footerlinks {
width: 930px;
font-size: 0.7em;
font-weight: bold;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #000;
position: relative;
margin-top: 10px;
margin-bottom: 5px;
.footertextclass {
color: #000;
.footerlinkspacing {
margin-top: -0.5em;
color: black;
height: 10px;
font-style: normal;
line-height: normal;
font-variant: normal;
letter-spacing: normal;
p {
margin: 0px;
padding: 0px;
body {
text-align: center;
margin-top: 5px;
background-color: #073e78;
background-image: url(../_images/background.jpg);
background-repeat: repeat-x;
background-attachment: scroll;
font-size: 100%;
THIS IS THE dropdown menu.css
@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: 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: 0px;
padding: 0;
list-style-type: none;
font-size: 100%;
position: static;
text-align: center;
cursor: pointer;
width: 132.8px;
float: left;
overflow: visible;
visibility: visible;
/* 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: 132.8px;
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;
/* 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: #333;
color: #FFF;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #FFF;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
background-image: url(../_images/bar-top.png);
background-repeat: no-repeat;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #003;
background-image: url(../_images/bar-Bottom.png);
/* 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
color: #003;
background-image: url(../_images/bar-Bottom.png);
background-position: bottom;
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(../_images/bar-topsub.png);
background-repeat: no-repeat;
background-position: right top;
/* 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(../_images/bar-topsubhover.png);
background-repeat: no-repeat;
background-position: right bottom;
/* 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(SpryMenuBarDownHover.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: inline;
f\loat: left;
background: #FFF;

Thanks a lot for that tip. It does improve it by a whole lot.. i c what my mistake was.. however, something is still off
.. The Drop down menu is not behaving well...
As you may c by the picture, the drop down menu now moves to the right. and is not because of the object to its left, i've modified that. Zinger Products Drop Down Menu also does the same.

Spry 1.6.1 released

Similar Messages

Maybe you are looking for