Spry tooltips dreamweaver cs5

hi
i'm new in the forum and hope i'm doing things right...
searched the forum for hours and couldnt find a solution. my problem:
built a tooltipp for a small image (100x100px) and replace it with a bigger one (300px sq). when i set the offset both to negative, the tooltip is shaking like mad when i hover over. there is only the img in the div. i added some margin and padding to the the class '.tooltipContent'.
tried to do it in a new html file (dreamweaver template, without any additional css) but it didnt work out - many thanks for any help!!
would be a great tool and a shame if i couldn't use it!
raphael

hi gramps
many thanks! when i turn on the second box (according the reccommendation), the flickering is gone.
i'm not sure if have to remove the width and heigth as well - seems to work without removing it. please let me know if there are any reason to do so.
again many thanks - searched the forum for a long time, but im not english and didnt look up "flicker" ...
nice weekend
raphael

Similar Messages

Menu behind spry slideshow dreamweaver cs5?

Using Dreamweaver CS5
Hi. I have a site with a css3 dropdown menu that seems to work fine on all of my pages except my photo gallery page. The menu appears behind the Spry Slideshow with Filmstrip that I got from the Widget Browser.
The site is not live and only on my local machine but here is the page html in a text doc: http://www.210usa.com/index.txt
Here is the main css: http://www.210usa.com/css_prob.txt
Here is the slideshow css: http://www.210usa.com/css_slideshow.txt
I have changed the z index but that is not helping at all. I found this for problems with flash docs but I am a real novice and do not know how to even put these tags in my code. Any help would be greatly appreciated.
Thanks

Grüss Dich sailor,
in my opinion "SpryTabbedPanels" actually only do what they should to do and so it inevitably leads to the covered menu items. I played a little bit around with the width from your "css3menu1/style.css"
height:22px;line-height:22px;border-width:0 0 3px 0;border-style:none;border-color:#009900;border-radius:10px;-moz-border-radius:10px;-webk it-border-radius:10px;padding:3px 10px; width: 650px;}
and I got this:
so you can see what I mean. To correct this you had to put down your "photo gallery for Mystic Pizza II" so far, till there is enough space for the panel. And therefore I would prefer a solution by using a "SpryMenuBarVertical" leftmost on your page (if you mean it's necessary so too on the right).
Glück auf!
Hans-Günter

Fixed position header / logo / home link / spry menu dreamweaver cs5

Hi all,
I'm starting a new discussion on this:
I have posted the code below for the header and the spry.
The header with logo and homelink keeps going underneath the spry and the spry jumps to the top of the page, this has only happened when I addded position: fixed;
However I do need this to have a fixed postion as I want to Spry and Header to remain fixed when scrolling, I'm hoping someone can help me with this
Thankyou
HTML:
<div id="header">
<div align="center"><a href="index.html" id="homeLink"></a></div>
</div>
<div id="container">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a class="MenuBarItemSubmenu" href="../mall.html">MENS</a>
        <ul>
          <li><a href="../mall.html">ALL</a></li>
          <li><a href="../mouterwear.html">Outerwear</a></li>
          <li><a href="../msweatsknitwear.html">Sweats + Knitwear</a></li>
          <li><a href="../mtops.html">Tops</a></li>
          <li><a href="../mshirts.html">Shirts</a></li>
          <li><a href="../mdenim.html">Denim</a></li>
          <li><a href="../mtrousers.html">Trousers</a></li>
          <li><a href="../mshorts.html">Shorts</a></li>
          <li><a href="../mfootwear.html">Footwear</a></li>
          <li><a href="../maccessories.html">Accessories</a></li>
        </ul>
      </li>
      <li><a href="../womens.html" class="MenuBarItemSubmenu">WOMENS</a>
        <ul>
          <li><a href="#">ALL</a></li>
          <li><a href="#">Outerwear</a></li>
          <li><a href="#">Sweats + Knitwear</a></li>
          <li><a href="#">Tops</a></li>
          <li><a href="#">Shirts</a></li>
          <li><a href="#">Dresses</a></li>
          <li><a href="#">Playsuits + Jumpsuits</a></li>
          <li><a href="#">Skirts</a></li>
          <li><a href="#">Denim</a></li>
          <li><a href="#">Trousers</a></li>
          <li><a href="#">Shorts</a></li>
          <li><a href="#">Footwear</a></li>
          <li><a href="#">Accessories</a></li>
        </ul>
      </li>
      <li><a class="MenuBarItemSubmenu" href="../footwear.html">FOOTWEAR</a>
        <ul>
          <li><a href="#">Mens</a> </li>
          <li><a href="#">Womens</a></li>
          <li><a href="#">Unisex</a></li>
        </ul>
      </li>
      <li><a href="../accessories.html" class="MenuBarItemSubmenu">ACCESSORIES</a>
        <ul>
          <li><a href="#">ALL</a></li>
          <li><a href="#">Bags</a></li>
          <li><a href="#">Wallets + Purses</a></li>
          <li><a href="#">Belts</a></li>
          <li><a href="#">Hats</a></li>
          <li><a href="#">Scarves</a></li>
          <li><a href="#">Sunglasses + Glasses</a></li>
          <li><a href="#">Watches</a></li>
<li><a href="#">Jewellery</a></li>
<li><a href="../maccessories.html">Mens</a></li>
<li><a href="#">Womens</a></li>
        </ul>
      </li>
      <li><a href="../about.html">ABOUT</a></li>
      <li><a href="../blog.html">BLOG</a></li>
      <li><a href="../contact.html">CONTACT</a></li>
    </ul>
</div>
<p> </p>
<div id="content">content</div>
CSS:
#header {
          background-color: #FFF;
          background-image: url(LOGO/CHAIN%20logo%20new%2024.png);
          background-repeat: no-repeat;
          background-position: center center;
          height: 200px;
          width: 100%;
          position: fixed;
#container {
          height: 60px;
          width: 100%;
          margin-right: auto;
          margin-left: auto;
          position: fixed;
#homeLink {
          width: 100%; /* set width to width of background image */
          height: 200px; /* set height to height of background image */
          display: block;
          position: fixed;

I'm not 100% sure where you find them in CS5 (I use CS4) I would just add them manually to the container, header and homelink css. All you need to do is open the .css file and add...
top:#px;   /* The # you use defines how close to the top of the window the div sits */
left:#px;   /* The # you use defines how close to the left of the window the div sits */
EDIT: So it would look something like this...
#header {
          background-color: #FFF;
          background-image: url(LOGO/CHAIN%20logo%20new%2024.png);
          background-repeat: no-repeat;
          background-position: center center;
          height: 200px;
          width: 100%;
          position: fixed;
          top:0px;
          left:0px;
#container {
          height: 60px;
          width: 100%;
          margin-right: auto;
          margin-left: auto;
          position: fixed;
          top:100px;
          left:100px;
#homeLink {
          width: 100%; /* set width to width of background image */
          height: 200px; /* set height to height of background image */
          display: block;
          position: fixed;
         top:10px;
          left:10px;
Obviously, use the pixel dimensions you need to position everything correctly.

Need help with Dreamweaver Spry Tooltips.

Hello, all. First off I gotta say that I am new to this so PLEASE go easy on me here.
Okay, I created some Spry tootips on an image in Dream weaver. Everything worked well in the live view, everything came out as I hoped. But when I uploaded everything the tooltips are on the screen but don't pop up the way(s) they are supposed to. I did not create the site in Dreamwever, I simply created the image map in Fireworks, and imporetd the HTML into Dreamweaver.
Here is the page:
http://thealamedapirates.org/index.php?option=com_content&view=article&id=56&Itemid=81
And here is the code on the page: THANK YOU!!!!
<!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>
<title>Eqp2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="http://thealamedapirates.org/SpryAssets/SpryTooltip.js" type="text/javascript"></script>
<link href="http://thealamedapirates.org/SpryAssets/SpryTooltip.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#ffffff">
<img name="Eqp2" src="http://thealamedapirates.org/content/Eqp/Eqp2.png" width="302" height="504" border="0" id="Eqp2" usemap="#m_Eqp2" alt="" />
<map name="m_Eqp2" id="m_Eqp2">
<area shape="poly" coords="72,81,124,79,127,114,204,114,206,79,260,79,260,148,73,148,72,81" href="javascript:;" alt="Shoulder Pads" id="sprytrigger3" title="Shoulder Pads" />
<area shape="rect" coords="0,448,73,505" href="javascript:;" alt="Cleats" id="sprytrigger6" title="Cleats" />
<area shape="rect" coords="73,287,212,397" href="javascript:;" alt="Leg Pads" id="sprytrigger5" title="Leg Pads" />
<area shape="rect" coords="95,236,212,287" href="javascript:;" alt="Girdle" id="sprytrigger4" title="Girdle" />
<area shape="rect" coords="138,80,195,110" href="javascript:;" alt="Mouth Piece" id="sprytrigger2" title="Mouth Piece" />
<area shape="rect" coords="119,3,212,82" href="javascript:;" alt="Helmet" id="sprytrigger1" title="Helmet" />
</map>
<div class="tooltipContent" id="sprytooltip6"><br />
<img src="../../EQP Images/molded2.jpg" width="63" height="68" alt="Cleats" longdesc="http://thealamedapirates.org/content/Eqp/parts/molded2.jpg" /> <img src="../../EQP Images/screw-cleats.jpg" width="63" height="67" alt="Screw-Ins" longdesc="http://thealamedapirates.org/content/Eqp/parts/screws.jpg" /><br />
Cleats:<br />
They can be molded or screw-in bottoms.<br />
No metal tip cleats allowed. Make<br />
sure they are laced, and tied all the way up!
</div>
<div class="tooltipContent" id="sprytooltip5"><br />
<img src="../../EQP Images/legpads.jpg" width="70" height="72" alt="Leg Pads" longdesc="http://thealamedapirates.org/content/Eqp/parts/legpads.jpg" /><br />
Leg pads:<br />
2 Hip pads, 1 tail bone pad, 2 thigh pads, <br />
and 2 knee pads. All 7 pads must be worn at<br />
all times. </div>
<div class="tooltipContent" id="sprytooltip4">
<p><img src="../../EQP Images/girdle.jpg" width="73" height="79" alt="Girdle" longdesc="http://thealamedapirates.org/content/Eqp/parts/girdle.jpg" /><br />
Girdle: <br />
    Worn under the pants. All leg pads are <br />
    inserted into the girdle. </p>
</div>
<div class="tooltipContent" id="sprytooltip3">
<p><img src="../../EQP Images/ShPads.jpg" width="119" height="103" alt="Should Pads" longdesc="http://thealamedapirates.org/content/Eqp/parts/ShPads.jpg" /><br />
Shoulder Pads.</p>
</div>
<div class="tooltipContent" id="sprytooltip2">
<p><img src="../../EQP Images/Mpiece.jpg" alt="mouth piece" width="102" height="55" align="textop" /><br />
    Mouth Piece:<br />
    Can be any color except white and<br />
    clear. <br />
Must be in at all times. </p>
</div>
<div class="tooltipContent" id="sprytooltip1">
<p> </p>
<p>Helmet and Chinstrap:<br />
    Must be on and buckled up at all <br />
    times. </p>
</div>
<script type="text/javascript">
var sprytooltip1 = new Spry.Widget.Tooltip("sprytooltip1", "#sprytrigger1", {useEffect:"fade", showDelay:500, hideDelay:200});
var sprytooltip2 = new Spry.Widget.Tooltip("sprytooltip2", "#sprytrigger2", {showDelay:500, hideDelay:200, useEffect:"fade"});
var sprytooltip3 = new Spry.Widget.Tooltip("sprytooltip3", "#sprytrigger3", {showDelay:500, hideDelay:200, useEffect:"fade"});
var sprytooltip4 = new Spry.Widget.Tooltip("sprytooltip4", "#sprytrigger4", {showDelay:500, hideDelay:200, useEffect:"fade"});
var sprytooltip5 = new Spry.Widget.Tooltip("sprytooltip5", "#sprytrigger5", {showDelay:500, hideDelay:200, useEffect:"fade"});
var sprytooltip6 = new Spry.Widget.Tooltip("sprytooltip6", "#sprytrigger6", {showDelay:500, hideDelay:200, useEffect:"fade"});
</script>
</body>
</html>

S.C.Davison wrote:
Thanks for the reply.
Is there a way to fix that seemingly minor issue?
If it is a minor issue, I wouldn't bother about it, although the problem seems to persist throughout your document as per http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fthealamedapirates.org%2Findex.php %3Foption%3Dcom_content%26view%3Darticle%26id%3D56%26Itemid%3D81
As said, this is an issue caused by your blog software and although it affects a Spry widget, it is not a Spry issue.
My advice, hard code into your document and do not use TinyMCE to code the document.
Gramps

Help with Dreamweaver CS5 spry menus. Menu is not dropping down in IE7.

Hello.
We recently upgraded from GoLive CS3 to Dreamweaver CS5. Wow! This has been a big change for us. We are having trouble with a website that we are building, specifically the Spry Menu drop downs not appearing correctly in IE7 and older. While the dropdown menu appears in other browsers, it is not dropping down at all in IE7 and earlier versions. After researching this topic on many websites, including this forum, we are still unable to resolve our particular issue. We have tried many of the suggestions that are common to our problem, but have not found a solution as yet. Could someone please check out this page for us, and possibly give us some advise. We are working on Mac OSX. Thank you in advance for any suggestions you may offer.
http://www.advertools.net/pgtdemo/index.html

When I added the following to the document
<style>
#main_image {position:static;}
</style>
the menu items appeared albeit in the wrong position.
The reason for the hidden menu items is because #main_image had a position of relative, effectively creating a flow of its own rather than following the natural flow of the document.
Now for the postion of the submenu. If I add the following style rules to the document the submenu items are in the correct position
ul.MenuBarHorizontal li {text-align: left;}
ul.MenuBarHorizontal a {text-align: center;}
In the first line I have reset the rule that you had changed to center align and in the second line (which is not in the original CSS) I have aligned the text in the anchor tag to align center.
The reason is that IE<8 behaves differently to other browsers when it comes to list items causing the nested list items (submenu) to align themselves to the center of the text of the parent list item.
I hope the above helps.
Gramps

Download spry table for Dreamweaver CS5

Hi All,
I have upgraded to dreamweaver CS5 recently.
However, I cannot find the spry table in the menu.
Where can I download the spry table from interenet?
Thanks for help
Kenny

Han-G,
Thanks for you help.
Actually, the spry table is installed but the spry table icons were missed in the menu bar.
Kenny

Please can someone provide me with Spry Menu Bar Horizontal code for Dreamweaver CS5.5?

Please can someone provide me with Spry Menu Bar Horizontal code for Dreamweaver CS5.5?

Log-in to the Adobe Exchange with your Widget Browser and grab "Spry Menu 2.0."
http://labs.adobe.com/technologies/widgetbrowser/
In Widget browser, style the menu as desired and Save files to your DW Local Site folder.
Nancy O.

Dreamweaver CS5 webdesign lay-out problem + spry

Hello there
I'm making a site, but I'm encountering some problems. I'm making one in Dreamweaver CS5 with CSS-styles. I decided to work with percentages to build up my site.
So my container has following measurements: containeris min-width: 640, max-width: 1920, width: 75% (to have 2 white backgroundcolums next to my site).
My sidebar is width: 21%, float:left and content is width 79%, float:right
I arranged the lay-out of my menu with submenu, placed in sidebar, with a sprymenubarvertical from Dreamweaver.
When I open up the site on my Dell E6510 laptop, the site looks as the first picture of below, so everything works fine!
When some computers, especially older ones open it up, the get the second picture.
So can anyone help me figuring out why:
- The content is now placed UNDER my menu and not next to eachother?
- Why did my menu turn white, did I loose my background image of it, and does he show the a:hover as normal?
- Same as above for the submenu...
Then I'm having another problem: If I make the screen smaller of my browser, like half of the page, he shrinks the sidebar and content, but he doesnt shrink the font + the gallery from my content doesn't shrink either.
Also, the slideshow, made with Aleo slideshow maker, doesn"t show on mac.
Could this be solved by just making the widths fixed or is there another solution? Also, the slideshowgallery has a fixed width(as imported), how to make that automaticely go smaller if you shrink the screen?
Any tips would we convenient!
(http://www.maxx-it.be/Aanbod/Webdesign/mira.html)
The first picture is how it should be, second one is taken from how other computers see the site, third one is if I shrink the screen
Thanks alot you guys
Greetz
MasterJ09

I'm sorry didn't mean to send any corrupted files or links.
In case it would help I added a link here where I uploaded my style.css, and my sprymenubar styles, with the basic template and the indexhtmlpage through Megaupload. I added the printscreens as well. I hope this will work.
If this isn't the right method of posting please tell me how to?
Thanks in advance!

Dreamweaver CS5 and Spry

I'm been looking into Spry, and I'm wondering if there's something that has basically replaced it.
Some of the help in Spry goes back to 2008 or so, and some of the widgets are impossible to get(like autosuggest).
There are also other pages that don't exist any more.
It looks like a technology that has seen its day. So should I be looking in a different direction?
Basically, I'm interested in Javascript/JQuery/Ajax user-interface-type coolness for front-end Web design.
I just downloaded the Yahoo YUI library and am looking into that.
This all started as I was using ColdFusion and wanted to use Ajax to return form results to the same page
and use autosuggest or autocomplete(I don't know what the difference is) for a drop-down of names
that a potential registrant could choose from.
These simple, form-based ideas have led me on an adventure of discovery. For example, I saw some nice
Adobe videos about YUI calendar and other things, from Jorge and somebody else, two very good-looking guys
who do a great job of presenting Dreamweaver, but the videos were from 2008.
So it's hard to escape the feeling that I'm missing something major here and that there is a current technology
that I should be looking at instead of what's inside Dreamweaver.

To add to your misery, there are two directions that Spry has evolved into, the original Spry based on version 1.6.1 (pre-release) and the so-called UI widgets which are based on version 1.7 (pre-release). The two versions are not compatible so you need to choose beforehand.
Donals Booth and Kin Blas are the authors of Spry see here http://tv.adobe.com/watch/closeup-developer-interviews/donald-booth-and-kin-blas/
Donald Booth did start on a jQuery dataset based on Spry see here https://github.com/jblas/jquery-dataset; but Donald nowadays seems to be pre-occupied with jQuery-mobile see here https://github.com/jblas.
With no progress being made with Spry, I tend to use widgets that which is readily available now, such the menubar, accordionpanel validation etc, maily because they are easily implemented using Dreamweaver. I shy away from the UI widgets because I think that they only complicate things. Instead I try to use jQuery widgets where possible. Some of these are easily implemented using the Widget Browser, see here http://www.adobe.com/cfusion/exchange/index.cfm?s=5&from=1&o=desc&cat=335&l=-1&event=produ ctHome&exc=3
I continue to use SpryDataSets. I have yet to come across a better solution.
Having said the above, I think that when Adobe included Spry with Dreamweaver, they should have at least come with a final release instead of leaving us in limbo with their pre-release products. Spry is a winner! it will be a sorry day if there is no further support for this product as Adobe has done with ADDT the Adbobe Developer Toolbox, see here http://forums.adobe.com/community/dreamweaver/addt
Gramps

Spry tooltip problem in IE 7 & IE 8

Does the Spry tooltip have a browser incompatibility with IE 7 and IE 8, or is there something on my test page that interferes with the function of the tooltip?
I inserted a tooltip in this page using DW CS5--very straightforward as shown on every tutorial I have found:
http://www.piie.com/dev/cite-this.htm
Yet in IE 7 and IE 8, the tooltip appears at the bottom of the page at all times. There is no activity when mousing over the trigger area ("Cite This", upper right of main content area). It is as if the js / css files are not working, so I put in absolute paths for those files.
In any event, I know that the js / css Spry tooltip files are live because in FF 3, the tooltip works exactly as expected.
The Spry tooltip files I am using show they are the latest version, 1.6.1.
Is this a browser bug, or is there something on my page that is interfering with the Spry tooltip in IE 7 and IE 8? I have tried in vain to find any information. Thanks for any pointers anyone can give me.

I checked here to find out why my
www.museumsforeningen-lf.dk works nicely with spry tooltips in firefox but not at all in explorer 8 (and didn't get any the wiser). the base jpg kind of jumps a bit but no
tips or anything. I've only just got my eyes on this spry tooltips - and have basically totally
dumped using explorer myself because it's too troublesome whatever you want to do (reading papers without a gazillion errors in particular) but
I need to accomodate the potential viewers who might use explorer (it's a
museum 'friends of'' webpage).
can this spry stuff work in explorer at all? I've tried using explorer without add-ons and with various settings in security but nothing worked. can something be done via the code - the old dears in the friends group probably aren't up to much change in settings on their browsers, but they sure do use the net.
Freya

Need help in CS3 creating CS4 spry tooltip-like widgit

I am extremely new to Dreamweaver and know very little HTML and no other codes and so please bear with me if I am using some terms incorrectly.
I created an image map with hotspots. When I move the mouse over a hotspot I would like for a description box to come up with either an image and text, or just an image, whichever is easiest. I believe what I am trying to do is called an image tooltip?
I've searched all over the internet to try and find step by step instructions or a video on this, but the closest I could find was the CS4 spry tooltip widgit, which is new to dreamweaver and not part of CS3. I figured out how to put a simple text tooltip on a hotspot using "alt" but that is too basic and I need at least an image instead when I put my mouse over the hotspot.

I am extremely new to Dreamweaver and know very little HTML and no other codes
Without an understanding of HTML and CSS, you will find Dreamweaver an uphill struggle.
There are instructions to achieve what you want to do on the Spry website at http://labs.adobe.com/technologies/spry/samples/index.html. Scroll to the bottom of the page, and you'll see three links related to Spry tooltips. However, you'll have considerable difficulty implementing anything without a basic knowledge of HTML, CSS, and JavaScript. Dreamweaver is a professional tool for working with those technologies. It is not the magic wand that some people seem to expect. Spend a little time learning about web technologies, and Dreamweaver will become a joy to work with.

Adobe recommends: Enhanced support for CSS3 in Dreamweaver CS5.5

Over the past week, we publicized some high-value content from adobe.com and other community sites. Hopefully you enjoyed these posts and found the resources useful. Today is our last day of the "Adobe Recommends" series.
Continuing our trip along the CSS highway, we now move to CSS3 with our next recommendation, by Preran Kurnool:
Enhanced support for CSS3 in Dreamweaver CS5.5
This blog post takes you through using box shadow, text shadow, border radius, and border image properties in Dreamweaver CS5.5.
Give it a spin and let us know what you think!
Previous recommendation threads:
Use Dreamweaver CS 5.5 to package your web application for iOS and Android devices
Customizing a Spry Menu Bar widget
Spry Menu Bar resources
Layout 101
CSS page layout basics
New CSS features in Dreamweaver CS5
Automatically attaching style sheets to new documents

Aegis Kleais wrote:
Sorry, Al, but I couldn't disagree more. Where I respect the fact that, as coders, we're rather ingrained with our workflow processes and, at times, hesitant to change, I've found LESS' benefits to be very worthwhile.
No need to apologize. Preprocessing is a topic on which there are differing opinions. You have one. I have one. There are advocates:
http://blog.urbaninsight.com/2012/04/12/ten-reasons-you-should-be-using-css-preprocessor
There are those who are not sold:
http://blog.millermedeiros.com/the-problem-with-css-pre-processors/
http://www.skybondsor.com/blog/css-preprocessors
There are those mostly sold:
http://css-tricks.com/musings-on-preprocessing/
There are even those who have been converted (but who might reverse at some later point):
http://cognition.happycog.com/article/preprocess-this
Heck, even I might be converted someday - or not
Bottom line for me, right now? I know I can write CSS that is better than most, more efficient than most, and easier to follow than most, and a preprocessor would add unwanted complexity. But that's for me. For someone not able to be organized intutively, or for a large - but carefully coordinated - team, a preprocessor could be a positive.
But not for me.
There are evolving trends - popular aspects of the technology that may and should find themselves being adapted into CSS. But I've been around this business as long as CSS has. I've seen buzzwords and trends and I've historically been spot-on in predicting the one that will stick. I think preprocessing will stick - but only insofar as it will be a catalyst for features in future versions of CSS. As a separate technology it makes no sense - to me

Drop-down menu in Dreamweaver CS5.5 not displaying

Thanks for anyone's help. I'm a first time user of the forum so please excuse any protocol errors.
I can't get my drop-down menu to display on my web page (http://www.cglcontracting.com/) on a Windows platform using Dreamweaver CS5.5.
Thanks very much for any advice/help.

Hi again -
My previous suggestion did not seem to make any difference, the CSS still did not validate.
I seems to be choking on your Browser Hack section.
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.cglcontracting.com%2FSpr yAssets%2FSpryMenuBarHorizontal.css&profile=css3&usermedium=all&warning=1&vextwarning=&lan g=en
I re-wrote the bottom Browser Hack section and it now validates.
I'll paste the whole CSS file here, Save it as "SpryMenuBarHorizontal.css" and give it a try.
@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: 90%;
    cursor: default;
    width: auto;
    color: rgb(153,153,153);
    text-transform: uppercase;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: rgb(255,255,255);
    vertical-align: middle;
/* 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
    color: rgb(153,153,153);
    z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 8em;
    float: left;
    color: rgb(0,255,0);
    overflow: hidden;
    visibility: inherit;
/* 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
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    color: rgb(204,204,204);
    top: 0px;
    overflow: auto;
    visibility: inherit;
    margin-top: -5%;
    margin-left: 95%;
/* 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
    color: rgb(204,204,204);
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-variant: small-caps;
    text-transform: uppercase;
    background-color: rgb(255,0,0);
    left: auto;
    width: auto;
    z-index: auto;
    visibility: inherit;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    text-align: left;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    background-color: rgb(204,204,204);
    margin-top: -5%;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: 100px;
    background-color: rgb(204,204,204);
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
    border: 0px none #CCC;
    margin-top: 0%;
    margin-right: 0%;
    margin-bottom: 0%;
    margin-left: 0%;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #F00;
    color: #003;
    text-decoration: none;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 1.2ex;
    font-weight: bold;
    vertical-align: middle;
    padding-bottom: 0.53em;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #000;
    color: rgb(255,255,255);
    text-align: center;
/* 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: #900;
    color: #066;
    text-align: center;
    vertical-align: middle;
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%;
    background-color: rgb(255,0,0);
    color: rgb(0,0,51);
/* 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%;
    background-color: rgb(204,204,204);
    visibility: inherit;
/* 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%;
    background-color: rgb(153,0,0);
    visibility: visible;
/* 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%;
    background-color: rgb(153,153,153);
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.MenuBarVertical iframe
    position: absolute;
    z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarVertical li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;

Help sry light box gallery doesn't insert in dreamweaver cs5.5?

I just upgraded to dreamweaver cs5.5 and the spry lightbox gallery widget doesn't load properly ? I drag and drop in design view. All my other adobe programmes are still cs3 flash photoshop etc is this why or what am I doing wrong as all i get on the page is a set of images vertically from the gallery template and no gallery layout? Can anyone help?

Not sure that Spry has a lightbox gallery. I assume that you mean the jQuery LightBox Gallery Widget.
If the assumption is correct, then make sure that you have the following files in the correct folder/directory.
<script type='text/javascript' src='scripts/jquery.js'></script>
<script type='text/javascript' src='scripts/lightbox.js'></script>
<link type='text/css' href='css/lightbox.css' rel='stylesheet'/>
<link type='text/css' href='css/sample_lightbox_layout.css' rel='stylesheet'/>
It is wise to supply a link to your site so that we do not have to make assumptions
Gramps

Error when adding Spry Tooltip to page with footer library

I'm using Dreamweaver CS4 and the Spry menu to apply widgets.
I was able to create a brand new page, import an image, and apply the Spry Tooltip widget successfully (as well as edit the CSS etc.).
But I run into problems when I applied it to an image on my real page, which is pretty busy, and in columns etc. I select the same image and apply the Spry Tooltip. I get this error message:
"Making this change would require changing code that is locked by a template or a translator. The change will be discarded."
Searching online, it seemed to have something to do with a region that is not editable, like a template or library item. I'm not using Templates, but I did have a few library items. The Library for my footer, which included the script for Google Analytics, was what was causing the problems.
It seems what Tooltip was trying to do was insert its script INSIDE the existing script in the Footer library - which is not editable. I needed to remove the Footer Library, apply the tooltip, then re-insert the Footer Library. This is how it needed to flow:
</div>

<div id="footer">
<p>footer copy here</p>
</div>
<script type="text/javascript">
blah blah google analytics stuff...
</script>

<div class="tooltipContent" id="sprytooltip1">Tooltip content here.</div>
<script type="text/javascript">

</script>
</body>
</html>
I think if the footer library didn't have a script in it, it would not have been an issue. It's just that the </script> was right before the </body> and it figured it could just insert the Spry code there.
I wasted an hour troubleshooting this - I wish Dreamweaver was smarter when it inserted widgets and would know where Library items started and stopped.

Select your external drive in finder.
press CMD and i
an info windows will open - what is reported as "Format" ?
anyway scroll down to the very bottom: "Sharing & Permissions"
set everyone's privilege to "Read & Write" and choose to "Apply to all enclosed items"

Spry tooltips dreamweaver cs5

Similar Messages

Maybe you are looking for