Css problem in spry gallery demo, ie "doubled margin" for thumbnails

http://labs.adobe.com/technologies/spry/demos/gallery/
View page in both Firefox and IE6. Note that in Internet
Explorer (Windows), the margin on the left is double that of the
same in Firefox. This is a well-documented IE CSS issue that occurs
when a floated element also has margin set on the side to which it
is floated, as in float:left; margin:5px;
It's an issue when the margin is such that it causes wrapping
within the thumbnails parent container... in IE browsers.
Add display:inline to the #thumbnails div rule to correct the
problem.
Just FYI.
Donna Casey

Thanks Donna! The fix will appear in the next drop.
--== Kin ==--

Similar Messages

Spry Gallery Demo Grow effect problems

Im learning and trying to recreate the spry gallery demo with
the growing thumbnails.
I have replicated pretty much all the code and used the same
onmouseover gallery.js and spryeffects.js but I just get an error
on page and no grow.
If I use the attribute panel and use the grow effect it does
work but the thumbnails around the one growing are pushed around
instead of the growing thumbnail appearing on top.
I'm stuck!
My code for the thumnail region is here:
<div id="thumbcontainer" spry:region="dsGallery">
<div spry:repeat="dsGallery"
onmouseover="GrowThumbnail(this.getElementsByTagName('img')[0],
'75', '75');"
onmouseout="ShrinkThumbnail(this.getElementsByTagName('img')[0]);">
<img src="thumbnails/{@thumbpath}" alt="" width="32"
height="32" id="tn{ds_RowID}" style="left: 0px; right: 0px;"
spry:setrow="dsGallery" class="thumbImage"/>
</div>
</div>
Any suggestions

I'm confused. The example for Spry gallery DOESN'T use an
anchor tag around the thumbnails... In your article and in some
posts, you say that the structure is:
<div id="thumbnails">
<div class="thumbnail">
<a href="image.jpg"><img src="image.jpg"
/></a>
</div>
</div>
However, I downloaded Spry_1_6_1_022408 and copied the
example thumbnails element & content verbatim:
<div id="thumbnails" spry:region="dsPhotos dsGalleries
dsGallery">
<div spry:repeat="dsPhotos"
onclick="HandleThumbnailClick('{ds_RowID}');"
onmouseover="GrowThumbnail(this.getElementsByTagName('img')[0],
'{@thumbwidth}', '{@thumbheight}');"
onmouseout="ShrinkThumbnail(this.getElementsByTagName('img')[0]);">
<img id="tn{ds_RowID}" alt="thumbnail for {@thumbpath}"
src="galleries/{dsGalleries::@base}{dsGallery::thumbnail/@base}{@thumbpath}"
width="24" height="24" style="left: 0px; right: 0px;" />
</div>
<p class="ClearAll"></p>
</div>
NO ANCHOR TAG. Even if you look in the generated source,
there's no link surrounding the thumbnail image.
So I guess I am unclear as to how to apply your fix? Using
the 1.6.1 version, the sample function code you show doesn't match,
nor does it seem to reflect your modifications...
Any ideas? I managed to track down your post about the bug in
IE 7 (it exists in IE6, too) [the demo link (
http://mad.sweepingdesign.com/index.html)
goes to a page that says "It works!"]
The actual article can be found here, though the demo link
shows nothing:
http://www.sweepingdesign.com/wordpress/2007/11/18/spry-gallery-demo-and-ie7-z-index-bug/

No Thumbs or Main Image with Spry Gallery Demo

Hi everyone, DW CS3 newbie here.
I hope this topic hasn't been beaten into the ground yet.
I'm trying to put together a site
(members.cox.net/rangersbu9/gallery.html) for my son's soccer team
and am running into a wall getting the original, dynamic Spry
gallery demo to work. I've done my best to collect and modify the
required files and place them appropriately but, when the files are
loaded on the live server (the wrap div contents are all but
invisible when I view with IE7 locally, apparently due to the PC
not be set up as local server) the thumbs are 'x's and the main
image is a 1px x 1px dot.
The controls will highlight between the empty thumbs and the
gallery pull-down will select between the two options I've put in
the XML file but that's about it. Perhaps it is my ignorance, but
it seems like a ( src= ) tag is missing in the 'mainImageOutline'
div because I cannot understand where the main picture is coming
from otherwise.
Any insight from the source at the link above? Please keep in
mind I have two week's experience with DW and website building but
do have a programming background (from a few decades ago :->). I
believe I have the un-updated CS3 Spry version, if that matters.
Many thanks to Don and others here for posts that have helped
me get this far.
-Kurt

Update:
Got the thumbs to appear. Had them physically sized larger
than the XML fields stated. However, they will not grow/shrink. In
digging through gallery.js, I see that those two functions call
Spry.Effects.SizeAndPosition() - I cannot find that function in any
of the includes (i.e. SpryEffects.js). Spry.Effects.Size yes, but
not SizeAndPosition. Wondering if this gallery.js calls a later
version of SpryEffects.js than I currently have installed (it's
Spry 1.4). I will download 1.6 and check it out but if anyone has
any other input, please let me know.
Still no main image. In gallery.js I found ShowCurrentImage()
which had a hardcoded path to the images that did not match mine.
Corrected the path but no change.
Any suggestions?
Thanks.
-Kurt

Gallery Demo and IE7 Z-Index Bug

What is the workaround that corrects the problem in IE7
whereby Spry's Grow function shows enlarged images behind (not on
top) of their adjacent micro thumbs. Thanks in advance.

I'm confused. The example for Spry gallery DOESN'T use an
anchor tag around the thumbnails... In your article and in some
posts, you say that the structure is:
<div id="thumbnails">
<div class="thumbnail">
<a href="image.jpg"><img src="image.jpg"
/></a>
</div>
</div>
However, I downloaded Spry_1_6_1_022408 and copied the
example thumbnails element & content verbatim:
<div id="thumbnails" spry:region="dsPhotos dsGalleries
dsGallery">
<div spry:repeat="dsPhotos"
onclick="HandleThumbnailClick('{ds_RowID}');"
onmouseover="GrowThumbnail(this.getElementsByTagName('img')[0],
'{@thumbwidth}', '{@thumbheight}');"
onmouseout="ShrinkThumbnail(this.getElementsByTagName('img')[0]);">
<img id="tn{ds_RowID}" alt="thumbnail for {@thumbpath}"
src="galleries/{dsGalleries::@base}{dsGallery::thumbnail/@base}{@thumbpath}"
width="24" height="24" style="left: 0px; right: 0px;" />
</div>
<p class="ClearAll"></p>
</div>
NO ANCHOR TAG. Even if you look in the generated source,
there's no link surrounding the thumbnail image.
So I guess I am unclear as to how to apply your fix? Using
the 1.6.1 version, the sample function code you show doesn't match,
nor does it seem to reflect your modifications...
Any ideas? I managed to track down your post about the bug in
IE 7 (it exists in IE6, too) [the demo link (
http://mad.sweepingdesign.com/index.html)
goes to a page that says "It works!"]
The actual article can be found here, though the demo link
shows nothing:
http://www.sweepingdesign.com/wordpress/2007/11/18/spry-gallery-demo-and-ie7-z-index-bug/

How to make like Spry Products demo using Flash CS4 / xml?

hello there!
i wonder is it possible to make something similar to Spry Products Demo using Flash CS4 for front end and xml for back end data. take a look at this draft image. If it can be done, can someone guide me please. I am super new to AS2/3 - Please. Thanks for your help.

hello there!
i wonder is it possible to make something similar to Spry Products Demo using Flash CS4 for front end and xml for back end data. take a look at this draft image. If it can be done, can someone guide me please. I am super new to AS2/3 - Please. Thanks for your help.

Photo Gallery Demo Problem

I'm trying to understand the Photo Gallery demo so I can
replicate the function for use on various sites. I've copied the
html, xml, javascript and some of the photo file elements to my
hard drive. I initially modified the file structures to something
more of my liking, but had some problems with the links. I've since
mimicked the structures so I can reduce the initial errors, but I
am stumped at the var dsGallery and var dsPhotos statements that
dynamically link to the China, Paris and Egypt photo databases. In
the original dynamic definition, DreamWeaver only parses the
dsGalleries XML definition, not defining the dsGallery and dsPhoto
nodes. I wasn't too concerned about that given the variable nature,
but nothing except the pull-down menu and controls displayed in the
browser. DreamWeaver shows correct parsing of the dsGalleries XML,
dsGallery and dsPhoto nodes only when I eliminate the dynamic
linking and set it to one of the static links (Egypt). This fails
in the browser to link to the data, giving a display that shows the
correct number of empty thumbnail frames but without the displayed
photos, no Spry effects, and no large photo display. I'm sure I
have multiple reference errors, but I don't see them. Any ideas?
Initial Photo Demo page:
<!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=ISO-8859-1" />
<title>Gallery</title>
<link rel="stylesheet" type="text/css"
href="../css/screen.css">
<script type="text/javascript"
src="../SpryAssets/xpath.js"></script>
<script type="text/javascript"
src="../SpryAssets/SpryData.js"></script>
<script type="text/javascript"
src="../SpryAssets/SpryEffects.js"></script>
<script type="text/javascript">
var dsGalleries = new
Spry.Data.XMLDataSet("galleries/galleries.xml",
"galleries/gallery");
var dsGallery = new
Spry.Data.XMLDataSet("galleries/{dsGalleries::@base}{dsGalleries::@file}",
"gallery");
var dsPhotos = new
Spry.Data.XMLDataSet("galleries/{dsGalleries::@base}{dsGalleries::@file}",
"gallery/photos/photo");
</script>
<script src="../SpryAssets/gallery.js"
type="text/javascript"></script>
</head>
<body id="gallery">
<noscript><h1>This page requires JavaScript.
Please enable JavaScript in your browser and reload this
page.</h1></noscript>
<div id="wrap">
<h1 id="albumName"
spry:region="dsGallery">{sitename}</h1>
<div id="previews">
<div id="galleries" spry:region="dsGalleries">
<label for="gallerySelect">View:</label>
<select spry:repeatchildren="dsGalleries"
id="gallerySelect"
onchange="dsGalleries.setCurrentRowNumber(this.selectedIndex);">
<option spry:if="{ds_RowNumber} == {ds_CurrentRowNumber}"
selected="selected">{sitename}</option>
<option spry:if="{ds_RowNumber} !=
{ds_CurrentRowNumber}">{sitename}</option>
</select>
</div>
<div id="controls">
<ul id="transport">
<li><a href="#" onclick="StopSlideShow();
AdvanceToNextImage(true);"
title="Previous">Previous</a></li>
<li class="pausebtn"><a href="#" onclick="if
(gSlideShowOn) StopSlideShow(); else StartSlideShow();"
title="Play/Pause" id="playLabel">Play</a></li>
<li><a href="#" onclick="StopSlideShow();
AdvanceToNextImage();" title="Next">Next</a></li>
</ul>
</div>
<div id="thumbnails" spry:region="dsPhotos dsGalleries
dsGallery">
<div spry:repeat="dsPhotos"
onclick="HandleThumbnailClick('{ds_RowID}');"
onmouseover="GrowThumbnail(this.getElementsByTagName('img')[0],
'{@thumbwidth}', '{@thumbheight}');"
onmouseout="ShrinkThumbnail(this.getElementsByTagName('img')[0]);">
<img id="tn{ds_RowID}" alt="thumbnail for {@thumbpath}"
src="galleries/{dsGalleries::@base}{dsGallery::thumbnail/@base}{@thumbpath}"
width="24" height="24" style="left: 0px; right: 0px;" />
</div>
<p class="ClearAll"></p>
</div>
</div>
<div id="picture">
<div id="mainImageOutline" style="width: 0px; height:
0px;"><img id="mainImage" alt="main image" /></div>
</div>
<p class="clear"></p>
</div>
</body>
</html>
Fixed reference version:
<head>
var dsGalleries = new
Spry.Data.XMLDataSet("Graphics/galleries/galleries.xml",
"galleries/gallery");
var dsGallery = new
Spry.Data.XMLDataSet("Graphics/galleries/egypt/Egyptphotos.xml",
"gallery");
var dsPhotos = new
Spry.Data.XMLDataSet("Graphics/galleries/egypt/Egyptphotos.xml",
"gallery/photos/photo");
</script>
Supporting files galleries.xml and Egyptphotos.xml
<?xml version="1.0" encoding="UTF-8"?>
<galleries>
<gallery base="Graphics/galleries/egypt/"
file="Egyptphotos.xml">
<sitename>Egypt</sitename>
<photographer>Don Booth</photographer>
<contactinfo>
http://www.adobe.com</contactinfo>
<email>[email protected]</email>
<security><![CDATA[]]> </security>
</gallery>
... duplicate China and Paris declarations
</gallery>
</galleries>
<?xml version="1.0" encoding="UTF-8"?>
<gallery
base = ""
background = "#FFFFFF"
banner = "#F0F0F0"
text = "#000000"
link = "#0000FF"
alink = "#FF0000"
vlink = "#800080"
date = "1/10/2006">
<sitename>Egypt Gallery</sitename>
<photographer>Don Booth</photographer>
<contactinfo>
http://www.adobe.com</contactinfo>
<email>[email protected]</email>
<security><![CDATA[]]> </security>
<banner font = "Arial" fontsize = "3" color =
"#F0F0F0"> </banner>
<thumbnail base
="../../gallery/galleries/egypt/thumbnails/" font = "Arial"
fontsize = "4" color = "#F0F0F0" border = "0" rows = "3" col =
"5"> </thumbnail>
<large base ="../../gallery/galleries/egypt/images/" font
= "Arial" fontsize = "3" color = "#F0F0F0" border = "0">
</large>
<photos id = "images">
<photo
path = "egypt_01.jpg"
width = "350"
height = "262"
thumbpath = "egypt_01.jpg"
thumbwidth = "75"
thumbheight = "56">
</photo>
</photos>
</gallery>

Please delete this posting. I've found the full original
information in the v1.6 pre-release information and will compare to
that baseline.

Problem with Spry Menu Bar 2.0 (1.0) re - CSS

Hello:
I am having some difficulty with a Spry Menu Bar (horizontal) 2.0 (1.0) that I have created. Initially I thought the problem was with regard to rendering issues on IE 6.0, however the problem seems to be more general than that and I have come to believe that it has to do with the CSS created by the Widget Browser and modified once imported into the webpage. Hence I have elected to post my issue here rather than on the spry page.
I have relied on the tutorial provided by David Powers (Bayside.css) and in addition other documentation regarding the Spry menu bar UI. The problem appeared to be one of IE 6 rendering the page with a gap that is created when the drop down menus appear, thus pushing down any divs that appear below the page.
However, through a painstaking process of trial and error my problem now seems to be that when I export the CSS generated by the widget browser to an external style sheet (the general style sheet governing the whole site), it conflicts with other CSS styles regarding links etc. The end result is that all the padding, background colours, background images, and text colours are lost. So long as the CSS remains within the head this doesn't happen.
My thinking is that this must have to do with issues of specificity, inheritence, etc.
The site can be viewed at the following URL: http://www.aclco.org/testing/index.html. In its current form all CSS related to the menu bar is found in the head of each page. (see CSS below).
My question is can I establish a separate style sheet for the horizontal menu bar and have those styles applied specifically (and only) to the menu bar. My only other alternative is to work through the remainder of the general style sheet and work through any issues of specificity/inheritance -- which may be the "best" practice, but it risks causing other "cascading" [sic] problems elsewhere.
Any advice or suggestions or directed reading (that would point to a solution) that could be offered would be greatly appreciated.
Steve Webster
The CSS governing the horizontal menu bar is as follows: (currently the following CSS is embedded in the head of the web page)
<style type="text/css">
/* -- Begins Spry Menu Widget 2.0 (1.0) Horizontal menu bar Custom styles -- */
/* BeginOAWidget_Instance_2141544: #MenuBar */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
    these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
     These assume the following widget classes for menu layout (set in a preset)
    .MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
    .MenuBarVertical - vertical main bar; all submenus are pull-right.
    You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
    They only apply to horizontal menu bars:
        MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
        MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
        MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
        MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
                        and centered in its parent container.
        MenuBarFullwidth - Grows to fill its parent container width.
    In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
    with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
    there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
    background-color:transparent;
    font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
                                                MenuItem, and MenuItemLabel
                                                at a given level all use same definition for ems.
                                                Note that this means the size is also inherited to child submenus,
                                                so use caution in using relative sizes other than
                                                100% on submenu fonts. */
    font-weight: normal;
    font-size: 17px;
    font-style: normal;
    padding:0;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
    display:none;
.MenuBarLeftShrink {
    float: left; /* shrink to content, as well as float the MenuBar */
    width: auto;
.MenuBarRightShrink {
    float: right; /* shrink to content, as well as float the MenuBar */
    width: auto;
.MenuBarFixedLeft {
    float: left;
    width: 80em;
.MenuBarFixedCentered {
    float: none;
    width: 80em;
    margin-left:auto;
    margin-right:auto;
.MenuBarFixedCentered br {
    clear:both;
    display:block;
.MenuBarFixedCentered .SubMenu br {
    display:none;
.MenuBarFullwidth {
    float: left;
    width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
    padding: 0px 0px 0px 0px;
    margin: 0;     /* Zero out margin on the item containers. The MenuItem is the active hover area.
                For most items, we have to do top or bottom padding or borders only on the MenuItem
                or a child so we keep the entire submenu tiled with items.
                Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
    padding: 10px 10px 10px 4px;
    background-color:#000088;
    background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segm ent-Dark.png);
    background-repeat:repeat-x;
#MenuBar .MenuItemFirst {
    border-style: none none none none;
#MenuBar .MenuItemLast {
    border-style: none none none none;
#MenuBar .MenuItem .MenuItemLabel{
    text-align:center;
    line-height:1.4em;
    color:#ffffff;
    background-color:transparent;
    padding: 0px 18px 0px 5px;
    width: 10em;
    width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
    width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    font-style: normal;
    background-color:#000088;
    padding:0px 2px 0px 0px;
    border-width:0px;
    border-color: #cccccc #cccccc #cccccc #cccccc;
    /* Border styles are overriden by first and last items */
    border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst {
    border-style: none;
    padding: 0px;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
    padding-top: 0px;
#MenuBar .SubMenu .MenuItemLast {
    border-style: none none none none;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
    padding-bottom: 10px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
    text-align:left;
    line-height:1em;
    background-color:transparent;
    color:#ffffff;
    padding: 10px 10px 10px 10px;
    width: 240px;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
    background-color: #2E35A3;
    background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segm ent%20Light2.png);
    background-repeat:repeat-x;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #ffffff;
#MenuBar .MenuItemHover .MenuItemLabel{
    background-color: transparent;
    color: #ffffff;
#MenuBar .SubMenu .MenuItemHover {
    background-color:#2E35A3;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
    background-color: transparent;
    color: #ffffff;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
    background-color: transparent;
    min-width:0%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
    border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
    top: 100%;    /* 100% is at the bottom of parent menuItemContainer */
    left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                    and your personal taste.
                    0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                    on MenuItemContainer and MenuItem on the parent
                    menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                    the dropdown with the left of the menu item label.*/
    z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
    top: 0px;
    left:100%;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
    background-color: transparent;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
    top: 0px;    /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
                that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
                vertically 'centered' on its invoking item */
    left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
                negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
                to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #ffffff;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #ffffff;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
    margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
/* Ends Spry Menu Bar Widget 2.0 (1.0) Horizontal Menu Custom styles */
</style>
The CSS governing the site generally is reproduced below: (my belief is that it is the a:link, a:visited, a:hover, a:active styles that may be in conflict).
@charset "utf-8";
body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    min-height: 0; /* This is necessary to overcome the "haslayout" bug that is found in Windows 7 in conjuction with IE8. For More information see: URL -- http://reference.sitepoint.com/css/haslayout.html */
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align:center; /* This allows for the centering of the container and overcomes a bug inherent in IE 5 */
    color: #000000;
    list-style-image: none;
    background-color: #FCFCFC;
h1,h2,h3,h4,h5,h6 {
color:#000066;
a:link {
    color: #151A96;
    text-decoration: underline;
a:visited {
    text-decoration: underline;
    color: #1B8DCD;
a:hover {
    text-decoration: none;
    color: #F30A0A;
a:active {
    text-decoration: underline;
    color: #151A96;
#container {
    width: 960px;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    text-align: left; /* this overrides the text-align: center on the body element. */
    background-image:
    url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Midsection%20_960.png);
    background-repeat: repeat-y;
#header {
        padding: 0; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
        width:960px;
        height:332px;
        background-image:
        url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Header_960.png);
        background-repeat:no-repeat;
#header h1 {
    margin-right: 0px; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    display:none;
#header img {
    display: none;
#Main_nav_contents {
    padding: 0;
    margin-top: 0px;
    height: 39px;
    width: 950px;
    padding-top: 275px;
    padding-left: 39px;
    z-index: 3;
#MenuBarVertical {
    margin-bottom: 50px;
    padding-top: 50px;
    padding-bottom:200px;
    padding-left: 15px;
    padding-right: 15px;
.mainContent_left {
    margin: 0;/* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
    padding-left:30px;
    padding-right:20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    width: 600px;
    float: left;
.sidebar_right {
    float: right; /* since this element is floated, a width must be given */
    width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    margin-top: 30px;
    margin-left:0;
    margin-right:10px;
    font-size:90%;
.mainContent_right {
    margin-left: 10px;
    padding-left:30px;
    padding-right:20px;
    width: 600px;
    float: right;
.sidebar_left {
    float: left; /* since this element is floated, a width must be given */
    width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    margin-top: 30px;
    margin-left:30px;
    margin-right:0;
    overflow: hidden;
    font-size:90%;
.main_content_centered {
    width: 650px;
    margin-left: 155px;
.main_content_centered_header {
    margin-left: 75px;
.sidebar_textbox {
    margin: 0px;
    width: 260px;
    padding: 2px;
.sidebar_textbox_header {
    width:255px;
    height:58px;
    background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Portrait%20Textbox%20He ader.png);
.sidebar_textbox_background_middle {
     width: 255px;
    padding-top: 12px;
    padding-bottom: 10px;
    background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Portrait%20Textbox%20Mi ddle.png);
    background-repeat: repeat-y;
.sidebar_textbox_content {
    /* The width and padding are set as follows to accomodate quirks in browser rendering and to ensure that text is contained within the background of the text box */
    width: 230px;
    padding-left: 20px;
    padding-right: 40px;
.sidebar_textbox_footer {
    width:255px;
    height:64px;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Portrait%20Textbox%20Foo ter.png);
#issues_menu a:link {
    color: #151A96;
    text-decoration: none;
    font-weight:bold;
#issues_menu a:visited {
    color: #151A96;
    font-weight:bold;
    text-decoration: none;
#issues_menu a:hover {
    color: #F30A0A;
    font-weight:bold;
    font-style: oblique;
    text-decoration: none;
#issues_menu a:active {
    color: #151A96;
    font-weight:bold;
    text-decoration: none;
#archives {
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 20px;
    padding-left: 0px;
.landscape_textbox {
    width: 500px;
    margin-right: 0px;
    margin-left: 30px;
    padding-top:35px;
    padding-bottom: 25px;
    font-style: normal;
    font-weight: normal;
.landscape_textbox_hdr {
    width:500px;
    height:38px;
    margin:auto;
    padding:0;
    background-image:
url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Landscape%20Textbox%20Header.png);
.landscape_textbox_middle {
    width:auto;
    margin:auto;
    padding-top: 12px;
    padding-bottom: 12px;
    background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/landscapte%20Textbox%20 Middle.png);
    background-repeat:repeat-y;
.landscape_textbox_content {
    width:450px;
    padding:25px;
.landscape_textbox_ftr {
    width:500px;
    height:44px;
    margin:auto;
    padding:0;
    background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Landscape%20Textbox%20F ooter.png);
#footer {
    padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    width: 960px;
    height: 222px;
    background-image:
    url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Footer%20_960.png);
    background-repeat:no-repeat;
#footer p {
    margin: 0px; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding:0px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    text-align:center;
    margin-left: 50px;
    margin-right: 50px;
    padding: 10px;
    font-size: small;
#footer h5 {
text-align:center;
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
    float: left;
    margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
.dropcap {
    display: block;
    float: left;
    line-height: 80%;
    font-size: 250%;
    font-weight: bolder;
    color: #000066;
    padding: .03em .1em 0 0;
.red_arrows {
    list-style-position: outside;
    list-style-image: url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Arrow%20Large.png);
.blue_bullets {
    list-style-position: outside;
    list-style-image: url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Bullet%20Medium%20Full.png);
.attention {
    color: #F30A0A;
    font-size:x-large;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    font-weight:900;
.attention_small {
    color: #F30A0A;
    font-size:large;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    font-weight:900;
.table {
    table-layout:fixed;
.blue {
    color: #00F;
#container .mainContent_left p .blue {
    color: #0303A0;

Hello Martin:
Thanks for your input. However I am not certain we have resolved this issue adequately, or understand the principles governing the css as regards this spry menu framework 2.0 (1.0).
For example, the menu only works in IE 6.0 if the css remains in the head. I agree with your original post that it shouldn't make any difference whether the css is posted in the head or in a separate style sheet (so long as specificity issues are addressed). Both should work -- and yet it doesn't.
If the CSS is placed in the separate style sheet governing the total site, it doesn't work for 6.0. If placed at the top of the style sheet, conflicts of specificity prevent the menu from rendering properly in any of the browsers causing the rules for general links to govern the menu.   This has been verified using a cross browser testing. If the styles are placed at the bottom of the style sheet to help them take precedence, they work in all the browsers except for IE 6.
The website I am building needs to support IE 6 for a variety of reasons, and because it is catering to the non-profit community and to low income persons, I am mindful of even small differences in page weight.
So for me, at least, the issue remains baffling.
I appreciate your input, but also would appreciate the input from others, and especially Adobe Community Professionals and employees. The spry framework in this regard is not well documented. I am not certain if this is exclusively a CSS problem, if it might also be complicated by the architecture of the spry framework, or if indeed other variables are at play.
I would be my hope that in resolving the problem, other users of the this particular spry framework might also benefit.
Thanks,
Steve.

FireFox -- Issue with Spry Gallery

I posted this a few months ago and I was wondering if I could
get an answer.
I want to make the images in the Spry gallery fade out before
a new image fades in. In the current mode the images vanish
instantly followed by a fade-in of the next or previous image.
I have been successful in achieving this effect in IE by
removing the following lines of code in the Gallery.js file (in the
center of the SetMainImage function).
img.style.opacity = "";
img.style.filter = "";
I also changed the background-color of #mainImageOutline in
the css file to #000000 (black). I believe this also resolved the
white speck problem.
Although the fade-out does work properly in IE it does not
work in FireFox. I believe it is the result of the
Spry.Effect.getOpacity or Spry.Effect.getStyleProp functions not
being properly calibrated for Firefox.
quote:
gBehaviorsArray["mainImage"] = new
Spry.Effect.Opacity(img, Spry.Effect.getOpacity(img), 0, {
duration: 400,
In the above line of gallery.js I replaced
"Spry.Effect.getOpacity(img)" by
"1" and that triggered the desired effect for
FireFox although it of course has the habit to set the current
image's opacity to full before fading in to the next image.
Help would be greatly appreciated.
Thank you.

That is because your page is currently invalid. And renders in IE quirksmode..
<base href="http://www.industrialwebsearch.com/">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
So make sure your page is valid, and the animations will go smooth in ie

How to create a Spry Gallery

Sorry for the rudimentary question, but I want to actually create a spry gallery like the one in the demos, but I am lost as to where to start (using Dreamweaver).
Thanks, Don

Hi,
The basis of the photo gallery is a spry master region and a detailregion.
Let's say your spry dataset is called photos.
The thumbnails within the master region are just like something below
<div spry:region="photos">
<div spry:repeat="photos">
<img src="{thumbURL}" spry:setrow="photos"/>
</div>
</div>
and the current image being displayed sits within this markup.
<div spry:detailregion="photos">
<img src="{imageURL}"/>
</div>
When you click on the thumbail it sets the current row of the photos dataset to that of the thumbnail. The detailregion automatically listens for this changes to updates it markup to show the matching full size photo for that row.
You then add some classes or div ids and css to style your photos and you have your basic photo gallery.
If you want to be able to select different galleries then you have different XML datasets for each gallery and on clicking the appropriate link or select item you run code like below
photos.setURL("gallery1.xml");
photos.loadData();
photos.setURL("gallery2.xml");
photos.loadData();
photos.setURL("gallery3.xml");
photos.loadData();
This will reload both the master region (thumbnails) and the detailregion (currently selectedphoto).
For the slideshow effects you just use Spry effects and the setrow functionality triggered via a timer (setInterval) i.e. here's some sample code from one of my pages
function pauseShow()
clearInterval(StartSlideTimer);
Spry.$$("#slideshowPlaying")[0].innerHTML = "";
function startShow()
clearInterval(StartSlideTimer);
StartSlideTimer = setInterval("fadeOutContentThenSetRow()", 6000);
if (shuffle)
Spry.$$("#slideshowPlaying")[0].innerHTML = "<p>You are playing the slideshow in shuffle mode</p>";
You can see the working page here www.thehmc.co.uk/photo.html
Our club pages works with our photos and albums on our Picasa account because that way you don't need to produce the xml, Picasa does that via it's rss feeds.
Feel free to use any of the code I've written in your pages or start with a basic version as I've outlined at the top - that's how the above page started out then I styled it with css and added the fancier stuff once the basics were working.
Regards
Phil

SPRY GALLERY STATIC - main image caption from alt attribute?????

I have been searching and digging for an answer to this question, but nothing comes up... the web , discussions, spry documentation... there is no joy to be had where the static gallery is concerned.
Please, could someone here enlighten me? I am trying to figure out how to add captions with static links. I have a working version of the gallery with thumbnails embedded on the page, but am stuck trying to bring the ALT attribute into the main image.
I have just finished a redesign of my boyfriend’s site, which is image heavy and uses the dynamic gallery in many of its pages (no problem with captions there). I am trying to replace the XML with static content for usability, tracking and general search engine issues. I could post a link to my static version if this helps clarifying the problem.
Help would be hugely appreciated.

Please read what I am writing to you.
SparklyArt wrote:
Thank you Ben, for your informative reply and link!
I can see the advantages of an html dataset, it makes a lot of sense, but the problem I am trying to solve right now is due to the fact that the spry gallery static does not use any dataset at all, which is actually great, but I can’t find any information on how to add titles to the main images.
Maybe this will clarify... my test page < http://www.theoland.com/art/spryGalleryStatic.htm > is based on this example:
< http://labs.adobe.com/technologies/spry/demos/gallery_pe/static/china.html > - here, the embedded thumbnails are linked directly to the main images... no xml, no dataset... but, unfortunately, no titles either... are there any scripts that would help solve this? Can the gallery_init.js be modified to grab the alt or title tag?
The site has validated as it is (gallery test not included), but the dynamic pages are definitely not search engine friendly. The static gallery_pe would be a lovely alternative.
Can you help?
Even though you might not think so, your static gallery does have a database of sorts albeit in the form of images placed in a folder. This is called a flat database because it does not have the different relationship tiers of the likes of MySQL.
To update your database, you simply add/remove/change an image and to link that data to your web page you add/remove/change the link; exactly the same process as with MySQL.
The problem that you are faced with is that, except for the name, width, height, size, encode type, there is no information attached to the image that you can use for a caption or title.
That is why I suggested using an HTML table so that you can marry your image up to some useful information. No JavaScript required! These sorts of tables have been in use for more two decades to show the same as what you are showing in your static gallery; but without the fancy features that JavaScript (in our case Spry) adds.
These pages give us the ultimate in search engine intimacy.
Having established the above, we make use of the HTML table to create a Spry dataset on the same page. Nothing else changes.The Spry dataset can then be used to incorporate the fancy features that you so desparately want all without XML.
JavaScript (in our case Spry) data is not search engine friendly, but because we already have the data in our static HTML table we do not have to wory about that.
The end result is a good looking site that is search engine friendly.
Ben

Caption to photos - spry gallery

hello
i am trying to replicate the functionaly / effects given at this link http://labs.adobe.com/technologies/spry/demos/gallery_pe/dynamic/index.html
I wish to add caption to the photos which i handle via XML. Can anyone help me in putting caption / title to the photos
regards
ssg

Hi,
I have captions and images via Spry XML datasets at the following page http://www.thehmc.co.uk/photos.asp
Try changing the example structure
div id="picture">
<div id="mainImageOutline"><img id="mainImage" alt="main image" src=""/></div>
</div>
To
<div id="picture">
<div id="mainImageOutline"><ul><li><img id="mainImage" alt="main image" src=""/>{caption}</li></ul></div>
</div>
Looks like the javascript file gallery_xds.js must be dynamically changing the
src attribute of the image via CSS selectors via Spry.$$ or some such. So it will need to
dynamically change the content of the li tag to include your captions.
Here's an extract of the CSS I use to style my gallery
/* This is for the photos page */
.photoTitles {
     display:block;
     clear: both;
     width: 840px;
.Gallery {
     list-style:none;
.Gallery li {
     float:left;
     width:240px;
     height: 290px;
     margin-bottom:5px;
     margin-left: 15px;
     color:#000;
     background:#CC3;
     text-align: center;
     font-style: italic;
     font-weight:600;
.Gallery img {
     display:block;
     width:220px;
     height:220px;     border: 10px solid #FFF;     }
Doesn't have the nice animation of the Adobe Spry example but you should be able to adapt the structure to fit your needs.
Cheers
Phil

Problem with spry in IE

hey guys im having a problem with Spry in IE only..
Ive tried the corrent browsers and it seems to be working well
Firefox
Opera
Safari
but Internet Explorer is not working the menus just wont drop down past my flash player?
any help would be great
heres the link to my temp site so you guys can see what i mean
www.dreamcatchermeadows.com/new_site/site/index.html
any help would be great
Thanks

i checked the compatability button on dream weaver and this come up
Dreamweaver Browser Compatibility Check
14-February-2011 at 01:26:05 PM GMT-08:00.
Target Browser Errors Warnings
Internet Explorer 6.0
1
0
Internet Explorer 7.0
1
0
Internet Explorer for Macintosh 5.2
1
0
Firefox 1.5
1
0
Netscape 8.0
1
0
Opera 8.0
1
0
Opera 9.0
1
0
Safari 2.0
1
0
Total
8
0
Details:
#000000
#000000
Error
Found 1 errors in SpryMenuBarHorizontal.css
Firefox 1.5; Internet Explorer 6.0, 7.0; Internet Explorer for Macintosh 5.2; Netscape 8.0; Opera 8.0, 9.0; Safari 2.0
line 19
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
End of report.

Issues with spry gallery in a DW template

Hi all,
I have incorporated a spry gallery I originally found at:
http://www.adobe.com/devnet/dreamweaver/articles/spry_photo_album_02.html
into my page. This works fine until I save my page as a template.The js seems to dissapear leaving the gallery area blank. The rest of the page is fine.
I understand this tutorial was written for v8 but have no idea why it wont work in a CS4 template.
I even tested the tutorial html by creating a new site and coverting the html file into a template. Gallery doesnt work.
Any help on this would be awesome as the gallery area was to be a main feature on the home page.
Cheers.

Make the link to the Flash element ROOT relative.
That way, the link doesn't need to be managed and will work
just fine in
your Template child pages.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"buckeyestargazer" <[email protected]> wrote
in message
news:gbreos$cpq$[email protected]..
> I'm relatively new to Dreamweaver (version 8) and I'm
having a problem
> inserting a flash (.swf) slideshow of pictures into a
template that then
> updates several webpages. The problem is, when I insert
the flash into
> the
> template page and the webpages get updated, the flash
animation does not
> play
> on the webpages and just has a white box. If I detach
the template from
> the
> webpage, then the flash displays correctly. But the
problem with that is
> then
> there is no point to using a template because I would
have to manually
> update
> each webpage instead of just the template when I want to
make a change to
> all
> the webpages. The problem must be with the template,
because when I try
> to
> attach the template to a very simple webpage containing
only a couple
> words and
> no other graphics, the flash will not display correctly.
Any ideas on
> what is
> wrong or how I can insert a flash slideshow into a
template so that it
> updates
> the webpages correctly?
>
>

Gallery Demo doesn't work in IE

I know i'm re-posting this but i can't belive this is so. So
i'm hoping people just didn't see my second message rather than
simply ignoring the fact that the gallery demo by Adobe doesn't
work right in IE (at least in mine with SP2).
If you notice when the main image changes there's a flicker
where it shows the previous image and only then the chosen image.
In the thumbnails the thumbnail that's being hovered over doesn't
stay on top of both images on either side.
Now my question is, does this problem have a solution or does
it simply not work in IE and that's fine by all?!!
Best,
Sofia

Hi Sofia,
I answered your original post of this question
here.
Lets move the conversation back to that thread so we can have
it all in one place.
Thanks,
--== Kin ==--

ZIndex issue with thumbnails in spry gallery

I am seeing problems with the z-index (zIndex) of the
thumbnails for the gallery demo in IE browsers (IE6 XP and IE7
Vista)... works fine in Firefox and others, of course. If you
reduce the margin around the thumbnails div... the image is "under"
the image to the right or below (when more than one line of
thumbs).
You can see this in your demo, but it's more pronounced if
you change the dimensions of the thumbs and/or reduce the margin in
the #thumbnails div rule.
Any solutions for fixing IE? If it's not possible to fix the
zIndex issue, is it possible to modify how the thumbnail images
are"grown"? so, rather than center out, perhaps grow them from the
bottom right corner, so that they never attempt to overlap other
thumbs to the right or below?
Help appreciated!

"n2dreamweaver" <[email protected]> wrote in
message
news:gplv2b$21i$[email protected]..
>
quote:
> Look for a post from me on this forum a year or so ago.
I believe I gave
> Adobe the fix for that - or at least drew a comparison
to the techniques
> we
> use in LSM:
>
>
http://www.projectseven.com/products/galleries/lightshow/tweaks/lsm-tpm/index.ht
> m
>
> Al Sparber - PVII
>
>
> Searching doesn't seem to come up with anything without
knowing the
> subject or
> keyword to use. I tried a search on Al Sparber - PVII as
author for the
> past 14
> months and the results were zero. Tried a search with
"thumbnails" as a
> keyword
> for the same time period and got the same zero results.
>
> Here's hoping that the coming "improvements" for these
forums include
> working
> search results!
>
> I will continue to search.... thanks for the hints...
hopefully, I'll find
> the
> solution.
I'll try to find it.
In the meantime, I tweaked the script on this LSM example
page so that the
thumbnail rollovers are overlapping the little thumbnails.
That gives you a
clearer picture of them "not going under".
http://www.projectseven.com/products/galleries/lightshow/tweaks/lsm-apm/index.htm

Css problem in spry gallery demo, ie "doubled margin" for thumbnails

Similar Messages

Maybe you are looking for